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 该命令删除指定的镜像。

相关推荐
YongGit16 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试