通过 Docker 实现跨平台部署项目十分让人心动。就在这里简单整理一下自己操作过程吧

I.项目结构

Tree:

.
├── backend # 后端
│   ├── app # 应用目录
│   │   ├── app.py # 启动应用
│   │   ├── extention.py
│   │   ├── modules.py
│   ├── Dockerfile # 后端 Dockerfile
│   └── requirements.txt # pip
├── frontend # 前端
│   ├── Dockerfile # 前端 Dockerfile
│   ├── frontend # Vue 打包后的 dist 目录
│   │   ├── assets
│   │   │   └── ***.js
│   │   ├── index.html
│   │   └── vite.svg
│   └── nginx.conf # nginx 配置文件

---

后端 Dockerfile

FROM python:3.9-slim
WORKDIR /app/backend
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
COPY app /app/backend
CMD ["python", "app.py"]

---

前端 Dockerfile

FROM nginx:latest
COPY frontend /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

---

nginx.conf

由于我的应用通过 Session 存储信息，配置中 proxy_set_header Cookie $http_cookie; 保证了 Cookie 能正常传到后端。

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        rewrite ^/api(.*) $1 break;
        proxy_set_header Cookie $http_cookie;
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        proxy_pass http://backend-container:5000;
    }
}

II.构建项目 Docker

1.创建虚拟网络

docker network create mynetwork

e.g:

docker run --network=mynetwork --name frontend frontend_image

docker run --network=mynetwork --name backend backend_image

2.建立&运行容器

• 后端

docker build -t backend-image .
docker run -d --name backend-container --network=mynetwork backend-image

• 前端

docker build -t frontend-image .
docker run -d -p 80:80 --name frontend-container --network=mynetwork frontend-image

III.导出&它端导入运行

导出

# 导出前端镜像
docker save -o frontend-image.tar frontend-image

# 导出后端镜像
docker save -o backend-image.tar backend-image

导入

# 在目标环境中导入前端镜像
docker load -i frontend-image.tar

# 在目标环境中导入后端镜像
docker load -i backend-image.tar

运行

# 运行后端容器
docker run -d --name backend-container --network=mynetwork backend-image

# 运行前端容器，并将其连接到后端容器
docker run -d -p 80:80 --name frontend-container --network=mynetwork frontend-image

结语

重写看下来其实还是蛮简单的，但是自己在尝试创建的时候还是遇到了不少问题。例如--link命令没啥用，最后还是得用--network来把前后端放一起。

接下来还需要实现的应该是 SSL 证书了。nginx中应该问题不大。