Dockerizing a FastAPI backend with React Frontend - tips

Question

I am attempting to build a simple app with FastAPI and React. I have been advised by our engineering dept, that I should Dockerize it as one app instead of a front and back end...

I have the app functioning as I need without any issues, my current directory structure is.

.
├── README.md
├── backend
│   ├── Dockerfile
│   ├── Pipfile
│   ├── Pipfile.lock
│   └── main.py
└── frontend
    ├── Dockerfile
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── src
    │   ├── App.jsx
    │   ├── favicon.svg
    │   ├── index.css
    │   ├── logo.svg
    │   └── main.jsx
    ├── tailwind.config.js
    └── vite.config.js

I am a bit of a Docker noob and have only ever built an image for projects that don't arent split into a front and back end.

I have a .env file in each, only simple things like URLs or hosts.

I currently run the app, with the front end and backend separately as an example.

> ./frontend
> npm run dev

> ./backend
> uvicorn .... 

Can anyone give me tips /advice on how I can dockerize this as one?

Answer 1

As a good practice, one docker image should contain one process. Therefore you should dockerize them separatly (have one Dockerfile per app).

Then, you can add a docker-compose.yml file at the root of your project in order to link them together, it could look like that:

version: '3.3'

services:
  app:
    build:
      context: ./frontend/
      dockerfile: ./Dockerfile
    ports:
      - "127.0.0.1:80:80"

  backend:
    env_file:
      - backend/.env
    build:
      context: ./backend/
      dockerfile: ./Dockerfile
    ports:
      - "127.0.0.1:8000:80"

The backend would be running on http://localhost:8000 and the frontend on http://localhost:80

In order to start the docker-compose you can just type in your shell:

$> docker-compose up

This implies that you already have your Dockerfile for both apps. You can find many example online of different implementations of Dockerfile for the different technologies. For example :

• For ReactJS you can configure it like this
• For FastAPI Like that