纯小白使用Linux云服务器部署React项目

1. 在云服务器上安装Nginx

这块基本没有什么坑，我是直接安装启动成功了，所以不做特殊说明。

运行yum install nginx会下载Nginx，中途可能会有安装依赖的情况，输入yes即可，在没有报错安装完成的情况下，运行systemctl start nginx启动Nginx，打开服务器Ip地址查看是否启动成功，能正常打开页面就是启动成功了。

2. 配置Nginx

这块因为我不熟悉，所以在往网上各种bd，以下就是我的踩坑过程，已疯

因为之前有过部署的经验，大概清楚流程，大概就是上传包到指定位置就行了，所以我还是按照之前的方式，连接服务器，上传包，上传包还遇到一个小插曲，我去翻之前的命令put /path /path，之前没有想过后面的/path是什么作用，就没在意过，现在知道了，前面的/path是本地文件的路径，后面的/path是上传到服务器的路径。但是我在上传的时候因为不清楚服务器的文件类型，所以没有写后面的/path，直接用的put /path也正是因为这个问题，导致我后面浪费了很多时间，后面再讲这个问题。
现在文件上传到服务器了，但是我又不知道文件上传到哪儿的，接着又是一顿翻找，发现如果在上传文件的时候如果没有指定put /path /path中第二个/path的话，文件是直接上传到你连接上服务器的那个文件夹中。
现在打的包也找到了，接下来就是该配置Nginx了，小小百度一下即可知道，要配置Nginx，就要找到Nginx的配置文件nginx.conf，接下来又是一顿百度，发现Nginx的配置文件默认是放在/etc/nginx目录下的，找到配置文件后，怎么打开呢，接着百度，百度到找到可以通过vim /etc/nginx/nginx.conf直接打开nginx.conf文件，打开后他的默认配置如下

js 复制代码

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
    # Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

上面就是默认的Nginx配置文件，在我的百度中，大家都说是直接修改这个文件，所以我也是照做了，顺便记录了一下编辑这个文件的命令：

js 复制代码

vim /etc/nginx/nginx.conf //打开需要编辑的文件
i //进入编辑模式
:wq //保存并退出
:w //保存
:q //直接退出，如果有更改会提示是否保存更改

现在打开文件了，也进行编辑了，开始编辑，对照网上的说法，对配置文件的修改其实比较简单，主要是修改以下配置

js 复制代码

listen //端口号
server_name //域名
root //也就是你打的包即dist的位置

修改的时候注意root的路径一定要写对，就是上传到服务器dist包文件所在的路径，可以先找到dist文件所在层级，pwd查看路径。

现在配置也修改了，我以为应该正常了啊，结果没想到直接不行，打开配置的ip+端口号就可以看到底配置成功没有，反正打不开就是没配置成功，所以我没配置成功，然后又是一顿胡乱配置，也就是修改端口号，域名，root路径，但是始终都不行，我看着这陷入了深深的沉思，网上都是这么说的直接修改nginx.conf就行了啊，我反复查看路径是否正确，但是确实是正确的，然后又是漫长的百度。

终于在我不断的百度翻找下，发现在打开的Nginx配置文件下有这么一句include /etc/nginx/conf.d/*.conf;，就是这句导致我直接配置的无效，这句说明他包含同级conf.d目录下的.conf文件，所以我们的配置文件得放在conf.d文件夹中，所幸conf.d文件夹就在/etc/nginx目录下，所以我们就直接进入conf.d文件夹中新建xxx.conf文件即可，还是同样通过vim编辑文件，但是在这个文件中配置就不需要像默认的配置文件中写那么多了，只需要配置server就可以了，所以我的这个配置文件就如下

js 复制代码

    server {
        listen       9999; //设置你的自己的端口号
        server_name  _; //设置自己的域名
        index index.html //索引文件
        root         /path; //dist的路径

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

重点来了，还记得我上传文件的时候没有指定put /path /path中第二个/path的位置嘛，所以他直接上传到我们连接服务器的位置，所以现在打开IP+端口还是访问不到，打开Nginx错误日志，再记录一下访问Nginx日志的命令

js 复制代码

cat /var/log/nginx/access.log //查看访问日志
cat /var/log/nginx/error.log //查看错误日志

我在打开错误日志后发现有访问权限不够和路由重定向的问题：

权限不够的问题，经过百度之后，看网上说把这个dist文件权限放开就行了，又经过一顿操作，去放开dist文件权限。结果当然还是不行的，又经过一顿沉思，发现有人说最好把dist文件放在/usr/share/nginx目录下可能才行，这样Nginx才能访问到，然后就是把dist移动到这个目录下，记录移动命令mv /path /path跟上传类似，前面的path代表现在dist的路径，后面的path代表要移动的路径，我们就直接移动过去了。

移动完成后，我想，那配置文件中的root路径也需要修改啊，所以我就打开配置文件vim /etc/nginx/conf.d/xxx.conf，注意我们打开的是自己在conf.d中新建的那个配置文件，打开之后就修改root路径，因为现在的dist文件已经移动到/usr/share/nginx目录下了，所以按照常理来说，root的路径应该写成/usr/share/nginx/dist才对，我也看了他的默认路径/usr/share/nginx/html目录下确实也存在跟dist文件下一样的index.html文件，所以我就把配置文件root的路径改成了/usr/share/nginx/dist，果然是不报权限不够的问题了，但是又报新的错：

经过查询这个问题是找不到索引文件，然后就又是一顿操作，怎么都不行，后来我索性把root路径改成了/usr/share/nginx，尝试一下还真可以了，但是这个我不清楚原因，反正不报这个错了，知道的大哥也可以在评论给我讲一下，谢谢。

最后是解决重定向循环的问题，在配置文件中加一个重定向配置就行了，最后我的这个配置文件就如下

js 复制代码

server {
    listen 9999;
    server_name _;

    root /usr/share/nginx/dist;
    index index.html;
    
     # Load configuration files for the default server block.
     include /etc/nginx/default.d/*.conf;

     error_page 404 /404.html;
        location = /404.html {
     }

     error_page 500 502 503 504 /50x.html;
        location = /50x.html {
     }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意把listen、server_name、root修改成自己的。

到这里Nginx的配置基本结束了，在后面就只需要把打包完的文件上传到/usr/share/nginx这个目录下就可以了。