项目开发已经完成,需要部署到服务器了,,,像普通的React项目打包之后会生成一个build文件,nginx做常规配置即可,但是React ssr.打包完成之后生成的文件跟普通的不一样.我这边写一下我自己部署的操作步骤哦!给大家作为参考.我这边主要贴上nginx的配置.
查了挺多资料的,都是需要依赖nogdejs,,所以我怀疑这种ssr的项目不能做常规的nginx配置,以下是我的操作步骤:

安装nodejs

这个大家可以自行百度哦,我也有写这个操作步骤,大家也可以参考[我写的操作步骤](https://juejin.cn/post/7041095026427822117)哦

安装 nginx

这个操作步骤大家可以百度哦,我看着很多小伙伴的操作步骤写的很详细,我就不在贴步骤啦

发布项目源码包

我这边的源码结构如下:

```
    assets 
```
```
    components
```
```
    pages
```
```
    public
```
```
    services
```
```
    styles
```
```
    utils
```
```
    next.config.js
```
```
    package.json
```
```
    server.js
```

然后执行npm run build 之后,会生成一个 .next 文件,,,但是也是可以在next.config.js里面另外指定生成的文件包的:

module.exports = { distDir: 'build' }

这样指定一下只是为了方便看,,其实可以不用这么指定的,,,

现在开始上传代码包,比如代码需要传到服务器的/root/website,可以选择ftp上传文件,也可以使用linux的上传命令哦,这个我也有在前面的文章写操作步骤,大家可以参考哦

配置nginx.conf

### 这些是nginx默认的
worker_processes  1;
events {
    worker_connections  1024;
}

### 这里不用配置 index.html 的目录 和指定root目录哦
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;


    server {
	   listen  80;
        access_log      /usr/local/nginx/logs/access.log;
        error_log       /usr/local/nginx/logs/error.log;
        server_name 0.0.0.0;    // 这个是服务器的IP地址哦 
        
        # 主要是这里的哦,proxy_pass代理到项目启动的地址,项目启动的地址一般会有两个,一个是
        # http://ip:端口号,
        # 另一个是:localhost:端口号
        # 把localhost替换成127.0.0.1:端口号
       location / {
                proxy_pass http://127.0.0.1:8081;   // 这个地址不变的哦,端口要要跟nodejs启动时的一致哦
                proxy_connect_timeout 300;
                proxy_read_timeout 300;
                proxy_send_timeout 300;
        }      

        location /web/file {
                proxy_pass http://abcd.com/static/;
                proxy_connect_timeout 300;
                proxy_read_timeout 300;
                proxy_send_timeout 300;
        }
        

        location /api {
                proxy_pass http://abcd.com/api;
         }
          
      }
}

配置好之后启动nginx哦

安装nodejs的进程守护

以上操作步骤完成之后,安装pm2,,,大家可以自行百度pm2的相关资料哦,,我这边贴我的操作步骤.

npm install pm2 -g # 安装
pm2 stop all # 停止PM2列表中所有的进程
pm2 stop 0 # 停止PM2列表中进程为0的进程

安装好之后,回到项目目录,执行

pm2 start npm -- run build

这样就把这个进程保持住了哦!!!!!

哦耶,完成~~~~~~~~~~~~~~ 感觉写的有点白话文,,欢迎小伙伴批评指正哦,

React ssr 项目部署