Dockerize your React, Django Rest Api Application and serve using nginx

  • Create a simple React App.
  • Create a Django app with Django Rest Framework.
  • Connect our Django app to MySQL DB.
  • Integrate our Frontend, Backend and DB with docker.
  • Finally, use nginx to serve our app.
  • Create a react app(e.g. ‘frontend’ in our case), in your root project folder:
$ npx create-react-app frontend
$ cd frontend
$ yarn start
your app will run on http://localhost:3000/
You will be welcomed with this screen.
  • Install pipenv on your mac using
$ brew install pipenv
  • Make sure you’ve got python and pip
$ python --version
$ pip --version
  • Create a directory backend
$ cd backend
  • Activate your virtual environment using
$ pipenv shell
  • If you need to exit you virtual environment, you can use
$ exit
  • Let’s install some packages that will help us get started, inside your virtual environment
$ pipenv install django
$ pipenv install djangorestframework
$ pipenv install gunicorn
  • Create a django project (e.g. ‘server’ in our case), inside your backend folder:
$ django-admin startproject server .$ python manage.py migrate  // to run migration$ python manage.py startapp core // to create a django app e.g. 'core'
  • Let’s confirm if everything works as expected
$ python manage.py runserveryour server will run on http://localhost:8000/
You will be welcomed with this screen.
  • Add django rest framework to InstalledApps in server/settings.py
INSTALLED_APPS = [
...
'rest_framework',
]
  • In core/views.py, add
from rest_framework.views import APIViewfrom rest_framework.response import Responseclass index(APIView):    def get(self, request, format=None):    return Response('Hello World!')
  • Create a new file core/urls.py and add
from django.urls import include, pathfrom . import viewsurlpatterns = [path("api/hello", views.index.as_view(), name="index"),]
  • In server/urls.py add
from django.urls import include, pathurlpatterns = [
...
path("", include("core.urls")),]
You will see django rest framework response.
  • Install django mysqlclient
pipenv install mysqlclient
  • In server/settings.py add
DATABASES = {"default": {"ENGINE": "django.db.backends.mysql","NAME": <your-db-name>,"USER": <user-name>,"PASSWORD": <password>,"HOST": db,"PORT": 3306,}}
  • Create a folder webserver in project root folder
  • Create a file for our client app and nginx, webserver/Dockerfile
webserver/Dockerfile
  • FROM — a dockerfile must begin with FROM, it tells docker which image we want to use for our container.
  • WORKDIR — sets our work directory inside docker container.
  • COPY — copies file from host to container workdir.
  • RUN — runs the command inside workdir.
  • Create nginx configuration file, webserver/default.conf
webserver/default.conf
  • Create Dockerfile for server, server/Dockerfile
server/Dockerfile
  • Add STATIC_URL and STATIC_ROOT in server/settings.py
STATIC_URL = "/staticfiles/"STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
server/entrypoint.sh
  • Now we will create docker-compose.yml in project root folder
docker-compose.yml
  • docker-compose.yml file is used to configure our services.
  • You can learn about various configuration options here.
  • Point to note here for our tutorial’s sake is that we are creating a volume named staticfiles which is being shared between backend and nginx service, this is how we will be able to access staticfiles for our backend inside our nginx container.
  • Finally, build and run our docker container
$ docker-compose up -d --build
  • -d — flag is used to run our container in background.
Our frontend will run http://0.0.0.0/
REST api — http://0.0.0.0/api/hello/
Django admin — http://0.0.0.0/admin/login/?next=/admin/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Parth Koshta

Parth Koshta

Senior Product Engineer @ UrbanPiper Technology Pvt. Ltd. I specialize in building websites and cross platform mobile apps and everything around it.