背景

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/;  # 由于这里一开始忘了加上“/”,导致405         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;     } 

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地址抽象成upstream         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;     }     ... 

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有两种日志，一种是每次都会记载的访问日志，一种是错误记载的错误日志，我们可以从配置中找到它们