Докеризация Vue в Flask с использованием uwsgi и nginx

Question

Я бы хотел заключить контейнер клиент-серверный проект, над которым я работал. Структура проекта следующая:

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

Клиент - приложение VueJs, а сервер - Flask. Я знаю, что должен создать приложение Vue, используя npm run build и "каким-то образом" скопировать содержимое папки dist в каталог stati c сервера и шаблонов. Кроме того, я хотел бы поставить сервер позади uwsgi и Nginx для производства. Я следовал этому руководству:

https://pythonise.com/series/learning-flask/building-a-flask-app-with-docker-compose

, но в нем не рассматривается, как обслуживать файлы stati c Vue (после того, как они был построен). Мне понравился подход с использованием docker -compose (как было предложено в руководстве), поэтому я следовал ему, и теперь у меня есть docker -compose.yml в каталоге root и 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

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

Я подумал, что, возможно, использование общего объема между контейнерами является возможным решением, но не был уверен, точно ли это путь к go.

Любая помощь будет оценена.

Answer 1

Поскольку вы используете Vue. js, я бы предположил, что вы разрабатываете одностраничное приложение, сервер (Flask) которого является сервером API.

Для обслуживания Vue. Приложение js, использующее Nginx, вместо * пропуска прокси-сервера необходимо изменить nginx.conf на Flask, обслуживать файлы c, которые /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;
    }
}