News

[DevOps] 01. 도커와 AWS EC2를 활용한 리액트 앱 배포하기

heoseongh

May 28, 2022 • 4 min read

hands-on lab : Working with Docker Containers

Goal

리액트 앱을 빌드하고 nginx와 함께 도커 이미지로 만든 뒤 aws ec2에 배포해보자.

Overview

리액트 앱 빌드
Nginx 기반의 웹 컨테이너 구동
Nginx configure 커스텀
빌드된 리액트 리소스 파일 복사
Nginx 서버 재시작
리액트 앱 실행
웹 컨테이너 이미지 배포
AWS EC2로 서비스하기

Getting Started

step1. 리액트 앱 빌드

npm run build

step2. Nginx 기반의 웹 컨테이너 구동

docker run --name web -p 80:80 -dt nginx

브라우저에서 localhost로 접속하여 웰컴 페이지 확인

step3. Nginx configure 커스텀

nginx는 default.conf 에 작성되어있는 root 디렉터리를 파싱해서 웹을 띄워준다. 우리는 default.conf 파일의 root 디렉터리를 /var/www/html/ 으로 커스텀 해서 작성해주고 설정한 root 디렉터리에 빌드된 리액트 리소스 파일들을 모조리 넣어줄 것이다. 그러면 nginx가 /var/www/html/index.html 파일을 실행시켜 줄 것이다. 우선, 설정 파일을 넣어주면 기존의 default.conf 파일이 덮어씌워지기 때문에 백업을 먼저 진행한다.

기존 default.conf 백업

docker exec web mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.origin

check.

docker exec web ls /etc/nginx/conf.d/

커스텀 default.conf 생성

vi ./default.conf

server {
listen 80 default_server;
listen [::]:80 default_server;

root /var/www/html/;
}

/var/www/html/ 내부에 있는 리소스 파일들을 파싱하겠다.

웹 컨테이너에 default.conf 넣어주기

docker cp ./default.conf web:/etc/nginx/conf.d/

check.

docker exec web ls /etc/nginx/conf.d/

step4. 빌드된 리액트 리소스 파일 복사

이제 /var/www/html/ 디렉터리를 생성하고 빌드된 리액트 리소스 파일들을 모조리 넣어주자.

/var/www/html/ 디렉터리 생성

docker exec web mkdir /var/wwww/html/

빌드된 리소스 파일 복사

docker cp {build디렉터리경로}/ web:/var/www/html/

check.

docker exec ls /var/www/html/

warning.

: index.html을 포함한 모든 파일들은 html 디렉터리 하위에 존재해야 한다.

/var/www/html/build/ 와 같이 디렉터리를 옮겨버렸을 경우

docker exec web sh -c 'mv /var/www/html/build/* /var/www/html/'

왜 sh -c 를 사용하는가?

*,&,| 과 같은 문자들을 리터럴로 즉, 데이터 그 자체로 해석하기 때문에 쉘을 이용하여 도커 내부로 명령을 전달해줘야 한다.
참고 : [도커 docs] [스택 오버플로우]

step6. Nginx 재시작

docker exec web nginx -s reload

step7. 리액트 앱 실행

웹 컨테이너에서 실행

컨테이너에는 브라우저가 없기 때문에 curl 명령어로 컨테이너의 IPAddress 로 요청을 보내보고 index.html 코드가 응답되는지 확인해보자.

컨테이너 private IPAddress 확인

docker inspect web | grep IPAddress

curl 요청 보내기

curl IPAddress

curl localhost 과 같다.

컨테이너 ip로 요청을 보낸다는 것은 컨테이너 입장에서 localhost 로 요청을 보내는 것과 같기 때문이다.

로컬 브라우저에서 실행

http://localhost:80

step8. 웹 컨테이너 이미지 배포

컨테이너 이미지로 만들기

docker commit web {prefix}/web-image:v1

prefix: docker hub id 입력

도커 허브에 배포하기

docker push {prefix}/web-image:v1

step9. AWS EC2로 서비스하기

이제 배포한 웹 컨테이너 이미지로 EC2에서 구동하면 제공받은 EC2의 퍼블릭 ip로 접속할 수 있고, 우리가 만든 리액트 앱을 어디에서나 띄울 수 있게 된다.

우분투 AMI로 EC2 인스턴스 생성
EC2에 도커 설치하기(이전 포스팅 참고)

EC2에서 nginx서버 띄우기

도커 허브에 배포해둔 이미지 받아서 구동하는 방법(기본적인 방법)
우분투에 직접 nginx 설치하는 방법(로드밸런서가 도커 이미지를 지원하지 않을 때)