快捷導(dǎo)航

Docker使用Nginx一個端口啟動多個前端項目

更新時間：2025年10月27日 08:22:57 作者：cg_ssh

本文介紹了使用Docker Compose部署Nginx服務(wù)的詳細(xì)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.pull image

docker pull nginx

2.創(chuàng)建docker-compose

services:
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "1234:80"
      - "1235:443"
    volumes:
      - ./conf:/etc/nginx/conf.d
      - ./html:/usr/share/nginx/html
      - ./logs:/var/log/nginx
    restart: unless-stopped

3.目錄掛載準(zhǔn)備

目錄結(jié)構(gòu)如下：

conf/
├── default.conf    #nginx配置文件
html/
├── app1/           # 應(yīng)用1
│   ├── index.html
│   └── ...
├── app2/           # 應(yīng)用2
│   ├── index.html
│   └── ...
├── app3/           # 應(yīng)用3
│   ├── index.html
│   └── ...
└── index.html      # 默認(rèn)首頁
log/                # 日志目錄
docker-compose.yml  # docker-compose 配置信息

4.創(chuàng)建 default.conf 監(jiān)聽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 預(yù)檢請求
    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 后端服務(wù)配置
    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 后端服務(wù)配置
    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;
}