AWS 배포자동화 구축 _ 6. React 프로젝트 배포

이전에 index.html 파일하나로 배포 테스트를 했었는데,

실제로 배포해야하는 프로젝트는 React 프로젝트로 구성할 것이기 때문에 React 프로젝트를 만들고 잘 뜨는지 확인해보자.

 

1. React 프로젝트 생성

- 리액트 프로젝트를 생성하는 방법은 간단하다.

- 이전에 진행했던 폴더에서 그대로 React 프로젝트를 만들어주었다.

1. Node.js 설치
2. 작업용 폴더 만들기
3. 터미널에서 npx create-react-app 프로젝트명

이렇게 하면 자동적으로 필요한 폴더들이 세팅된다.

 

2. Docker 파일 수정

아래에 각 코드 설명을 적어두었다.

# 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;"]

3. nginx 설정 파일 만들기 

- 현재 디렉토리에 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;
    }
}

4. 코드 수정 후 build, 배포 확인해보기

App.js 파일에 원하는 대로 코드를 수정한다.

- 이후 도커파일에서 자동적으로 npm run build 명령어를 통해 React 프로젝트를 build 하고 결과물을 가져온다.

 

코드 수정 후 , 깃헙에 push하면 이전에 설정해둔 workflow가 돌아간다.

 

앞에서 설정해둔 도메인으로 접속하면 React 프로젝트로 구성한 화면이 뜬다 !!