Deploy your Create React App with Docker and Nginx
This is not okay, the website is static but the user doesn’t need to know.
Nginx to the Rescue
We will now need to create a nginx configuration for our server. The reason to choose nginx over node is mostly because it has been proven to be faster for static assets but you can totally do this with node.
A configuration file for nginx is a nginx.conf file so let’s start by creating that file and start coding it:
This is a pretty standard configuration for nginx and we tell it where to show our files and what the cache expiration date is. There is also some helpers for 404 and logs.
We don’t enable gzip here but for an example with it you can look here.
Now that we have our nginx config we can now create our Dockerfile and we will start by stating what is the base image we will be using:
After this we need to tell docker what it needs to run our app and in this case we need to do three things:
- Copy the build folder over to /var/www
- Copy the nginx.conf to it’s folder in /etc/nginx/
- Expose the port 80 to the public since that is the one we are using in the nginx config
Details on how to do this are below:
FROM nginx:1.15.2-alpine COPY ./build /var/www COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80
Now to finish our Dockerfile we need to tell it what command to run and for that we will the nginx cli and pass it as the entrypoint in our Dockerfile:
FROM nginx:1.15.2-alpine COPY ./build /var/www COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 ENTRYPOINT ["nginx","-g","daemon off;"]
As you can see we run nginx with -g daemon off; so that nginx stays in the foreground so that Docker can track the process properly (otherwise your container will stop immediately after starting).
You can now build and tag this image with:
docker build --rm -f Dockerfile -t rick-morty-random-episode:latest .
And then run it with:
docker run --rm -d -p 80:80 rick-morty-random-episode:latest
If you use now you can just deploy this as it is and now will build and run the image on their own servers.
We now have static routes on our static projects! If someone hits any route on your webapp this will be redirected to index.html and your app will work flawlessly.
To develop custom web app using React.js, please visit our technology page.