Dockerizing Vue in Flask using uWSGI and nginx

huangapple go评论85阅读模式
英文:

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

huangapple
  • 本文由 发表于 2020年1月7日 01:21:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/59616348.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定