docker - 使用 uwsgi 和 nginx 在 Flask 中对 Vue 进行 Dockerizing
问题描述
我想将我一直在从事的客户端-服务器项目容器化。项目结构如下:
├── client
│ ├── dist
│ ├── node_modules
│ ├── public
│ └── src
├── nginx
└── server
├── __pycache__
├── env
├── static
└── templates
客户端是 VueJs 应用程序,服务器是 Flask。我知道我应该使用构建 Vue 应用程序npm run build
并将 dist 文件夹内容“以某种方式”复制到服务器静态和模板目录中。另外我想把服务器放在 uwsgi 和 Nginx 后面进行生产。我遵循了本教程:
https://pythonise.com/series/learning-flask/building-a-flask-app-with-docker-compose
但它没有解决如何提供静态 Vue 文件(在它们被构建之后)。我确实喜欢使用 docker-compose 的方法(如教程建议的那样),所以我遵循了它,现在我在根目录中有一个 docker-compose.yml 和 2 个 Dockerfile(用于客户端和服务器)
docker-compose.yml 内容为:
version: "3.7"
services:
flask:
build: ./server
container_name: flask
restart: always
expose:
- 8080
nginx:
build: ./client
container_name: nginx
restart: always
ports:
- "80:80"
服务器 Dockerfile:
# Use the Python3.7.2 image
FROM python:3.7.2-stretch
# Set the working directory to /app
WORKDIR /app
# Copy the current directory contents into the container at /app
ADD . /app
# Install the dependencies
RUN pip install -r requirements.txt
# run the command to start uWSGI
CMD ["uwsgi", "app.ini"]
app.ini 内容:
uwsgi]
wsgi-file = app.py
callable = app
socket = :8080
processes = 4
threads = 2
master = true
chmod-socket = 660
vacuum = true
die-on-term = true
客户端 Dockerfile:
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
我认为也许在容器之间使用共享卷是一种可能的解决方案,但不确定这是否是正确的方法。
任何帮助将不胜感激。
解决方案
由于您使用的是 Vue.js,我假设您正在开发一个单页应用程序,其服务器(Flask)是一个 API 服务器。
要使用 Nginx 为 Vue.js 应用程序提供服务,您必须更改nginx.conf
而不是代理传递给 Flask,提供以下静态文件/usr/share/nginx/html
:
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
要使 Vue.js 应用程序可以访问 API 服务器,您可以代理传递一些前缀路径,例如/api
Flask:
server {
...
location /api/ {
include uwsgi_params;
uwsgi_pass flask:8080;
}
}
推荐阅读
- python - 检查了非数字值但类型错误:'float'和'str'的实例之间不支持'<'?
- android - 如果 Activity 进入 PictureInPicture 模式,则不会调用 onActivityResult
- javascript - tsx 文件(TypeScript JSX):调试?
- r - 在R中绘制来自csv文件的数据
- c# - 无法将 WS-Security 标头添加到从 Web 参考构建的请求
- javascript - 如何在 mongoose 中查询 ObjectIds 数组?
- c++ - 你能解释一下这个语法吗:ros::Rate loop_rate(10);
- ssms - system.xml 中的 SSMS 无效字符
- selenium - 找不到满足要求 geckodriver==0.24.0 的版本(来自 -r /app/requirements.txt(第 4 行))错误与 Selenium Geckodriver
- python - 如何确定keras中的输入形状?