react线上部署的问题

最近学习react，自己做了个大屏展示的小项目，本地开发相对比较顺利，但是在进行线上部署的时候却遇到了问题，费了不少精力，走了不少弯路。谨以此文做纪念，如果能帮到遇到相同问题的你，倍感荣幸。

项目界面如下：

线下开发流程不是本文的重点，在次略过，如果需要可以参考我的另一篇文章《react的开发部署》。接下来就说说服务器上的部署。

我总结了一下线上部署大概有两种方式：

一、部署打包后的文件到服务器

本地开发完成后执行npm run build命令会在项目的根目录生成一个build目录，这个目录中就是开发文件打包后的文件，大概是这个样子的：

将这个目录上传到服务器上，然后用nginx来处理，假设你有一个域名：http://www.reactdemo.com；那么你需要做的就是找到nginx的中的conf文件（一般安装在/usr/local/nginx/中，当然也可能不一样，也有可能nginx的安装目录和conf文件的目录是分开的，这里涉及到一些服务器上的操作，你需要自行去确定），打开nginx.conf.default文件，在其中添加一些代码（假设我的代码放在/www/build中）：

server { 
    listen 80; 
    server\_name www.reactdemo.com; 
    root /www/build; index index.html; 
}

那么第一步就执行完了，然后启动nginx就可以了：

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf.default

如果启动没有报错，那么就可以直接在浏览器中运行了。

二、使用serve部署

这种方式与第一种不同的是，所有的操作都是在服务器上操作的。build目录也是在服务器上生成的，具体操作如下：

1、上传项目

将本地的整个项目（不包括node_modules目录）上传到服务器，相当于在服务器上创建了一个项目。

2、安装依赖/编译

记得运行npm install来安装依赖，然后执行npm run build来生成静态的文件，这一步会执行一些校验、压缩等操作，然后在项目的根目录生成一个build文件，这个build跟第一种方式上传的build是一样的。

3、运行

这里可能你会想执行其实很简单，不就是输入命令npm start吗？其实这种方式也可以，pm2也能守护，但是这个命令其实是开启了一个本地开发服务器，也比较简单。

但是如果要大量访问的时候，是需要生成production环境的文件，所以需要执行npm run build命令，当你执行npm run build命令后，会提示你安装serve命令以及执行serve命令的方法，这里忘记保存图片了，提示你的命令有两条

npm install -g serve 
serve -s build

serve命令可以运行一个静态站点，npm网站时这样介绍的

Assuming you would like to serve a static site, single page application or just a static file (no matter if on your device or on the local network), this package is just the right choice for you.

根据提示安装好serve，然后执行serve -l 5500 -s build命令(由于端口占用问题，我需要在5500端口运行，所以添加了参数-l 5500)，这里还需要在nginx上加代理(因为是在服务器本地执行的)：

location / { 
    proxy http://127.0.0.1:5500 
}

然后浏览器访问域名，一切正常，看起来很完美。但是，困扰我半天的问题来了：

当xshell命令窗口关闭或长时间不操作导致网络断开的时候，浏览器返回了502

看到这个问题，我想大家的第一反映就是添加守护程序，对，我也是这么想的，所以我用pm2来作为守护程序

pm2 start serve -l 5500 -s build --name reactApp -- run start

不知道是不是我没写正确，最终没有成功。然后在这个问题上折腾了一上午，后面我反映过来不能在这么下去，因此我到本地一个前端群里请教了一些同行，其中一位建议我使用nohup，但nohup我不是很了解；另一位给了我一段代码

module.exports = { 
    apps: [{ 
        name: "app", 
        script: "/usr/bin/npm", 
        args: 'run start', 
        cwd: '/home/nuxtapp' 
    }] 
}

意思就是在根目录建一个文件包含这段代码，然后用pm2去启动这个文件，我尝试后任然没有解决。前前后后看了很多网上的文章，大家遇到类似的问题很少，基本都用第一种方式就解决了。但是我还是想试试第二种，前端的问题就在前端解决。就在我以为要暂时搁置这个问题的时候，无意间打开了package.json文件，看到了script这里，不知道是不是灵感突然来了，看了自带的命令后，我决定尝试添加一个新的命令来代替serve执行：

结果，就这么成功了，也许熟悉的人会笑话这时个很简单的问题（丢人了）。但是经过我的折腾最终解决了这个问题，很高兴，不是吗？