[Web] React app을 Docker를 통해 AWS EC2에 배포

React 어플리케이션 생성

npx create-react-app react-docker
cd react-docker
npm install
npm start

관련 패키지 설치 과정은 생략한다.

위 코드를 실행하면 어플리케이션이 실행된다.

정상적으로 설치 및 실행이 되었다면 http://localhost:3000에 접속 시 아래와 같은 페이지가 뜨는 것을 확인할 수 있다.

Dockerfile 생성

리액트를 위한 Dockerfile을 생성한다.

# 빌드 과정
FROM node:lts-alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# 운영 과정
FROM nginx:stable-alpine as production
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

Docker Build and Run

Build

docker build -t docker_hub_nickname/tag_name .

생성한 Dockerfile을 이용해 프로젝트를 빌드한다.

Run

docker run -p 3000:80 -d docker_hub_nickname/tag_name:latest

빌드한 Docker Image를 띄운다. Dockerfile에서 80번 포트로 EXPOSE 했고, 로컬에서는 3000번 포트를 이용할 것이니 ‘3000:80’을 통해 포트 설정을 진행했다.

DockerHub

도커 이미지 아이디를 확인한다.

docker images

IMAGE ID를 사용해 도커 허브에 올릴 이미지에 태그를 씌어준다.

docker tag IMAGE_ID docker_hub_nickname/tag_name:version_num

도커 허브에 올릴 최종적인 이미지를 생성했다.

docker push docker_hub_nickname/tag_name:version_num

위 코드를 통해 Push 한다.

AWS EC2

사용할 인스턴스에 접속한다.

사전에 docker, nginx 등을 설치해두어야 한다. 이 과정은 생략한다.

docker pull docker_hub_nickname/tag_name:version_num

위 코드를 통해 이미지를 Pull 한다.

docker run -it -p 3000:80 -d docker_hub_nickname/tag_name:version_num

위 코드를 통해 EC2 서버에서 리액트 어플리케이션을 동작시킬 수 있다.

Check

‘인스턴스IP:3000’ 에 접속해본다.

잘 동작하는 것을 확인했다.

참고한 페이지

Dockerize a React app and deploy it on an AWS EC2 instance : Arghya Guha