Nginx and Docker Configuration

While i would literally consider myself a code ninja, i never thought of myself as DevOps Engineer until reality hit me recently. Being in a product development team with no DevOps person involved, i set out to explore the unknown and feared lands of DevOps Engineering. The requirements were as clear as day Create a Docker file that will create Docker images for the production.

‘I never Freeze’ being my recently found philosophy, i assigned myself the task then tried my luck to still see the light of day at the end of the Sprint. In this post i will be sharing how as a developer you can be able to host your react-js application in a production server using a multi-build docker file and Nginx.

Some of the things you need to understand before you start this tutorial are:

I did not have prior DevOps Knowledge.

The React application to be deployed is already created.

Nginx only serves files in Production.

The Dockerfile, docker-compose.yml and default.conf should be kept in the application root.

React applications are Single page applications and therefore all files are served from the index page and not necessarily physical pages.

Life is not as easy as you may imagine :)

To deploy the application to the production environment you need first to create a dockerfile. A dockerfile is basically the file that creates the container that will encapsulate your application and make it runnable on any unix environment.

Dockerfiles do not have any extensions and therefore creating them is as straight forward as day, The file has two build parts one where the application is copied to the working directory and all the dependencies are installed and the second process where the app generates the production build to be deployed to either the QA or production servers. Having a docker file like the above means that one already can create a container with the command

docker build -t somedockerimagename .

This will create a docker container from the existing dockerfile. To run a docker container we may require a docker compose file which is in charge of starting and stopping our created containers. The docker-compose.yml is a yaml file and therefore follows YAML configuration standards as shown below.

Once the docker-compose file is there you can simply run a command to launch your react application in the container. Walaah!! :

docker-compose up -d 

Production

One thing i might have skipped is that the production configuration is quite different for the local configuration. As a point to note React applications create virtual routes and not actual pages. Nginx however treats routes as pages and therefore it is easy to find the index.html/homepage running while all other routes are not. To solve the error in Nginx you need to override the settings in /etc/nginx/conf.d/default.conf. Adding a single line does the trick. To do this however one needs to create a default.conf file then move it to the /etc/nginx/conf.d/ directory when the docker container is created. The replacement to the default.conf file can be found here:

Incase you wondered if i was showing you how to be a DevOps Engineer, nope i was not, i was just showing you how things flow around the DevOps World. I know i have skipped quite a bit off stuff but i know you are bright enough to figure that out :).