使用 uwsgi 和 nginx 在 Flask 中对 Vue 进行 Dockerizing答案

【问题标题】：Dockerizing Vue in Flask using uwsgi and nginx使用 uwsgi 和 nginx 在 Flask 中对 Vue 进行 Dockerizing
【发布时间】：2020-04-24 05:56:23
【问题描述】：

我想将我一直从事的客户端-服务器项目容器化。项目结构如下：

├── 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;"]

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

任何帮助将不胜感激。

【问题讨论】：

标签： docker vue.js nginx flask

【解决方案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;
    }
}

【讨论】：