PM2部署React项目(Ubuntu服务器)

目录

项目部署

前期工作

PM2部署(nohup一直失败)

Nginx反向代理

项目部署

前期工作

首先可以用服务器新建立一个React项目，步骤如下

npm create-react-app 项目名称
cd 项目名称
npm run build
npm start

下面如果报错，该怎么修理怎么修理。例如：

nodejs版本问题，建议14版本（11版本过低无法运行）

端口3000或其他没有开放，用如下命令开放端口(没有直接npm install xxxxx -g)

sudo ufw allow <端口号>           例如3000

之后还要去阿里云的控制台 ，把端口再手动开放一下。

PM2部署(nohup一直失败)

首先安装pm2

npm install xxxxx -g

下面移动到标准的react项目目录下，执行如下命令：

pm2 start --name agv npm -- start
pm2 list
pm2 delete 项目名字

agv这是启动进程的名字，原博客和效果图如下链接所示

pm2 启动React项目 - 李悠然 - 博客园 (cnblogs.com)

我的成功截图如下：

另外的，有时候项目渲染的时间较长，如果看到title有变化，那就可以提前庆祝了

Nginx反向代理

首先，把你的域名解析到对应的服务器。（一般情况是，同一平台内的服务器对应多个域名）

解析实例如下：

我们解析的时候，@和www都要解析一次。这样浏览器输入和不输入www都可以访问到我们的网站。

之后用Nginx反向代理，把IP+端口和域名对应起来。其实，IP+端口可以访问到已经成功一大半了，Nginx反向代理的工作还是相对轻松的，代码如下（把他加在server层里面）：

    server {
    listen 80;
    server_name www.hengmengkeji.cn;
    proxy_ignore_client_abort on;
​
    location / {
        proxy_pass http://127.0.0.1:3000/;
        proxy_read_timeout 3200;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

• listen 80 是因为我们每次访问域名都是默认的80端口

• server_name 是我们解析到服务器的域名

• proxy_pass 后填写我们要代理的IP+

这样，我们就可以通过域名访问到自己的React项目啦！

我的成功截图（最终版）

祝你成功！