How to deploy create-react-app in Docker with docker-compose with Nginx. To dockerise the create-react-app please follow the steps below:

1. Create a Project folder

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

npx create-react-app web
cd web

4. Create a Dockerfile inside web folder

touch Dockerfile

5. Copy all the below content of the Dockerfile

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

cd ..
pwd will print /docker-compose-create-react-app

7. Create docker-compose.yml file

touch docker-compose.yml

8. Copy the following to the file

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

cd nginx
pwd will print /docker-compose-create-react-app/nginx

10. Create nginx.conf file

touch nginx.conf

11. Copy the following contents to the nginx.conf file

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

pwd will print /docker-compose-create-react-app/
docker-compose up

The post How to deploy create-react-app in Docker with docker-compose with NGINX appeared first on FreeWebMentor.