[Docker] React 프로젝트를 Docker를 이용해서 배포하기

Docker를 이용해서 React 프로젝트를 배포해보려 한다.

먼저 AWS 계정이 있어야하고, 인스턴스가 있어야한다.

프로젝트가 ec2에 있는 상태라 가정(나는 git 설치 후 git pull로 받고, npm run build까지 해둔 상태)

 

지난번 Spring 프로젝트 배포와 비슷하지만 훨씬 간단하다.

 

1. ec2를 업데이트하고 프로젝트를 받기 위해 git을 설치 한다.

# ec2 업데이트
sudo yum update -y

# git 설치하기
sudo yum install git

 

 

2. 프로젝트 경로 중 package.json과 같은 경로에 Dockerfile을 생성해서 아래 코드를 넣어준다.

FROM node:16 as builder

# 작업 폴더를 만들고 npm 설치
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# 소스를 작업폴더로 복사하고 빌드
COPY . /usr/src/app
RUN npm run build

FROM nginx:latest
# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# 위에서 생성한 앱의 빌드산출물을 nginx의 샘플 앱이 사용하던 폴더로 이동
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 80포트 오픈하고 nginx 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

3. Dockerfile과 같은 경로에 conf/conf.d/default.conf 파일을 생성한다.

server {
    listen 80;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

 

 

4. 도커 설치

sudo yum install docker

 

- docker 실행

sudo systemctl start docker

 

- 실행 확인

systemctl status docker

 

- 권한 추가

sudo chmod 666 /var/run/docker.sock

 

 

5. 도커 이미지 만들기 (react와 nginx)

docker build -f Dockerfile -t [이미지명] .

#-f Dockerfile: 해당 파일을 기반으로 docker image를 생성한다.(안넣으면 기본값으로 Dockerfile을 찾아서 진행)
#-t [이미지명] : 생성할 이미지를 지정한다.

 

 

6. 실행

docker run -it -p 80:80 [이미지명]

 

 

7. aws 인스턴스의 ip로 접속하면 된다.

 

 

https://www.hanumoka.net/2020/04/27/docker-20200427-docker-react-nginx/

Docker를 이용해 React와 Nginx를 묶어서 이미지화 하고 컨테이너화 하기

 

이 블로그의 내용을 거의 복붙 수준으로 했다.(그만큼 설명이 잘 되어있었음)

감사합니다!