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

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

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

Клиент — это приложение VueJs, а сервер — Flask. Я знаю, что мне нужно создать приложение Vue, используя npm run build, и «каким-то образом» скопировать содержимое папки dist в каталоги static и templates сервера. Вдобавок я хотел бы поставить сервер за 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;"]

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

См. также:  Как сделать клиентское приложение для Android с Flask для серверной части

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

Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Ben

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

    Чтобы обслуживать приложение Vue.js с помощью Nginx, вам нужно изменить 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;
        }
    }
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: