2023/06/27 12:36
265
通过 Docker 实现跨平台部署项目十分让人心动。就在这里简单整理一下自己操作过程吧
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;
}
}
docker network create mynetwork
e.g:
docker run --network=mynetwork --name frontend frontend_image
docker run --network=mynetwork --name backend backend_image
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
导出
# 导出前端镜像
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中应该问题不大。