win10前端项目部署到阿里云Nginx服务器（笔记）

首先，你要准备好阿里云的系统资源。以下是涉及的版本信息：

centos系统版本：centos 8.2

Nginx版本：1.14.1

1.打包成静态资源

将前端项目打包为静态资源
yarn build 或者 npm run build

 build成功后，静态资源如下：

2.把所有静态资文件源压缩为zip包

打包好上传比较快，当然也可以不打包，直接上传整个build文件夹内容。

3.将zip包上传到阿里云centos系统

• 首先，在win10系统上 下载并安装pscp工具 （参考文章）
• 然后centos系统设置密码，否则无法上传。先用命令 sudo su root 切换到root账号，用 passwd 命令 设置密码
• win10系统上 用管理员身份运行 PowerShell，输入以下命令，回车，输入centos系统密码，再回车即可

pscp C:\aaa.zip root@11.11.11.11:/home/

1.本地zip文件的绝对路径 C:\aaa.zip
2.root 表示centos系统账号
3.11.11.11.11 表示阿里云centos系统的 公网ip地址
4.远端指定存放文件的目录 /home/

上传成功后，在centos系统中 输入 ls /home 命令可看到 aaa.zip 文件。 

 4.解压zip文件

centos系统先安装压缩解压工具，输入以下命令：

yum install -y unzip zip

1.yum 是centos系统Shell软件包管理器
2.zip 用于压缩，unzip 用于解压
3.-y 表示安装过程提示选择，全部默认为"yes"

安装成功后，解压zip文件，输入以下命令：

unzip -d /home/aaa /home/aaa.zip

1./home/aaa.zip 表示要解压的源文件
2.-d /home/aaa 表示指定解压到/home/aaa目录下

解压成功后，输入 ls /home 命令，可看到一个 aaa 目录

如果要删除 没用的目录，可用命令 rm -rf /home/aaa 来删除，但一般要 sudo su root 之后才可删除。

注意 -rf 参数要慎用，其含义如下：

-r：表示删除该目录及其所有子目录

-f：表示不提示用户，直接删除​​​​​​​

5.安装并开启nginx

yum install nginx         // 安装nginx
systemctl enable nginx    // 开启nginx服务
systemctl start nginx     // 运行nginx

1.如果不是 root 账号，则需在命令前输入 sudo
2.systemctl 是用于管理系统的一个主命令

如果安装启动成功的话，在浏览器的地址栏，输入你centos系统所在的 公网ip，可以看到nginx的红色欢迎页面。 

6.修改nginx基本配置

 nginx配置之location规则：Nginx之location 匹配规则详解 - DoubleLi - 博客园

vim /etc/nginx/nginx.conf

1.vim是一个富文本编辑器
2.nginx配置文件路径：/etc/nginx/nginx.conf

出现以下提示，由于我们要修改配置，所以输入 e，进入文件内容：

 接着输入a（在光标所在字符后开始插入） 或 i（在光标所在字符前开始插入），进入输入模式

 

 由于我们用nginx做静态web服务器，那么接下来，修改几个地方：

1. 删掉或注释默认根目录
2. 添加根目录为 /home/aaa 
3. location 添加 try_files 防止页面刷新 返回404页面

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

1.$uri 表示当前url路径，不包括源和参数（比如 1.1.1.1/bbb?x=1，$uri 则为 /bbb）
2.try_files file file/ ... redirectFile; 
    中间的file可以有多个，以空格隔开；
    file 表示文件，file/ 表示目录；
    如果都匹配不到，则用最后的 redirectFile，返回给前端；

为何能防止 前端页面刷新返回404？

首先，这里指的一般是单页应用的前端页面，如 React、Vue 这类框架打包生成的项目。

由于单页应用的路由，只在地址栏做控制，并没有传递到后台nginx，所以没什么问题。
当你在某个详情页(假设url为/xxx/detail)按了F5刷新，这个时候/xxx/detail传到后台nginx了，
nginx在根目录下根本找不到，就会返回404页面。

通过try_files让nginx找不到的时候，还是返回根目录下的index.html文件，前端浏览器
刷新后发现还是index.html文件，就会继续使用前端的路由系统，显示当前路由页面。

修改完按 Esc键，输入 :wq 回车，保存并退出（w表示保存，q表示退出）。

输入以下命令，重启nginx：

systemctl restart nginx // 重启nginx（也可用 service nginx restart）

1.命令 service nginx restart 会被重定向为 systemctl restart nginx，
所以这2条命令的作用是一样的。

在浏览器的地址栏，输入你centos系统所在的 公网ip 就可访问你的项目了。

7.修改nginx监听端口

阿里云上的nginx改监听端口，有些要注意的细节，所以单独列出来讲。

首先，还是打开nginx配置文件，修改监听端口号，如下图：

修改完，systemctl restart nginx 重启 nginx，输入以下命令，查看是否修改成功：

netstat -tulpn | grep nginx

1.netstat 命令用于查看网络相关信息
2.-tulpn 查看所有运行中的服务的网络信息
3.grep 正则：grep一个文本搜索工具，根据后面的“正则”来过滤内容

整条指令的意思：查看所有运行中服务的网络信息，并过滤出只含 nginx 字段的结果

可以看到nginx监听的接口已经修改成功，如下图： 

但这样还是访问不了3000端口的，因为阿里云的防火墙默认是关闭3000端口的。

打开阿里云工作台，选择 防火墙 菜单，添加 3000端口，如下图：

 这步很重要，如果少了这步，就算用命令行开启了防火墙的3000端口，照样会无法访问。

一般配置完，就可以用你的 公网ip:3000 访问你的项目了。

当然，有时也可能不生效，还是访问不了。

这时，我们就要继续用命令行添加端口了（再强调一次哦，上一步 防火墙菜单添加3000端口 是不能省的）。

主要用到命令 firewall-cmd，阿里云的centos一般预装好了，如果没有则先安装，如下图：

yum install firewalld firewall-config //安装防火墙服务和管理工具
systemctl enable firewalld     //开启防火墙服务
systemctl start firewalld      //运行防火墙
systemctl status firewalld     //查看防火墙状态，running 表示运行中

1.firewall-cmd 是一个防火墙服务的管理工具
2.systemctl status firewalld 也可换成 firewall-cmd --state，后者显示的信息比较简化

 接下来，添加3000端口，重载防火墙配置，命令如下：

firewall-cmd --zone=public --add-port=3000/tcp --permanent //防火墙永久放开3000端口
firewall-cmd --reload       //重新加载防火墙配置（热更新，firewalld的特性）
firewall-cmd --list-ports   //查询防火墙开放的端口

1.--permanent 表示永久添加，否则重启防火墙就没了。
2.删除端口就用 --remove-port，其他一样。
3.firewall-cmd --complete-reload 也可以重新加载，只不过会断开连接，重新启动。

可以看到，端口3000已经开放，如下图 

到这里，用你的 公网ip:3000 就可以访问你的项目了。

当然，这里只用到了nginx做静态服务器的简单功能，还有nginx的 3大特性（反向代理，负载均衡，动静分离）没有尝试。