AWS EC2, Nginx 이용해 React 프로젝트 배포
EC2, Nginx를 이용해 React 앱을 배포하는 방법은 검색해보면 많이 나오니깐 보고 하시면 될 것 같습니다.
적용하는 과정에서 헤맸던 부분, 오류 해결하는 과정을 정리한 글입니다.
참고 글
AWS EC2에서 Nginx로 React 앱 직접 배포하기
인스턴스 생성
운영체제는 Amazon Linux 2 AMI를 사용했습니다.
프리 티어로 진행했습니다. 프리 티어 확인 여부는 내 결제 대시보드 -> 밑에 경고 및 알림으로 확인 가능합니다.
보안 그룹
- ssh
내 PC와 연결할 때 사용합니다. 어디에서나 옵션보단 내 IP 옵션으로 설정합니다. 현재 사용하고 있는 네트워크 환경이 아닌 다른 곳에서 연결할 때 설정을 바꿔줍니다. - HTTP, HTTPS
웹 서버 배포를 목적으로 하기 때문에 어디에서나 옵션을 선택
Putty를 이용한 ssh 접속 이슈
만약 설정을 다하고 open 했을 때 connection 에러가 난다면,
- 위의 보안 그룹 ssh 설정 확인.
- 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가 실행되어 있으면 됩니다.
-
$sudo netstat -ntlp로 포트 확인.
Nginx는 포트 번호 80번을 사용하고 있습니다. 만약 포트 번호 80이 안뜬다면 인스턴스 보안 그룹 HTTP 설정을 어디에서나 옵션으로 체크해야 합니다.
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 폴더까지의 절대 경로
sites-enabled 폴더로 symbolic link 설정
$ $ 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을 지우고 다시 빌드 하면 됩니다.
