从0-1超详细教你实现前端代码nginx部署全流程

说明

• 本文旨在使用最简单快速的办法，解决前端静态资源部署需求。
• 公司平时使用 tomcat 部署静态资源比较多，今年三月份我买了一个服务器，一直忙着加班还没开始用，今天刚好拿来用一下咯：

前提

你要有一个服务器哟~~
购买后打开就像这个下面这个样子

步骤一：链接服务器

1. 找到公网IP
   
2. 修改密码
   
3. 下载FinalShell，安装打开
   
4. 打开FinalShell
   
   
   名称可以随意填写哦~~ 自己起个服务器的名字，方便以后链接使用。
   
5. 双击打开，链接成功
   
   

步骤二：安装Nginx

1. 下载nginx压缩包；
   点我下载nginx
   
   
2. 找到需要安装的路径，把刚刚下载的压缩包拖进去；
   
   

3. 解压文件，刷新目录

 tar -zxvf nginx-1.18.0.tar.gz

4. 安装依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

5. 进入目录，执行命令

cd nginx-1.18.0
 
./configure
 
make install

6.配置nginx.conf
此项可以根据需求进行操作，也可以不配置，使用默认端口号.

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

按住下箭头，往下寻找端口号，修改端口号

Linux下编辑文件并保存

1. cd到该文件的目录下
2. vi 要编辑的文件名，进入普通模式，可查看文件内容
3. 输入 i 进入编辑模式，开始编辑文本
4. 编辑之后，按ESC退出到普通模式。
5. 在普通模式下，输入 : 进入命令模式
6. 在命令模式下输入wq, 即可保存并退出

7.启动nginx

/usr/local/nginx/sbin/nginx -s reload

8.查看nginx进程是否启动

ps -ef | grep nginx

备注：如果启动不成功，查看的时候下面就只有一条
我们可以使用这个来启动
启动nginx
./usr/local/nginx/sbin/nginx
而不是使用reload

步骤三：测试

1. 进入服务器管理界面，配置安全组；
   
2. 测试界面访问
   
   

步骤四：部署其他项目

1. 进入服务器静态资源目录，拖动打包好的项目放入；
   目录地址：/usr/local/nginx/html

2. 访问

关于Nginx.conf 配置的一些说明

1.前端路由hash和history部署区别

路由功能：

1、记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存的（分享）时的状态）；
2、可是使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到ajax更新页面之前的状态，url也回到之前的状态）

hash模式和history模式实现功能：

1、改变url且不让浏览器向服务器发出请求；
2、监测url的变化；
3、截获url地址，并解析出需要的信息来匹配路由规则。

hash模式-url后带#

特点：
hash值变化不会导致浏览器向服务器发出请求，改变hash不会重新加载页面
hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制
hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了
hash的而传参是基于url的，如果要传递复杂的数据，会有体积的限制

history模式-url后不带#

特点：
history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
history———利用了HTML5 History Interface 中新增的pushState（）和replaceState（）方法
history不支持IE8以下版本

部署需求

根据不同需求进行不同打包配置以及部署,这里我以/usr/local/nginx/html这个部署路径为例：
1.一个nginx部署一个静态资源，还是部署多个静态资源？
2.我们打包后路由是要使用hash模式，还是history模式？

采用hash方式打包后，部署在nginx上

• 部署单项目，无需添加过多配置，直接把静态资源放在这里，我们就可以使用ip+端口号访问
  
• 部署多个项目在一个nginx，通过ip+端口号+文件夹名访问
  

备注（下面是遇到的一些问题记录）

• 关于hash路由多项目部署同一个服务器的链接访问问题
  以IIS为例，假如我们根目录里放了一份index.html,然后想要再加一个其他的测试项目
  第一步，index.html旁边新建一个 TEST 文件夹
  第二步，打开 TEST 文件夹，然后把新项目放进去
  第三步，访问 http://10.10.10.10:8088/TEST/#/
  注意点：TEST不要加到#后边，要不然会跳转到外层的那个index.html 哦~~
  如果觉得麻烦，就可以全部使用文件夹框起来，所有项目都要加上一个文件夹名字，可以避免这个问题.

采用history方式打包（通俗来说就是你的网址后面不带#）

• 这里需要进行nginx的配置

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

• try_files 试着去访问一下当前浏览所请求的页面
• $uri 当前请求的路径 如果找到就返回
• $uri/ 去找当前请求的路径,去找下面的文件，如果找到了就返回
• /index.html 保底方案：如果上面两个都没有找到就直接返回 index.html
• root 指定了 / 对应的单页静态资源目录
  

2.nginx代理无法上传大于1M文件

• 在proxy_pass的location添加下面2行解决。

client_max_body_size  512m;

client_body_buffer_size 10m;

3.location匹配规则

1. location ~ url {…}的优先级高于location url {…}。【局部匹配情况下】

2. location ~ url {…}是正则匹配，只要url满足正则规则，就会进入相关匹配段。

3. location url {…}是起始匹配，只要url的起始部分和location中指定的url匹配，就会进入相关的匹配段。【注意，这个no modifier的规则，url不支持正则表达】

结语

本教程旨在快速完成项目部署，其他配置项问题没有列举出来哦…后期有空会增加配置文章哟~~
欢迎大家指出文章需要改正之处~
如果有更好的方法，欢迎大家提出来，共同进步哟~~