Nginx部署笔记

HaushoLin

已于 2024-01-10 10:55:11 修改

阅读量1k

点赞数 25

分类专栏：拓展文章标签： nginx 笔记运维前端 vue.js 后端

于 2024-01-05 17:29:13 首次发布

本文链接：https://blog.csdn.net/Steven_Son/article/details/135414494

版权

拓展专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细记录了如何在Windows上安装Nginx，部署Vue项目，包括解决前端路由刷新404问题、页面缓存问题，以及关闭Nginx后项目仍运行的处理方法。

摘要由CSDN通过智能技术生成

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

一、安装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";
		     }
        }

五、解决关闭后Nginx后，线上项目仍然在运行的问题

报错信息：nginx: [error] CreateFile() “F:\Allsoftware\nginx-1.22.1/logs/nginx.pid” failed (2: The system cannot find the file specified)
此报错信息分两种情况，任选其一即可。

情况一：我关闭刚刚启动的nginx后，线上项目还在运行，而且再次执行nginx -s stop出现了此报错信息。

分析原因：上次启动的nginx还没关闭，这次进来你又启动了一个新的nginx；所以你现在用nginx -s stop关闭的只能是最新的启动nginx，而无法用此命令关闭老的nginx进程。

解决方案：

1、查出所有nginx命令 tasklist /fi "imagename eq nginx.exe"

2、关闭指定的nginx taskkill -t -f /pid XXXXX

例如：taskkill -t -f /pid 12345

然后就返回以下信息，代表已成功关闭老的nginx。
成功: 已终止 PID XXXXX (属于 PID XXXXX 子进程)的进程。
成功: 已终止 PID XXXXX (属于 PID XXXXX 子进程)的进程。
成功: 已终止 PID XXXXX (属于 PID XXXXX 子进程)的进程。

3、全部关闭完，再次查看是否还有正在运行的nginx tasklist /fi "imagename eq nginx.exe

信息: 没有运行的任务匹配指定标准。

说明：代表已关闭所有nginx

4、重新启动nginx并查看所有nginx，就能看到现在只保留一个最新的nginx了。

start nginx 
tasklist /fi "imagename eq nginx.exe

情况二：

情景再现：执行nginx -s stop也出现这个报错信息。

分析原因：你已经将所有nginx进程关闭了，再执行nginx -s stop自然没有可关闭的nginx进程了。

解决方案：重新启动nginx即可。 star nginx

六、后话

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

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

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