在 Flask 中使用 uwsgi 和 nginx Dockerizing Vue

Question

我想容器化我一直在研究的客户端-服务器项目。
项目结构如下:

├── client
│   ├── dist
│   ├── node_modules
│   ├── public
│   └── src
├── nginx
└── server
    ├── __pycache__
    ├── env
    ├── static
    └── templates

客户端是一个 VueJs 应用程序，服务器是 Flask。
我知道我应该使用 npm run build 构建 Vue 应用程序并“以某种方式”将 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;"]

我想也许在容器之间使用共享卷是一个可能的解决方案，但不确定这是否是正确的方法。

任何帮助将不胜感激。

Answer 1

由于您使用的是 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;
    }
}