前端项目快速部署到 Nginx 服务器 及 常见问题

😐知识点

1. 什么是 ? Nginx 是一个高性能的 http 服务器及反向代理服务器
2. Nginx 的特点？ 热部署；可以高并发连接；cpu、内存等资源消耗非常低；运行非常稳定；处理响应请求很快等
3. 应用场景？ http服务器。Nginx 是一个 http 服务可以独立提供 http 服务。可以做网页静态服务器。（本文重点） 虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。 反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用 nginx 做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。

🎉Nginx 上部署 Vue 项目：

Vue 前端项目在 build 打包后，会生成一个 dist 文件夹

1. 先将 dist 文件夹复制到 nginx 安装目录的 html 文件夹下
2. 修改 nginx 安装目录里 conf/nginx.conf 文件，三处： listen 8081; //前端服务启动后，访问用的端口 server_name localhost; //访问前端服务的IP root html/dist; //前端dist文件夹的绝对路径
3. 直接双击 nginx.exe，启动 nginx（一定不要多次点击！会创建多个nginx服务） 或者在 nginx 目录下 cmd 打开，start nginx 启动
4. 浏览器中输入：http://localhost:8081 会跳转到登录页面，即dist文件夹下的index.html

😭关闭 nginx 服务

nginx -s stop

此时关闭不彻底，任务管理器中仍有 nginx 服务运行，浏览器也还能访问 nginx

👌Win 正确彻底关闭nginx的所有服务

nginx -s stop 后发现任务管理器还有 nginx 服务，关闭不彻底时：

1. 查看 nginx 的进程占用情况 tasklist | find /i "nginx.exe" || exit
2. 关闭 nginx 的所有进程 taskkill /im nginx.exe /f

🤣Nginx关闭后，网页仍能访问（缓存问题）

如果需要在服务端解决缓存问题，可以往下看:

已确认关闭 Nginx，后台没有 Nginx 在运行，发现依旧能够访问网页。

确认为缓存问题（清除浏览器缓存后无法访问）

解决：nginx.conf 中的 location 中添加：

#设置禁止浏览器缓存，每次都从服务器请求
add_header Cache-Control no-cache;
add_header Pragma no-cache;
add_header Expires 0;

❤️参考

推荐~

🤞 感谢以上博客博主的知识输出