部署dist包（nginx配置）

前端部署dist包也是需要掌握的东西，首选需要先掌握（至少了解以下知识点用法）及（前期准备软件）

需要有一个操作服务器的终端软件（推荐finashell）或者直接通过阿里云服务器官网进入终端。
需要了解linux基本用法，简单的命令。
需要掌握nginx的原理及配置方法，了解文件配置及反向代理。

1.打包dist包

config配置好后端的远程地址然后打包

2.配置服务器（阿里云例）

登录阿里云官网进入控制台，打开购买的服务器实例找到安全组配置，并点击配置规则，点击添加安全组规则。
手动添加你想加的端口（注意规则不要加高风险端口）可以加8081这种。
（请注意，后端服务器接口跟前端部署的项目端口是不一致的）。

阿里云服务器默认端口就算是80也需要从官网开启

3.打开finalsell连接服务器

Mac win 都推荐使用finalsell（官网）

1.新建链接配置ip及阿里云服务器用户名密码

2.进入服务器（显示连接成功）

4.nginx下载安装

1.下载nginx压缩包

第一种方式：离线下载，nginx官方所有版本（点击去下载）
第二方式：在线下载，直接通过wget命令下载，压缩包一般放在 /usr/local 目录下

arduino 复制代码

wget -c https://nginx.org/download/nginx-0.1.18.tar.gz
此版本有点老 可以换个自己喜欢的新版本

2. 配置nginx安装所需要的一些基本环境

r 复制代码

yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install gcc-c++
yum install -y openssl openssl-devel
(挨个执行就完事了）
注意：一般情况下都会默认安装， 为了确保后面出现各种各样的坑， 最后把这四个全部重新安装一遍，
第四个在使用 https 时，需要用到这个OpenSSL 库，后面再去安装比较麻烦，所以还是现在安装比较好。

3. 解压刚刚下载好的 nginx 压缩包

此时还是在目录 /usr/local 下

tar -zxvf nginx-0.1.18.tar.gz
此操作解压tar包
之后进入到 nginx-0.1.18 目录下

bash 复制代码

cd nginx-0.1.18

4. 编译安装nginx

go 复制代码

./configure --with-http_ssl_module
make
make install
依次执行命令（make命令详见linux官网）

当make过程中报错时

如： error: this statement may fall through [-Werror=implicit-fallthrough=] h ^= data[2] << 16;

此错误原因为将警告信息当成错误处理

解决方法：进入到nginx目录中，输入如下命令

sudo vim objs/Makefile

打开文件然后按键盘上的按键a进入编辑模式，将下图 -Werror 删除

然后按键盘左上角的esc键，之后输入:wq表示保存并退出。之后重新make编译就不会报错了！

依次执行之后在 /usr/local 目录下会多出一个 nginx 文件夹

5. 启动 nginx 服务

进入到 nginx目录下, 再进入到sbin目录下即，/usr/local/nginx/sbin

输入 ./nginx 启动 nginx 服务

拓展一些常用nginx常.用命令

js 复制代码

启动 nginx 服务： ./nginx
关闭 nginx 服务：./nginx -stop
重启 nginx 服务：./nginx -s reload (用得最多)
查看 nginx 进程：./ps aux|grep nginx
查看 nginx 运行状态：ps -ef | grep nginx

5.nginx尝试配置

nginx配置文件整体结构等学习可参考b站视频

输入以下命令打开nigix配置文件

vim nginx.conf

按键a进入编辑模式修改server 中 listen 端口（默认80）为你配置的端口

按键盘左上角的esc键，之后输入:wq表示保存并退出

之后打开你的服务器ip+端口的地址看到welcome to nginx默认页面表示成功

失败原因：

js 复制代码

防火墙未开启
阿里云不需要开防火墙，需要开启相应端口

6.上传dist包到指定目录

finalsell 使用 rz 命令或者傻瓜式点击按钮上传 dist.zip 到 nginx 目录下的 html 目录中；

rm -rf index.html 删除原有的默认html页面，保留50.html报错页面；

unzip dist.zip 解压dist文件, 进入到dist；

（关于为啥放到html目录中及其他linux命令请参考百度谷歌）

7.nginx配置部署项目

Cd 到 nginx/conf

vim 打开 nginx.conf文件将文件改为如下

修改完配置后保存（参考之前保存操作）

ini 复制代码

server {
        #此端口为配置端口（千万不要配置成后端接口端口）
        listen       8081; 
        server_name  localhost;

        #root为项目路径 index找该路径下的index页面

        location / {
            root   html/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # 默认报错页面
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

配置完之后重载nginx

Nginx -s reload

重载完之后打开ip + 端口成功打开项目页面

参考：可将nginx配置在环境变量可以在任意目录下使用nginx

vi /etc/profile exportPATH=$PATH:/usr/local/nginx/sbin source /etc/profile

8.nginx反向代理

打开项目后大概率发现我们项目的接口是用不了的

原因是因为nginx代理后走的接口会变成前端地址ip＋端口

这时候就需要反向代理将前端地址接口代理为后端接口地址

如下代码（简单反向代理）

参考代码配置完后大概率可以pin通后端接口（不行先检查下路径有没有问题）

ini 复制代码

server {  
    #此端口为配置端口（千万不要配置成后端接口端口）
        listen       8081; 
        server_name  localhost;

        #root为项目路径 index找该路径下的index页面

        location / {
            root   html/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # 默认报错页面
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # 反向代理操作 匹配对应接口路径 将路径代理为对应的后端接口路径
        location /api {  
            proxy_pass   http://127.0.0.1:8080;  
        }  
}

9.其他问题

部署中遇到的问题

1.页面刷新报nginx 404错误

需要再nginx/conf 文件更改conf文件

在intml的localhost配置中加入 try_files $uri $uri/ %uri/login /index.html;

如下代码

bash 复制代码

location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ %uri/login  /index.html;
        }

10.相关资料