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

相关推荐
weixin_431600449 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
kyriewen9 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程
IT_陈寒9 小时前
JavaScript类型转换把我坑惨了,这破玩意真该早点搞明白
前端·人工智能·后端
用户9385156350710 小时前
Type vs Interface:读完这篇就没有面试官能难倒你了
前端·面试·typescript
油丶酸萝卜别吃11 小时前
jquery-ajax.js 说明文档
前端·javascript·jquery
windliang11 小时前
Claude Code 源码分析(九):子 Agent 如何分叉、继续与回到父会话
前端·javascript·面试
柒和远方11 小时前
V063: TS 面试必考:interface 与 type 的四大差异,与 LLM Harness 的自动化择优
前端·javascript
半个落月11 小时前
React useRef 详解:DOM 引用、持久化值与 Worker 实例
前端·react.js
阿黎梨梨11 小时前
TypeScript 类型编程:从新手到 Harness 工程实践
前端
黄金决明子11 小时前
Vue3 + Vite 打包后打开空白?
前端