Ceci-Aguilera / django-react-nginx-mysql-docker

React, Django, MySQL with Docker

django-react-nginx-mysql-docker

There are 4 images on use: the MySQL image, the Nginx Image, the Django Image, and the React Image.

Content Table

• Installation
• Structure and Folders
• Environment Variables
• Web Server Config (Nginx)
• Django Config
• React Config

Installation

1. Clone the repo from GitHub and start containers:

   git clone <repo>
   cd <repo>
   cp simple_env_conf.env .env
   docker-compose build
   docker-compose up
   docker-compose run backend ./manage.py collectstatic
   docker-compose run backend ./manage.py migrate

2. (optional) To access React's project main page go to http://localhost/ while to go to Django Admin follow the link http://localhost/admin.

3. (optional) To create a super-user for Django run

   docker-compose run backend ./manage.py createsuperuser

Structure and Folders

• The mysql_data folder contains the data generated by MySQL Database.
• The Backend folder contains the Django dockerfile and the project is at Backend/django_backend.
• The Frontend folder contains the React dockerfile and the project is at Frontend/react_frontend.
• The Nginx folder contains the Nginx server configuration file and the dockerfile.

Environment Variables

• MYSQL_USER, MYSQL_PASSWORD, and MYSQL_DATABASE store the credentials of the database.
• MYSQL_DATA_DIR The directory to store MySQL data (currently mysql_data inside project root folder).
• HOST_MACHINE_X_PORT These variables store the default port for service X.

---

• The environment variables for the Django Project are at the Backend/django_backend/django_backend/settings/.env file.

Web Server Config (Nginx)

The server has been configured such that the Django Admin can be accessed when /admin is used in the Url, and the api_django_app (not created yet) can be accessed whenever /api is used. The rest points to React (except for the static files urls).

Django Config

The Django project has multiple settings.py files for the different environments: development, testing, production, ...; the current one in use is the dev.py (for the development stage). As the default config, the project uses a MySQL database already configured in the dev.py.

NOTE: There is no app created yet.

React Config

The React project has no custom configuration and has been set to the default settings.