docker compose部署H5项目,使用nginx代理。

部署H5项目,使用nginx代理,并配置SSL证书

1.新建一个空文件夹project,将打包出的dist文件夹放入这个文件夹中。

2.在project文件夹下新建文件夹ssl,将下载的证书以及密钥放入其中。(我的证书certificate.crt和密钥private.key)

3.在project文件夹下新建nginx.conf文件(内容如下)

perl 复制代码
server {
    listen 80;
    server_name 你的域名;

    return 301 https://$host$request_uri;  # 将所有 HTTP 请求重定向到 HTTPS
}

server {
    listen 443 ssl;
    server_name 你的域名;

    # SSL 证书配置
    ssl_certificate /etc/nginx/ssl/certificate.crt;
    ssl_certificate_key /etc/nginx/ssl/private.key;


    # 强化 SSL 设置(可以根据需要调整)
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'xxxxxxxx';
    ssl_prefer_server_ciphers on;

    # 前端静态文件路由
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理配置(关键部分)
    location /api/ {
        # rewrite ^/api(/.*)$ $1 break;  # 去掉 /api 前缀
        proxy_pass http://你的服务器IP及端口;  # 将请求转发到后端 API
        proxy_set_header Host $host;  # 保留原始请求的 Host
        proxy_set_header X-Real-IP $remote_addr;  # 转发客户端 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 转发真实的客户端 IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 保留协议(http 或 https)
        proxy_redirect off;  # 不修改 Location 响应头
    }
}

4.在project文件夹下新建Dockerfile文件(内容如下)

bash 复制代码
# 使用轻量级Nginx镜像
FROM nginx:alpine

# 设置时区为 Asia/Shanghai
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone


# 删除默认配置文件(可选)
RUN rm /etc/nginx/conf.d/default.conf

# 复制静态文件到Nginx目录
COPY dist/ /usr/share/nginx/html

# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d

# 复制 SSL 证书和密钥
COPY ./ssl /etc/nginx/ssl

# 暴露80端口
EXPOSE 80 443

5.在project文件夹下新建docker-compose.yml文件(内容如下)

yaml 复制代码
version: '3.8'

services:
  h5-app:
    build:
      context: ./  # 构建上下文是当前目录
      dockerfile: Dockerfile  # Dockerfile 路径
    expose:
      - "80"
      - "443" 
    restart: always
    environment:
      TZ: Asia/Shanghai
    networks:
      - common-network

  nginx:
    image: nginx:alpine
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
      - ./ssl:/etc/nginx/ssl
    ports:
      - "80:80"
      - "443:443"  # 假设你已经配置了 SSL 证书
    depends_on:
      - h5-app  # 确保在 Nginx 启动之前,NestJS 服务已经启动
    environment:
      - TZ=Asia/Shanghai
    networks:
      - common-network

networks:
  common-network:
    driver: bridge

6.利用xftp等工具将project文件夹上传到你的服务器中,在project目录下执行docker compose up命令行即可完成部署。

7.docker compose down 该命令会停止由 docker-compose.yml 文件定义并通过 docker-compose up 启动的所有容器。在停止容器之后还会会默认移除这些容器。

8.docker rmi 要删除的镜像的名称或 ID 该命令删除指定的镜像。

相关推荐
我家媳妇儿萌哒哒1 分钟前
el-table fixed滚动条被遮挡导致滚动条无法拖动
前端·javascript·vue.js
青春_strive20 分钟前
HTML操作详解
前端·html
小华同学ai34 分钟前
1.3K star!VisActor团队开源神器,3秒生成商业级图表,程序员直呼真香!
前端·github
Mrzheng1681 小时前
前端或者后端通常用到数组使用方式
前端
木亦Sam1 小时前
JavaScript 事件循环机制深度解析:为何你的代码执行顺序和预期不同?
前端·javascript
best_virtuoso1 小时前
过滤器 二、过滤器详解
java·前端
yzzzz1 小时前
面试官:手搓promise
前端·javascript·面试
zl0_00_02 小时前
xss-lab
前端·网络·xss
爱上你家菜包2 小时前
Electron一小时快速上手
前端·javascript·electron
陈琦鹏2 小时前
Vue3+Vite开发Electron桌面端问题记录
前端·javascript·electron