Docker 使用uwsgi和nginx将Vue固定在烧瓶中

我想把我一直在做的客户机-服务器项目封装起来。 项目结构如下：

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

客户端是VueJs应用程序，服务器是Flask。 我知道我应该使用

npm run build

构建Vue应用程序，并“以某种方式”将dist文件夹内容复制到服务器静态和模板目录中。 此外，我想把服务器放在uwsgi和Nginx之后进行生产。 我遵循了本教程：

但它没有解决如何为静态Vue文件提供服务（在构建静态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"]

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

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

客户端文件：

# 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"]

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;
    }
}