英文:
Dockerizing Vue in Flask using uwsgi and nginx
问题
I'd like to containerize a client-server project I've been working on.
The project structure is as follows:
├── client
│ ├── dist
│ ├── node_modules
│ ├── public
│ └── src
├── nginx
└── server
├── __pycache__
├── env
├── static
└── templates
The client is a Vue.js app, and the server is Flask.
I know I should build the Vue app using npm run build
and somehow copy the dist
folder content into the server's static
and templates
directories.
In addition, I'd like to put the server behind uWSGI and Nginx for production.
I've followed this tutorial:
https://pythonise.com/series/learning-flask/building-a-flask-app-with-docker-compose
but it doesn't address how to serve the static Vue files (after they've been built).
I did like the approach of using docker-compose (as the tutorial suggested), so I've followed it, and now I have a docker-compose.yml
in the root directory and 2 Dockerfiles (for client and server).
The docker-compose.yml
content is:
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"
The server Dockerfile:
# Use the Python 3.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 content:
[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:
# build stage
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;"]
I thought maybe using a shared volume between containers is a possible solution, but I wasn't sure exactly if that's the way to go.
Any help will be greatly appreciated.
英文:
I'd like to containerise a client-server project I've been working on.
The project structure is as follows:
├── client
│   ├── dist
│   ├── node_modules
│   ├── public
│   └── src
├── nginx
└── server
├── __pycache__
├── env
├── static
└── templates
The client is a VueJs app and the server is Flask.
I know I should build the Vue app using npm run build
and "somehow" copy the dist folder content into the server static and templates directories.
In addition I'd like to put the server behind uwsgi and Nginx for production.
I've followed this tutorial:
https://pythonise.com/series/learning-flask/building-a-flask-app-with-docker-compose
but it doesn't address how to serve the static Vue files (after they've been built).
I did like the approach of using docker-compose (as the tutorial suggested) so I've followed it and now I have a docker-compose.yml in the root directory and 2 Dockerfile (for client and server)
The docker-compose.yml content is:
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"
The server 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 content:
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;"]
I thought maybe using shared volume between containers is a possible solution, but wasn't sure exactly if that's the way to go.
Any help will be greatly appreciated.
答案1
得分: 2
由于您正在使用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;
}
}
英文:
Since you are using Vue.js I would assume that you are developing a single page application which the server (Flask) is an API server.
To serve Vue.js application using Nginx, you have to change nginx.conf
instead of proxy pass to Flask, serve the static files which is /usr/share/nginx/html
:
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
To make Vue.js application can access API server you can proxy pass for some prefixed path such as /api
to Flask:
server {
...
location /api/ {
include uwsgi_params;
uwsgi_pass flask:8080;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论