How to dockerize a vuejs (frontend) app together with a (backend) flask api inside the same container?

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?

Answer

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.

Advertisement

Answer