DevOps ~ Docker ~ Containerize React app - rohit120582sharma/Documentation GitHub Wiki

Dev environment

Create a "Dockerfile.dev" file to run in local machine

FROM node:14.4.0

WORKDIR /usr/src/app

COPY ./package*.json ./

RUN npm install

COPY ./ ./

CMD ["npm", "run", start"]

Create a "docker-compose.yml" file to build an image and start multiple containers

version: '3'
services:
	web:
		container_name: react-dev-app
		stdin_open: true
		build:
			context: .
			dockerfile: Dockerfile.dev
		ports:
			- '3000:3000'
		volumes:
			# don't try to map node_modules inside the container
			- /usr/src/app/node_modules
			# map current working directory in host machine to container
			- ./:/usr/src/app
		# for Windows to detect changes
		environment:
			- CHOKIDAR_USEPOLLING=true
	tests:
		container_name: react-test-app
		stdin_open: true
		build:
			context: .
			dockerfile: Dockerfile.dev
		volumes:
			- /usr/src/app/node_modules
			- ./:/usr/src/app
		# override the default command
		command: ["npm", "run", "test"]

Run the app

$ docker-compose up --build

Then you can hit http://localhost:3000 in your browser.


Prod environment

Create a "Dockerfile" file to run in the server

# prepare the container for building react app
FROM node:14.4.0

WORKDIR /usr/src/app

COPY ./package*.json ./

RUN npm install

COPY ./ ./

RUN npm run build


# prepare nginx
FROM nginx:1.16.0-alpine

COPY --from=0 /usr/src/app /usr/share/nginx/html

RUN rm /etc/nginx/conf.d/default.conf

COPY nginx/nginx.conf /etc/nginx/conf.d


# fire up nginx
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Run the app

$ docker build -t <some-image-name> .
$ docker run --name <some-container-name> -p 8080:80 <some-image-name>

Then you can hit http://localhost:8080 in your browser.

⚠️ **GitHub.com Fallback** ⚠️