EC2, Nginx를 이용해 React 앱을 배포하는 방법은 검색해보면 많이 나오니깐 보고 하시면 될 것 같습니다.
적용하는 과정에서 헤맸던 부분, 오류 해결하는 과정을 정리한 글입니다.
참고 글
AWS EC2에서 Nginx로 React 앱 직접 배포하기
운영체제는 Amazon Linux 2 AMI를 사용했습니다.
프리 티어로 진행했습니다. 프리 티어 확인 여부는 내 결제 대시보드 -> 밑에 경고 및 알림으로 확인 가능합니다.
만약 설정을 다하고 open 했을 때 connection 에러가 난다면,
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를 다운로드했으면 곧바로 실행이 가능합니다.
sudo systemctl start nginx
후, 브라우저로 인스턴스의 IP로 접속했을 때 Nginx 관련 글이 나오면 성공입니다. ( 어느정도 시간 소요 )
ps -ef | grep nginx
를 이용하여 현재 상태를 확인할 수 있습니다.
master와 worker가 실행되어 있으면 됩니다.
$sudo netstat -ntlp
로 포트 확인.
Nginx는 포트 번호 80번을 사용하고 있습니다. 만약 포트 번호 80이 안뜬다면 인스턴스 보안 그룹 HTTP 설정을 어디에서나 옵션으로 체크해야 합니다.
npm run install
혹은 yarn start
를 이용해 프로젝트가 오류 없이 실행된다면 배포할 yarn build
를 통해 index.html
을 생성합니다.
기본 설정들을 지우고 프로젝트의 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
$ 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
$ sudo systemctl stop nginx
$ sudo systemctl start nginx
연결이 안된다면 포트 80 확인, 기본 설정 파일에서 include 빼먹었는지 확인
브라우저로 인스턴스의 IP 주소에 접속하면 배포가 완료됩니다.
이때 흰 화면이 나오고 console 결과에서 < 관련 오류가 나오면 기존의 github page를 이용해 배포한 경우 적용한 package.json의 homepate 속성이나, index 파일의 base-name을 지우고 다시 빌드 하면 됩니다.