Докеризация Vue в колбе с использованием uwsgi и nginx
Я бы хотел контейнеризировать клиент-серверный проект, над которым я работал. Структура проекта выглядит следующим образом:
├── client
│ ├── dist
│ ├── node_modules
│ ├── public
│ └── src
├── nginx
└── server
├── __pycache__
├── env
├── static
└── templates
Клиент-это приложение VueJs, а сервер-Flask.
Я знаю, что должен построить приложение Vue с помощью npm run buildи "каким-то образом" скопировать содержимое папки dist в каталоги статических и шаблонов сервера.
Кроме того, я хотел бы поставить сервер позади uwsgi и Nginx для производства.
Я следовал этому учебнику:
https://pythonise.com/series/learning-flask/building-a-flask-app-with-docker-compose
но это не касается того, как обслуживать статические файлы Vue (после того, как они были построены). Мне очень понравился подход использования docker-compose (как предлагалось в учебнике), поэтому я последовал ему, и теперь у меня есть docker-compose.yml в корневом каталоге и 2 Dockerfile (для клиента и сервера)
Докер-сочинитель.содержание 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"
Файл настройки сервера:
# 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"]
апп.содержимое 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;"]
Я подумал, что, возможно, использование общего объема между контейнерами-это возможное решение, но не был точно уверен, что это правильный путь.
Любая помощь будет Вам очень признательна.
Ответы - Докеризация Vue в колбе с использованием uwsgi и nginx / Dockerizing Vue in Flask using uwsgi and nginx
06.01.2020 11:28:50
Так как вы используете Vue.js я бы предположил, что вы разрабатываете одностраничное приложение, сервер которого (Flask) является сервером API.
Чтобы служить вю.JS приложение, использующее Nginx, вы должны изменить nginx.confвместо proxy pass to Flask, обслуживает статические файлы, которые являются /usr/share/nginx/html:
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
Чтобы сделать вю.приложение js может получить доступ к серверу API, который вы можете передать через прокси для некоторого префиксного пути, такого как /apito Flask:
server {
...
location /api/ {
include uwsgi_params;
uwsgi_pass flask:8080;
}
}