How to dockerize a vuejs (frontend) app together with a (backend) flask api inside the same container?
Question:
I can successfully create and run backend flask api and the frontend vue app inside individual containers with the following codes:
### Running the flask API in the backend #########
FROM python:3.6-slim as production
WORKDIR /usr/src/app
COPY requirements.txt ./backend/
COPY application.py ./backend/
RUN pip install -r /usr/src/app/backend/requirements.txt
EXPOSE 5000
CMD ["python", "/usr/src/app/backend/application.py"]
###########################################################
### Running the main vue.js app as the frontend ######
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
#run the vue app & expose container port 8080 for the frontend
CMD [ "http-server", "dist" ]
EXPOSE 8080
###########################################################
But when I try combining them inside a single container, only the vue app is running on localhost:8080 but it cannot access the flask api output which I thought would be running locally inside the container on port 5000
### Running the flask API in the backend #########
FROM python:3.6-slim as production
WORKDIR /usr/src/app
COPY requirements.txt ./backend/
COPY application.py ./backend/
RUN pip install -r /usr/src/app/backend/requirements.txt
# EXPOSE 5000
CMD ["python", "/usr/src/app/backend/application.py"]
###########################################################
### Running the main vue.js app as the frontend ######
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
#run the vue app & expose container port 8080 for the frontend
CMD [ "http-server", "dist" ]
EXPOSE 8080
###########################################################
Wondering if there is a way to run the flask api inside the container without spinning a separate container?
Answers:
In a Dockerfile, the second CMD command will overwrite the previous one. Check this post to get more information on the topic.
In this case, a better approach would be to have two separate Dockerfiles (one for the backend and one for the frontend) and use Docker Compose to launch them simultaneously.
If you are already building the Vue files under dist via npm, have you considered just serving the dist files from your Flask server?
If you do so, you won’t need to run an extra process/container just to serve your Vue app.
I can successfully create and run backend flask api and the frontend vue app inside individual containers with the following codes:
### Running the flask API in the backend #########
FROM python:3.6-slim as production
WORKDIR /usr/src/app
COPY requirements.txt ./backend/
COPY application.py ./backend/
RUN pip install -r /usr/src/app/backend/requirements.txt
EXPOSE 5000
CMD ["python", "/usr/src/app/backend/application.py"]
###########################################################
### Running the main vue.js app as the frontend ######
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
#run the vue app & expose container port 8080 for the frontend
CMD [ "http-server", "dist" ]
EXPOSE 8080
###########################################################
But when I try combining them inside a single container, only the vue app is running on localhost:8080 but it cannot access the flask api output which I thought would be running locally inside the container on port 5000
### Running the flask API in the backend #########
FROM python:3.6-slim as production
WORKDIR /usr/src/app
COPY requirements.txt ./backend/
COPY application.py ./backend/
RUN pip install -r /usr/src/app/backend/requirements.txt
# EXPOSE 5000
CMD ["python", "/usr/src/app/backend/application.py"]
###########################################################
### Running the main vue.js app as the frontend ######
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
#run the vue app & expose container port 8080 for the frontend
CMD [ "http-server", "dist" ]
EXPOSE 8080
###########################################################
Wondering if there is a way to run the flask api inside the container without spinning a separate container?
In a Dockerfile, the second CMD command will overwrite the previous one. Check this post to get more information on the topic.
In this case, a better approach would be to have two separate Dockerfiles (one for the backend and one for the frontend) and use Docker Compose to launch them simultaneously.
If you are already building the Vue files under dist via npm, have you considered just serving the dist files from your Flask server?
If you do so, you won’t need to run an extra process/container just to serve your Vue app.