Classmate Wang's blog

深浅模式

本地打包，离线传输 ​

适用场景： 服务器配置较低（如 2核 2G），直接在服务器上执行 npm run build 或 pip install 容易导致内存溢出 (OOM) 宕机的场景。 核心思路： 本地电脑干苦力（构建打包） ➔ 离线传输 ➔ 服务器享清福（仅运行）。2核2G 的服务器硬件资源受限,可以完美绕过这个问题

  • 确保本地已安装 Docker Desktop。
  • 确保服务器已安装 1Panel 面板，且包含 Docker 环境。
  • 项目根目录下已配置好用于本地开发的 docker-compose.yml。

第一阶段：本地构建与导出 (Local Build & Export) ​

1. 在本地构建最新镜像 ​

在项目根目录下（包含源码和 docker-compose.yml 的位置），确保当前 Docker Context 为本地环境，然后执行构建：

PowerShell

# 强制重新构建前后端镜像
docker compose build --no-cache

2. 导出镜像为压缩包 ​

构建完成后，通过 docker images 查看生成的镜像名称，然后将它们打包成 .tar 文件。

PowerShell

# 语法：docker save -o [压缩包名称.tar] [镜像名1] [镜像名2]
docker save -o project-images.tar workflow-backend workflow-frontend

第二阶段：离线传输 (Transfer) ​

将生成的 .tar 文件上传至服务器的 /tmp 目录。

  • 方法 A（命令行工具）： 使用 SCP 命令直传。 PowerShell

    scp project-images.tar user@你的服务器IP:/tmp/

  • 方法 B（图形化面板）： 登录 1Panel 面板 ➔ 点击左侧【主机】➔【文件】➔ 进入 /tmp 目录 ➔ 点击上方【上传】按钮上传文件。

第三阶段：服务器加载镜像 (Load Images) ​

1. SSH 连接服务器并加载镜像 ​

在本地终端通过 SSH 直连服务器，或者将 Docker 切换到远程 Context，执行镜像导入命令：

Bash

# 进入服务器后执行
docker load -i /tmp/project-images.tar

2. 验证加载结果 ​

终端提示 Loaded image: xxx 后，运行以下命令确认服务器已经拥有了这两个镜像：

Bash

docker images

第四阶段：生产环境远程编排与启动 (双方案通用指南) ​

前提条件：

  1. 本地代码已经成功打包为镜像（如 workflow-backend 和 workflow-frontend）。
  2. 镜像已经通过 .tar 文件离线传输，并在服务器上通过 docker load 加载完毕。

核心逻辑： 生产环境的启动绝对不需要build（构建源码），而是直接引用已加载好的 image（成品镜像）。

方案一：1Panel 面板可视化编排（适合运维管理与直观监控） ​

此方案完全脱离本地命令行，直接在服务器端的可视化面板中完成配置与启动，非常适合后期维护和直观监控容器状态。

1. 准备生产环境 YAML 配置 ​

请复制以下专供生产环境使用的 docker-compose 内容。注意，这里去掉了所有的 build 指令。

YAML

services:
  # 后端服务
  backend:
    image: workflow-backend:latest  # 【核心】直接指定已加载的镜像名
    container_name: workflow-backend-prod
    environment:
      - HOST=0.0.0.0
      - PORT=8000
      - DEBUG=false
      # 数据库密码、API Key 等机密信息建议直接写在这里
    volumes:
      - temp_data:/app/tmp
    restart: unless-stopped
    networks:
      - app-network

  # 前端服务
  frontend:
    image: workflow-frontend:latest # 【核心】直接指定已加载的镜像名
    container_name: workflow-frontend-prod
    ports:
      - "8080:80"  # 【核心】左侧为暴露给 1Panel 反向代理使用的宿主机端口
    depends_on:
      - backend
    restart: unless-stopped
    networks:
      - app-network

volumes:
  temp_data:

networks:
  app-network:
    driver: bridge

2. 在 1Panel 中创建并启动 ​

  1. 登录 1Panel 面板。
  2. 依次点击左侧菜单：【容器】 ➔ 【编排】 ➔ 点击 【创建编排】。
  3. 名称：输入能够识别的项目名（例如 workflow-prod）。
  4. 内容：将上一步准备好的 YAML 代码完整粘贴到代码框中。
  5. 点击右下角的 【确认】。

🎉 结果： 1Panel 会瞬间读取配置并拉起容器。此时可在“容器”列表中看到它们健康运行，随后即可去“网站”配置反向代理和 HTTPS。

方案二：纯命令行“双配置文件”法（适合极客与敏捷全栈开发） ​

此方案是业界标准的“多环境管理”最佳实践。所有的配置文件都在本地进行版本控制（Git），无需登录任何服务器面板，只需在本地终端一键发号施令即可让服务器干活。

1. 在本地项目中建立双配置 ​

在你的项目根目录下，维护两份不同的 YAML 文件：

  • docker-compose.yml (本地开发专用)： 包含 build: context: .，用于本地测试和打包。
  • docker-compose.prod.yml (生产环境专用)： 在本地新建此文件，内容与【方案一】中提供的 YAML 代码完全一致（只包含 image，没有 build）。

2. 极速发版四步曲 (本地 PowerShell 执行) ​

以后每次代码有更新，只需在本地终端依次执行以下四个命令，即可完成丝滑上线：

PowerShell

# 1. 确保在本地环境，打出最新镜像
docker context use default
docker compose build --no-cache

# 2. 导出成品镜像并跨网直传服务器
docker save -o project-images.tar workflow-backend workflow-frontend
scp project-images.tar user@你的服务器IP:/tmp/

# 3. 切换上下文，遥控服务器加载新镜像
docker context use 你的远程上下文名称
docker load -i /tmp/project-images.tar

# 4. 👑 终极编排指令：遥控服务器按生产配置启动
docker compose -f docker-compose.prod.yml up -d

第五阶段：域名绑定与 HTTPS 配置 (Nginx Reverse Proxy) ​

1. 解析域名 ​

在阿里云/腾讯云控制台，将你的域名（如 app.yourdomain.com）的 A 记录解析到当前服务器的公网 IP。

2. 创建反向代理网站 ​

登录 1Panel 面板 ➔ 左侧【网站】➔【网站管理】➔【创建网站】➔ 选择【反向代理】。

  • 主域名：填写你的域名（app.yourdomain.com）。
  • 代 理 地 址：填写 [http://127.0.0.1:8080](http://127.0.0.1:8080) （这里的 8080 对应第四阶段前端映射出来的宿主机端口）。

3. 配置 SSL 证书 ​

网站创建成功后 ➔ 点击网站名称进入设置 ➔ 选择【HTTPS / SSL证书】选项卡 ➔ 申请 Let's Encrypt 证书 ➔ 勾选【开启 HTTPS 强制跳转】➔ 保存。

🎉 至此，全栈项目部署完成，可通过安全域名正式访问！