快速本地调试打包项目：使用 Docker Compose 和 Nginx

当您准备将打包的项目部署到 Nginx 服务器之前，可以通过以下方法在本地进行快速且高效的调试。这种方法利用 Docker Compose 和 Nginx，确保您的部署过程更加顺畅和无忧。

特点

• 即时反馈：对代码的任何更改都可以立即在本地服务器上反映出来，使得调试过程更加直观和快速。
• 简化配置：使用简单的 Docker 和 Nginx 配置文件，轻松搭建和管理本地测试环境。
• 高度模拟生产环境：在本地环境中使用 Nginx 和 Docker，以更好地模拟生产环境，确保部署时的稳定性和可靠性。

通过遵循简单的步骤，您可以在本地环境中快速设置并测试您的项目，确保当部署到实际的生产环境时，一切运行顺利。

必要文件

要开始，您只需要在代码的根目录放入以下两个文件，然后运行 docker compose up 命令。

1. Docker Compose 配置文件 (docker-compose.yml)

   这个文件定义了如何在 Docker 容器中运行 Nginx。

   version: '3.7'
   
   services:
    web:
    image: registry.cn-beijing.aliyuncs.com/dockerhub_happen/nginx:stable-alpine # nginx:stable-alpine
    ports:
      - "88:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx-default.conf:/etc/nginx/conf.d/default.conf
    restart: unless-stopped

2. Nginx 配置文件 (nginx-default.conf)

   此配置确保您的静态文件被正确地从 Nginx 服务提供，可以根据自己的情况设置代理。

   server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
   
    location /bs {
        proxy_pass http://39.106.127.16:7001/; # 这里需要替换为实际项目的api
    }
   
   
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决页面刷新404问题
        add_header Cache-Control private; # 更新代码无需刷新
    }
   }

运行

1. 将上述两个文件放入您的项目根目录。
2. 在项目根目录运行 docker compose up 命令。
3. 访问 http://localhost:88 来查看和测试您的项目。

通过这种方式，您可以确保在项目部署到生产服务器之前，它在本地环境中运行正常。

高级

通过下面的方法，可以部署多个web，只需要把静态网页放入不同的目录中就可以了，例如dist、dist2，如果是纯静态的网页，conf也不需要改，用一个就行

version: '3.7'

services:
  web:
    image: registry.cn-beijing.aliyuncs.com/dockerhub_happen/nginx:stable-alpine # nginx:stable-alpine
    ports:
      - "88:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx-default.conf:/etc/nginx/conf.d/default.conf
    restart: unless-stopped

  web2:
    image: registry.cn-beijing.aliyuncs.com/dockerhub_happen/nginx:stable-alpine # nginx:stable-alpine
    ports:
      - "89:80"
    volumes:
      - ./dist2:/usr/share/nginx/html
      - ./nginx-default.conf:/etc/nginx/conf.d/default.conf
    restart: unless-stopped

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决页面刷新404问题
        add_header Cache-Control private; # 更新代码无需刷新
    }
}