AWS EC2, Nginx 이용해 React 프로젝트 배포

dongwon·2021년 6월 10일
3

TIL

목록 보기
9/17
post-custom-banner

AWS EC2, Nginx 이용해 React 프로젝트 배포

EC2, Nginx를 이용해 React 앱을 배포하는 방법은 검색해보면 많이 나오니깐 보고 하시면 될 것 같습니다.
적용하는 과정에서 헤맸던 부분, 오류 해결하는 과정을 정리한 글입니다.

참고 글
AWS EC2에서 Nginx로 React 앱 직접 배포하기

인스턴스 생성

운영체제는 Amazon Linux 2 AMI를 사용했습니다.
프리 티어로 진행했습니다. 프리 티어 확인 여부는 내 결제 대시보드 -> 밑에 경고 및 알림으로 확인 가능합니다.

보안 그룹

  • ssh
    내 PC와 연결할 때 사용합니다. 어디에서나 옵션보단 내 IP 옵션으로 설정합니다. 현재 사용하고 있는 네트워크 환경이 아닌 다른 곳에서 연결할 때 설정을 바꿔줍니다.
  • HTTP, HTTPS
    웹 서버 배포를 목적으로 하기 때문에 어디에서나 옵션을 선택

Putty를 이용한 ssh 접속 이슈

만약 설정을 다하고 open 했을 때 connection 에러가 난다면,

  1. 위의 보안 그룹 ssh 설정 확인.
  2. putty Host Name 확인. (인스턴스의 Private IP가 아닌 Public Ip)

Git, Node, Nginx 관련 다운로드

  • yum 업데이트
    $ sudo yum update

  • Git 다운로드, 클론
    $ sudo yum install git
    git clone https://github.com/{내 저장소}

  • nvm, node 다운로드

    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

    $ source ~/.bashrc
    nvm install node [프로젝트의 node 버전]

  • Nginx 다운로드
    $ sudo amazon-linux-extras install nginx1.12

Nginx 실행, 확인하기

Nginx 실행

Nginx를 다운로드했으면 곧바로 실행이 가능합니다.
sudo systemctl start nginx 후, 브라우저로 인스턴스의 IP로 접속했을 때 Nginx 관련 글이 나오면 성공입니다. ( 어느정도 시간 소요 )

인스턴스 IP가 실행이 안될 때

  • ps -ef | grep nginx를 이용하여 현재 상태를 확인할 수 있습니다.
    master와 worker가 실행되어 있으면 됩니다.
    Nginx Check

  • $sudo netstat -ntlp로 포트 확인.
    Nginx는 포트 번호 80번을 사용하고 있습니다. 만약 포트 번호 80이 안뜬다면 인스턴스 보안 그룹 HTTP 설정을 어디에서나 옵션으로 체크해야 합니다.
    chekc port number

React 프로젝트 빌드

npm run install 혹은 yarn start를 이용해 프로젝트가 오류 없이 실행된다면 배포할 yarn build를 통해 index.html을 생성합니다.

Nginx 기본 설정 지우기

기본 설정들을 지우고 프로젝트의 index.html을 띄울 설정을 합니다.

기본 설정 파일

$sudo vi /etc/nginx/nginx.conf

    # for more information.
    include /etc/nginx/conf.d/*.conf;

    # 추가 
    include /etc/nginx/sites-enabled/*.conf;
    # 추가 


   # 기본 설정들
   # server {
   #     listen       80 default_server;
   #     listen       [::]:80 default_server;
   #     server_name  _;
   #     root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
   #     include /etc/nginx/default.d/*.conf;

   #     location / {
   #     }

   #     error_page 404 /404.html;
   #         location = /40x.html {
   #     }

   #     error_page 500 502 503 504 /50x.html;
   #         location = /50x.html {
   #     }
   # }

기본 설정인 server 블럭들을 모두 주석 처리하고 배포를 위한 설정 파일을 미리 include 합니다.
include /etc/nginx/sites-enabled/*.conf

배포를 위한 Nginx 설정

  • 설정 파일들을 위한 폴더 생성
$ sudo mkdir /etc/nginx/sites-available
$ sudo mkdir /etc/nginx/sites-enabled

설정 파일 생성

$ sudo vi /etc/nginx/sites-available/[앱 이름].conf

server {
listen 80;
location / {
  root /home/ec2-user/[프로젝트 이름]/build;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}
}

root는 build 폴더까지의 절대 경로

$ $ sudo ln -s /etc/nginx/sites-available/[앱 이름].conf /etc/nginx/sites-enabled/[앱 이름].conf

설정 파일 체크 $ sudo nginx -t : ok, successful

nginx 재실행

$ sudo systemctl stop nginx
$ sudo systemctl start nginx

연결이 안된다면 포트 80 확인, 기본 설정 파일에서 include 빼먹었는지 확인

배포 결과 확인

브라우저로 인스턴스의 IP 주소에 접속하면 배포가 완료됩니다.

이때 흰 화면이 나오고 console 결과에서 < 관련 오류가 나오면 기존의 github page를 이용해 배포한 경우 적용한 package.json의 homepate 속성이나, index 파일의 base-name을 지우고 다시 빌드 하면 됩니다.

profile
데이원컴퍼니 프론트엔드 개발자입니다.
post-custom-banner

0개의 댓글