React + Nginx 를 도커 이미지로 만들어서 배포하기

React + Nginx 를 도커 이미지로 만들어서 배포하기

1. React App 을 생성

npx create-react-app react-dockerizing

2. nginx.conf 생성

react-dockerizing 폴더 밑에 nginx 폴더를 만들고 nginx.conf 파일을 아래와 같이 생성해준다.

# react-dockerizing/nginx/nginx.conf

server {
    listen 80;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    location / {
        # root를 /usr/share/nginx/html 을 바라보게 했으므로(Dockerfile 참고)
        # 해당 경로 아래에 배포해주면 됨
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

80 포트에 / 경로로 들어오면 /usr/share/nginx/html 폴더에서 index.html 을 찾는다.

3. Dockerfile 생성

react-dockerizing 밑에 Dockerfile 을 아래와 같이 생성해준다.

# react-dockerizing/Dockerfile

# base image 설정(as build 로 완료된 파일을 밑에서 사용할 수 있다.)
FROM node:14-alpine as build

# 컨테이너 내부 작업 디렉토리 설정
WORKDIR /app

# app dependencies
# 컨테이너 내부로 package.json 파일들을 복사
COPY package*.json ./

# package.json 및 package-lock.json 파일에 명시된 의존성 패키지들을 설치
RUN npm install

# 호스트 머신의 현재 디렉토리 파일들을 컨테이너 내부로 전부 복사
COPY . .

# npm build
RUN npm run build

# prod environment
FROM nginx:stable-alpine

# 이전 빌드 단계에서 빌드한 결과물을 /usr/share/nginx/html 으로 복사한다.
COPY --from=build /app/build /usr/share/nginx/html

# 기본 nginx 설정 파일을 삭제한다. (custom 설정과 충돌 방지)
RUN rm /etc/nginx/conf.d/default.conf

# custom 설정파일을 컨테이너 내부로 복사한다.
COPY nginx/nginx.conf /etc/nginx/conf.d

# 컨테이너의 80번 포트를 열어준다.
EXPOSE 80

# nginx 서버를 실행하고 백그라운드로 동작하도록 한다.
CMD ["nginx", "-g", "daemon off;"]

4. Docker Image 생성

$ docker build --tag react-dockerizing:test .

생성된 Docker Image 확인

$ docker images

5. Docker Container 실행

$ docker run -d -p 3001:80 --name react-app react-dockerizing:test

• -d : 백그라운드 실행
• -p : 로컬에서 3001번 포트로 접속하면 컨테이너의 80번 포트로 포워딩
• --name : 컨테이너 이름 설정

실행중인 컨테이너 목록

$ docker ps -a

6. 접속

여기까지 잘 따라했다면 이제 웹 브라우저로 접속할 수 있다.

localhost:3001