背景
Nginx是本人学习的一类中间件，上次完成了vue的搭建，所以顺便把项目加入Nginx吧
1. 镜像拉取与测试
查询dockerHub，选择最新最稳定的版本
docker pull nginx:stable-perl
执行下载
docker run -d --name mynginx -p 8080:80 -v D:\IMAGE\nginx:/etc/nginx nginx:stable-perl
尝试运行，成功
2. 静态配置部署
前端通过npm run insatll完成下载，然后将Nginx的root指向编译出来的dist文件
还需要更新一下docker指令，docker run --name mynginx -p 80:80 -v D:\IMAGE\nginx\etc:/etc/nginx -v D:\IMAGE\nginx\var:/var/www/print nginx:stable-perl，这样就把配置和静态文件分开挂载了
配置如下
server {listen 80;listen [::]:80;server_name localhost;root /var/www/print/dist;location / {try_files $uri $uri/ /index.html;}
}
bug 前端拒绝访问
问题在于vue不识别除了localhost以外所有访问源，甚至包括127.0.0.1
解决方案：vue.config.js的defineConfig对象直接加上
server: {host: '0.0.0.0', // 绑定到所有网络接口port: 5173, // 确保端口号与应用程序一致},
3.动态配置
完成了前端的配置，还需要将前端对后端的访问改为对Nginx的访问，从而完成Nginx的动静配置
axios.post("http://" + global_ip + "/search", ...
改为
axios.post("/api/search", ...
直接localhost访问，并且添加统一路径让Nginx完成识别转发
Nginx添加配置
location /api/ {proxy_pass http://192.168.96.200:8080/; # 后端 API 服务的地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
bug 405
这个响应码是方法不被后端识别，往往是url配置问题
检查一下nginx，修改配置信息
location /api/ {proxy_pass http://192.168.96.200:8080/; # 由于这里一开始忘了加上“/”,导致405proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
4. 动态负载
动态配置最大的特点就在于它的负载均衡，所以还是需要配置一下
# 由这里指定负载均衡地址
upstream backend {server 192.168.96.200:8080;server 192.168.96.210:8080;
}server {listen 80;listen [::]:80;server_name localhost;root /var/www/print/dist;location /api/ {proxy_pass http://backend/; # 将ip地址抽象成upstreamproxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}...
tip1:前端部署方法
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
source ~/.bashrc
nvm install 20.16.0
nvm use 20.16.0
tip2:配置查找
默认路径为/etc/nginx/
里面有一个文件nginx.conf是主文件
主要分为了两种类型，一种是stream，一种是http
除此之外，可以通过include将http和stream的更多配置放到其它文件
http {
include /etc/nginx/conf.d/*.conf;
}
Nginx有两种日志，一种是每次都会记载的访问日志，一种是错误记载的错误日志，我们可以从配置中找到它们
