[React, Docker, Amazon EC2] Amazon EC2에 Docker로 React 배포하기

React(CRA)로 만든 프로젝트를 Docker 이미지로 build하고 AWS EC2에 배포해보겠습니다!

도커에 대한 기본적인 내용과, 로컬에서 쓸 이미지를 만드는 부분은
[React, Docker] Docker로 React 배포하기를 참고해주세요!

Docker

보안, 캐시 부분에서의 이점을 얻기 위해 nginx 프록시 서버를 사용합니다.

nginx 설정 파일 작성

루트 경로에서 conf/conf.d 폴더를 만들어주고 default.conf 파일을 생성해
아래처럼 내용을 입력해줍니다.

# 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;
    }
}

다음은 dockerfile 입니다.

#Dockerfile
FROM node:19.6.1-alpine3.17 as builder

WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY . .

RUN npm install
RUN npm run build
RUN rm .env

FROM nginx
# COPY --from=builder /usr/src/app/build /usr/share/nginx/html

RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

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

제가 배포하려던 프로젝트의 경우 이미지를 build 과정에서 환경 변수가 필요했는데, build-arg 인자로도 설정이 되지 않았습니다. API Endpoint를 공개할 순 없어서 위와 같이 환경 변수 파일을 복사했다가 내부에서 build가 끝나면 파일을 지워주는 방식으로 사용했습니다. 사용 방법에 맞게 도커파일을 수정하시면 될 듯합니다.

도커 이미지 빌드

docker build -t {dockerhub 유저 아이디}/react-image .

dockerhub에 이미지를 푸시하고 ec2에서 내려받아 사용할 예정이므로,
유저 아이디와 함께 태그를 달아줍니다.

M1, M2칩으로 빌드할 떄

docker build --platform amd64 -t {dockerhub 유저 아이디}/react-image .

docker image ls

위와 같은 명령어를 통해 이미지가 잘 빌드 됐는지 확인할 수 있습니다.

도커 이미지 dockerhub에 push

docker push {dockerhub 유저 아이디}/react-image

EC2

Ubuntu에 도커 설치하기

sudo apt-get update

sudo apt-get install \
    ca-certificates \
    curl \
    gnupg

sudo install -m 0755 -d /etc/apt/keyrings

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

sudo chmod a+r /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
  
sudo apt-get update -y

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y

커맨드 하나씩 잘 복붙하면 된다 ,,!

한 줄씩 치기 귀찮다면

vim docker_install.sh

# i 눌러서 수정 모드 들어가서 아래 내용 복붙하기

sudo apt-get update

sudo apt-get install \
    ca-certificates \
    curl \
    gnupg

sudo install -m 0755 -d /etc/apt/keyrings

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

sudo chmod a+r /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
  
sudo apt-get update -y

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y

# ESC -> :wq 로 저장 후 종료하기

chmod +x /docker_install.sh
./docker_install.sh

Dockerhub에서 이미지 가져오기

sudo docker pull {dockerhub 유저 아이디}/react-image

도커 daemon 실행하기

sudo service docker start

실행하기

sudo docker run -it -p {개방된 포트}:80 -d --name react-app {dockerhub 유저 아이디}/react-image

할당 받은 IP:{개방된 포트}로 들어가보면 페이지가 잘 떠있다 :)