docker安装nginx，部署多个前端项目在同一个server中去配置，设置后端接口转发

nginx_1">nginx配置文件示例

进入挂载的目录，我的是/docker/nginx/conf/conf.d/default.conf

server {listen       80;listen  [::]:80;server_name  localhost;client_max_body_size 100M;  # Adjust this size as needed# 处理 /ai_book 请求location /ai_book {alias /usr/share/nginx/html/ai_book/dist;  # 指向 /dist 目录index  index.html index.htm;try_files $uri $uri/ /index.html;  # 尝试找到文件，找不到回退到 /ai_book/index.html}# 处理 /gw/ 请求，指向 /docker/nginx/html/dist/gw 目录location /gw{alias  /usr/share/nginx/html/gw/dist;  # 指向 /usr/share/nginx/html/distindex  index.html index.htm;try_files $uri $uri/ /gw/index.html;  # 尝试找到文件，最终回退到 /gw/index.html}# Java 后端服务代理到 8083 端口
location /blog {proxy_pass http://192.168.1.118:8083/;  # 使用 私有ip 访问宿主机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;
}# 错误页面配置error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}
}=====================================================示例二===================================================================
server {listen 80;listen [::]:80;server_name localhost;client_max_body_size 100M;  # Adjust this size as needed# 官网静态页面 (默认主页)location / {root /usr/share/nginx/html/gw_web;index index.html index.htm;try_files $uri $uri/ /index.html;}# Java 后端服务（代理到9001端口）location /compute {proxy_pass http://172.19.400.108:9001/jiutuai/api1/;   # 反向代理到 Java 服务，记得结尾需要加上/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;}# Python 后端服务（代理到5000端口）location /tupu {proxy_pass http://localhost:5000;   # 反向代理到 Python 服务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;}# 知识图谱前端页面（5010端口对应的前端）location /kg {alias /usr/share/nginx/html/kg/dist;index index.html index.htm;try_files $uri $uri/ /kg/index.html;  # SPA 路由处理}# AI 书籍前端页面（9003端口对应的前端）location /ai_book {alias /usr/share/nginx/html/ai_book/dist;index index.html index.htm;try_files $uri $uri/ /ai_book/index.html;  # SPA 路由处理}# 错误页面配置error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}

注意

涉及到文件上传，在nginx的这个配置需要加上    
client_max_body_size 100M;  # Adjust this size as needed否则大文件上传可能会出问题在后端请求的时候，比如遇到文件或者图片转url的端口应该变为前端的端口，和部署的转发地址,也就是/compute
比如 前端端口是8081，后端端口是9001，返回给前端去访问的地址应该为下面这个 
http://xx.xx.xxx.xxx:8081/compute/file/upload

区别 alias 和 root

Nginx 配置中的 alias 指令，用于将请求的 URL 路径映射到服务器的文件系统目录。具体来说：

alias  /usr/share/nginx/html/gw/dist;  # 指向 /usr/share/nginx/html/gw/dist

这个配置的意思是，当 Nginx 收到匹配 /gw 路径的请求时，它会将请求的文件路径映射到 /usr/share/nginx/html/gw/dist 目录，而不是使用默认的根目录（root）。

root：root 指令会将匹配的 URL 路径直接附加到指定的根目录路径中。
alias：alias 会将整个 URL 路径替换为指定的路径。
举例说明
假设有以下 Nginx 配置：

location /gw {alias /usr/share/nginx/html/gw/dist;
}

当用户请求 http://example.com/gw/somefile.html 时，Nginx 会将 /gw/somefile.html 映射为文件系统中的 /usr/share/nginx/html/gw/dist/somefile.html，然后尝试从该目录返回文件 somefile.html。
与此相反，若你使用 root 指令：

location /gw {root /usr/share/nginx/html/gw;
}

当用户请求 http://example.com/gw/somefile.html 时，Nginx 会将其映射为 /usr/share/nginx/html/gw/gw/somefile.html，因为 root 是将路径 /gw 附加到根目录后，这样可能导致多重目录结构。

alias 示例

location /gw {alias /usr/share/nginx/html/gw/dist;
}

请求 http://example.com/gw/file.html
Nginx 会查找 /usr/share/nginx/html/gw/dist/file.html

root 示例

location /gw {root /usr/share/nginx/html/gw;
}

请求 http://example.com/gw/file.html
Nginx 会查找 /usr/share/nginx/html/gw/gw/file.html（路径多了一层 /gw）

总结

alias：完全替换路径。/gw/file.html 将映射为 /usr/share/nginx/html/gw/dist/file.html。
root：直接附加路径。/gw/file.html 会附加到根路径 /usr/share/nginx/html/gw/ 后，生成 /usr/share/nginx/html/gw/gw/file.html。
因此，使用 alias 可以更灵活地映射请求路径，而不会导致路径重复。