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

 更新时间:2025年10月27日 08:22:57   作者:cg_ssh  
本文介绍了使用Docker Compose部署Nginx服务的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.pull image

docker pull nginx

2.创建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.目录挂载准备

目录结构如下:

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;
}

5.构建服务

在对应的目录(见3小节),执行构建命令:

docker-compose -p dockernginx up -d

6.Vue项目注意点(如果你徘徊在404的漩涡中请检查以下内容是否和配置路径匹配)

1.路由部分 base 属性

2.vue.config.js  publicPath

3.env.production  中 API_BASE_URL

说明:其中1、2对应 对应 location /${appName}/ (前端)       3 对应服务访问 location  /${API_BASE_URL }/ (后端)

到此这篇关于Docker使用Nginx一个端口启动多个前端项目的文章就介绍到这了,更多相关Docker Nginx端口启动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • CentOS 7.2 下安装 Docker 1.12.3 版的详细方法

    CentOS 7.2 下安装 Docker 1.12.3 版的详细方法

    这篇文章主要介绍了CentOS 7.2 安装 Docker 1.12.3 版的相关资料,本文分步骤给大家介绍了CentOS 7.2 下安装 Docker 1.12.3 版的详细方法,需要的朋友可以参考下
    2016-11-11
  • 使用docker compose搭建一个elk系统的方法

    使用docker compose搭建一个elk系统的方法

    这篇文章主要介绍了使用docker-compose搭建一个elk系统的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Docker数据卷挂载命令volume(-v)与mount的使用总结

    Docker数据卷挂载命令volume(-v)与mount的使用总结

    本文主要介绍了Docker数据卷挂载命令volume(-v)与mount的使用总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 解决docker启动失败Failed to start containerd container runtime

    解决docker启动失败Failed to start containerd container runtim

    这篇文章主要介绍了解决docker启动失败Failed to start containerd container runtime问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • docker下安装Nginx的方法

    docker下安装Nginx的方法

    这篇文章主要介绍了docker下安装Nginx的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • docker实现资源清理方式

    docker实现资源清理方式

    这篇文章主要介绍了docker实现资源清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • docker search 报错但 pull 正常的问题解析

    docker search 报错但 pull 正常的问题解析

    用户在Windows 11 WSL2 Ubuntu 20.04中使用docker search报错,但docker pull正常,建议通过docker pull直接获取镜像,如搜索mysql时指向特定地址,本文给大家介绍docker search 报错但 pull 正常的问题解析,感兴趣的朋友一起看看吧
    2025-07-07
  • docker 搭建 vulhub 靶场环境的详细过程

    docker 搭建 vulhub 靶场环境的详细过程

    Vulhub是一个基于docker和docker-compose的漏洞环境集合,进入对应目录并执行一条语句即可启动一个全新的漏洞环境,让漏洞复现变得更加简单,让安全研究者更加专注于漏洞原理本身,这篇文章给大家介绍docker 搭建 vulhub 靶场环境的过程,感兴趣的朋友一起看看吧
    2022-08-08
  • 解决vscode docker插件docker.socket权限问题

    解决vscode docker插件docker.socket权限问题

    本文给大家分享关于vscode docker插件docker.socket权限问题,文末给大家提到vscode中docker插件无法连接的问题及解决方案,需要的朋友参考下吧
    2021-06-06
  • docker system prune命令使用示例详解

    docker system prune命令使用示例详解

    docker system prune是一个用于清理Docker系统资源的命令,它用于删除未使用的数据(如未使用的镜像、容器、网络和存储卷)以释放磁盘空间,下面这篇文章主要给大家介绍了关于docker system prune命令使用示例的相关资料,需要的朋友可以参考下
    2024-04-04

最新评论