In this post, You will learn how to deploy create-react-app in Docker with docker-compose with NGINX as reverse-proxy.
To dockerise the create-react-app please follow the steps below:
1. Create a Project folder
1 2 | mkdir docker-compose-create-react-app cd docker-compose-create-react-app |
2. Install create-react-app Installation Instructions
3. Create a react.js project
1 2 | npx create-react-app web cd web |
4. Create a Dockerfile inside web folder
1 | touch Dockerfile |
5. Copy all the below content of the Dockerfile
1 2 3 4 5 6 7 8 9 10 11 12 13 | FROM node:8 as web-build #Setting the working directory as /app WORKDIR /app #Copying package.json to Docker Image COPY package.json /app #Installing all dependencies. RUN npm install # Running the dev server. CMD ["npm", "start"] |
6. Change directory to the parent folder
1 2 | cd .. pwd will print /docker-compose-create-react-app |
7. Create docker-compose.yml file
1 | touch docker-compose.yml |
8. Copy the following to the file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | version: '3' services: ################################ # Setup react js container ################################ web: build: ./web expose: - 3000 ports: - 3000:3000 volumes: - ./web:/app ################################ # Setup nginx load balancer ################################ nginx: image: nginx:1.13 # this will use the latest version of 1.13.x ports: - '80:80' # expose 80 on host and sent to 80 in container depends_on: - web volumes: - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro |
9. Change directory to the nginx folder
1 2 | cd nginx pwd will print /docker-compose-create-react-app/nginx |
10. Create nginx.conf file
1 | touch nginx.conf |
11. Copy the following contents to the nginx.conf file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | upstream client_LB { server web:3000; } server { listen 80; location / { proxy_pass http://client_LB; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Host $server_name; } } |
12. Execute docker-compose in root folder
1 2 | pwd will print /docker-compose-create-react-app/ docker-compose up |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
