最近在学习react，做了一个大屏显示的小项目。本地开发比较顺利，但是在线上部署的时候遇到了问题。费了不少力气，走了很多弯路。谨以此文纪念。如果能对遇到同样问题的你有所帮助，我将不胜荣幸。项目界面如下：离线开发过程不是本文的重点，下次略过。有需要的可以参考我的另一篇文章《react的开发部署》。接下来说一下服务器上的部署。我总结了一下，线上部署大致有两种方式：1、将打包后的文件部署到服务器上。本地开发完成后，执行npmrunbuild命令，在项目根目录下生成build目录。该目录是打包后的开发文件。文件，大概是这样的：把这个目录上传到服务器，然后用nginx处理，假设你有一个域名：http://www.reactdemo.com；然后你需要做的就是找到conf文件（一般安装在/usr/local/nginx/，当然可能不一样，也有可能nginx安装目录和conf文件目录是分开的，其中涉及到对服务器的一些操作，需要自己确定），打开nginx.conf.default文件，在里面添加一些代码（假设我的代码放在/www/build）：server{listen80;服务器\_namewww.reactdemo.com；根/www/构建；索引index.html；}那么第一步就完成了，然后启动nginx：/usr/local/nginx/sbin/nginx-c/usr/local/nginx/conf/nginx.conf.default如果启动时没有报错，那么就可以直接在浏览器中运行。二、使用serve部署这种方式与第一种不同的是，所有的操作都是在服务器上进行的。build目录也是在服务端生成的，具体操作如下：1.上传工程将本地的整个工程（不包括node_modules目录）上传到服务端，相当于在服务端创建了一个工程。2.安装依赖/编译记得运行npminstall安装依赖，然后执行npmrunbuild生成静态文件。这一步会进行一些校验、压缩等操作，然后在项目的根目录下生成build文件。这个build和第一种方式上传的build是一样的。3、运行到这里，你可能会觉得执行其实很简单，不就是输入命令npmstart吗？其实这个方法也是可以的，pm2也可以守护，但是这个命令其实是启动了一个本地的开发服务器，比较简单。但是如果要访问很多，需要在生产环境生成文件，所以需要执行npmrunbuild命令。执行npmrunbuild命令后，会提示安装serve命令以及如何执行serve命令。这里忘记保存图片了，提醒一下，有两个npminstall-gserveserve-sbuildserve命令可以运行一个静态站点。假设您想要提供一个静态站点、单页应用程序或只是一个静态文件（无论是在您的设备上还是在本地网络上），这个包就是您的正确选择。根据提示安装serve，然后执行serve-l5500-sbuild命令（由于端口占用问题，我需要在5500端口运行，所以加了参数-l5500），这里你还需要在nginx上添加代理（因为是在服务器本地执行）：location/{proxyhttp://127.0.0.1:5500}然后浏览器访问域名，一切正常，看起来很完美。然而，困扰我很久的问题来了：当xshell命令窗口关闭或者长时间不活动导致网络断开时，浏览器返回502。看到这个问题，我想大家的第一反应是添加守护进程，是的，我也是这么想的，所以我使用pm2作为守护进程pm2startserve-l5500-sbuild--namereactApp--runstart不知道是不是我没写对，还有它最终没有成功。然后为了这个问题折腾了一个上午。后来我反映不能再这样下去了，就去当地的前端组请教了一些同事。其中一位建议我使用nohup，但我对nohup了解不多；另一个给了我一段代码module.exports={apps:[{name:"app",script:"/usr/bin/npm",args:'runstart',cwd:'/home/nuxtapp'}]}的意思就是在根目录下创建一个包含这段代码的文件，然后用pm2启动这个文件。我试了之后还是没有解决。前后看了很多网上的文章，大家很少遇到类似的问题，基本都用第一种方法解决了。但是我还是想试试第二种，前端的问题在前端解决了。就在我以为我要搁置这个问题的时候，我不小心打开了package.json文件，看到了这里的脚本。不知道是不是灵感突然来了。在阅读了内置命令后，我决定尝试添加一个新命令。执行的是command而不是serve：结果这么成功，可能熟悉的人会嘲笑这个很简单的问题（羞耻）。不过经过我的折腾终于解决了这个问题，很开心不是吗？
