Nginx部署笔记

2024-01-07 20:53:18

记录Nginx部署Vue项目的流程,以及部署后前端出现问题的解决方案。

目录

一、安装nginx
二、部署流程
三、解决前端路由history模式刷新页面404的问题
四、Nginx解决前端项目打包缓存问题
五、后话

一、安装nginx

http://nginx.org/ ,找到页面右下角的download,例如选nginx-1.22.1,点击下载,解压放到你心仪的盘符文件夹中。

二、部署流程

Nginx根目录重要文件说明

conf:里面有配置文件nginx.conf

html:放打包好的Vue项目,即前端dist包。
将前端打包的dist文件夹复制进来,dist重命名为前端项目的英文名称

nginx.exe:nginx启动项

如何进入命令行终端去敲命令

任选其一即可

1、按Win + R,输入cmd,回车

2、在Nginx根目录url中,清空所有,输入cmd,回车

3、在Nginx根目录按住Shift + 鼠标右键,点击 在此处选择Powershell 窗口

用文本打开,修改部署访问路径

文件路径:nginx-1.22.1\conf\nginx.conf

修改location对象的 root html/项目名称 例如 html/vitelearn;

 server {
        listen       9900; 
        # 自定义端口号,找没有被占用的。怎么查看端口是否已被占用,请看下面Windows命令
        
      location / {
            root   html/vitelearn; # 对应nginx-1.22.1\html\项目名称 
        }
 }

Nginx.conf 完整代码如下

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
    gzip  on;
    gzip_min_length  1k;          #最小压缩大小
    gzip_buffers     4 16k;       #压缩缓冲区
    gzip_http_version 1.0;        #压缩版本
    gzip_comp_level 2;            #压缩等级
    gzip_types   text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss font/ttf font/otf imagesvg+xml;#压缩类型
    
    server {
        listen       9900;
    
        location / {
            root   html/vitelearn;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    
        #error_page  404              /404.html;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
Window命令

不知道怎么进命令行终端,请看上面 如何进入命令行终端去敲命令

netstat -aon|findstr "XXX"   检查端口是否被占用   例如: netstat -aon|findstr "9900"
taskkill /f /t /im nginx.exe   杀死所有nginx服务进程(其中包括端口) 
Nginx命令
每次打前端dist包,先停止再重启
nginx  -s stop  停止
start nginx  启动

nginx -s reload  重载
补充说明:前端dist包没变动,只修改了nginx配置,此时需要重新加载最新的nginx配置

三、解决前端路由history模式刷新页面404的问题

方案1、前端路由模式mode为history

说明:即没#号的。需要在nginx添加一行代码,添加完保存。
nginx配置修改如下:

server {
    location / {
            root   html/vitelearn;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 加这一句
        }
}
两种情况(根据不同情况选择对应的方法,二选一即可):
1、如果前端dist包有变动,nginx配置也变动,需要停止并重启nginx
	nginx  -s stop  停止  
    start nginx  启动
2、如果前端dist包没变动,nginx配置有变动,执行nginx重载即可
	nginx -s reload

再次刷新部署后的页面就不会出现404错误了。

Vue2/Vue3不同版本的history设置如下

  • Vue2

在router/index.js 设置路由模式

export default new Router({
    routes:[....]
     mode: "history", 
});
  • Vue3

在router/index.ts,封装路由的页面,引入history方法

import { createWebHistory } from 'vue-router'  

const router = createRouter({
	history: createWebHistory(), 
	routes,
})
方案2、修改路由模式mode为hash 哈希

说明:它会在url多一个#,比较难看,但它不需要在nginx配置代码,同时它刷新页面不会报404.

Vue2/Vue3不同版本的hash设置如下

  • Vue2
export default new Router({
    routes:[....]
     mode: "hash", 
});
  • Vue3
import { createWebHashHistory } from 'vue-router'  

const router = createRouter({
	history: createWebHashHistory(), 
	routes,
})

四、Nginx解决项目重新打包后,但线上页面出现缓存的问题

用文本形式打开 nginx-1.22.1\conf\nginx.conf,在location中加入这个if判断。location的其他配置不需要删除

 server {
        location / {
        	if ($request_filename ~* .*\.(?:htm|html)$)  
		     {
		        add_header Cache-Control "no-store, no-cache";
		     }
        }

五、后话

做个笔记,方便下次忘了过来查阅。小伙伴们,如果你们学完一个东西或者很有心得,有空了可以将新学的知识点整理成自己的笔记,下次遇到就无需花这么多时间查阅,而是快速回顾,精准打击,逐一击破。

加油,慢慢点亮自己的技能树。😊

参考这位大佬的文章: https://www.cnblogs.com/Yan3399/p/17202859.html,感恩感谢这位大佬🙏。

文章来源:https://blog.csdn.net/Steven_Son/article/details/135414494
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。