当前位置：首页 > news >正文

Docker 中使用Nginx 一个端口启动多个前端项目

news 2025/10/25 6:52:48

1.pull image

docker pull nginx

2.创建docker-compose

services:nginx:image: nginx:latestcontainer_name: nginxports:- "1234:80"- "1235:443"volumes:- ./conf:/etc/nginx/conf.d- ./html:/usr/share/nginx/html- ./logs:/var/log/nginxrestart: unless-stopped

3.目录挂载准备

目录结构如下：

conf/
├── default.conf    #nginx配置文件
html/
├── app1/           # 应用1
│   ├── index.html
│   └── ...
├── app2/           # 应用2
│   ├── index.html
│   └── ...
├── app3/           # 应用3
│   ├── index.html
│   └── ...
└── index.html      # 默认首页
log/                # 日志目录
docker-compose.yml  # docker-compose 配置信息

4.创建 default.conf 监听80端口同时启动多个前端

server {listen       80;server_name  localhost;client_max_body_size 1000M;add_header X-Frame-Options SAMEORIGIN;# 全局 CORS 配置add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 处理 OPTIONS 预检请求if ($request_method = 'OPTIONS') {add_header Access-Control-Max-Age 1728000;add_header Content-Type 'text/plain; charset=utf-8';add_header Content-Length 0;return 204;}#-------------------------------------------------------------------------🚀# app1前端配置location /app1/ {alias /usr/share/nginx/html/app1/;index index.html index.htm;try_files $uri $uri/ /app1/index.html;}# app1 后端服务配置location /app1/api/ {proxy_pass http://www.sol_china.cn/app1/;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}#-------------------------------------------------------------------------🚀# app2前端配置location /app2/ {alias /usr/share/nginx/html/app2/;index index.html index.htm;try_files $uri $uri/ /app2/index.html;}# app1 后端服务配置location /app2/app-api/ {proxy_pass http://192.168.0.100:4567/;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}#-------------------------------------------------------------------------🚀# others server config....error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}access_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log;
}