[AWS] EC2에 프로젝트 배포하기(2) - Nginx 설정과 오류 해결

배포 관련 두번째 포스팅인데, 이 단계에서 좀 많이 애를 먹었기 때문에..

다시는 똑같은 오류를 겪지 않기 위해 꼼꼼하게 기록해 보도록 하겠다. 😇

 

1. Nginx 설치

sudo apt-get update
sudo apt-get install nginx

먼저 위 명령어를 실행하여 Nginx를 설치해준다.

 

2. 방화벽 설정

sudo ufw app list

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

첫번째 명령어를 실행하면 다음과 같이 리스트가 출력되는데, 각각이 의미하는 바는 다음과 같다.

• Nginx Full : 80, 443번 포트 허용
• Nginx HTTP : 80번 포트만 허용
• Nginx HTTPS : 443번 포트만 허용

여기서 각자 해당하는 부분에 대해 방화벽 설정을 하면 되는데, 나는 HTTP로 설정을 해주었다.

sudo ufw allow 'Nginx HTTP'

 이렇게 특정 포트만 방화벽에서 제외를 해주고,

sudo ufw enable

해당 명령어로 방화벽 설정을 해준다.

 

3.  Nginx 설정하기

cd /etc/nginx

먼저 위 명령어로 /etc/nginx로 이동한다.

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

그리고 위 명령어로 sistes-available, sistes-enabled 폴더 내부의 default 설정 파일들을 제거한다.

sudo vi /etc/nginx/sites-available/myapp.conf

이후 myapp.conf 파일을 새로 추가해서 vi 편집기로 열어준다.

server {
  listen 포트번호;
  location / {
    root   /home/ubuntu/MyOwnTour/client/dist;
    index  index.html;
    try_files $uri /index.html;
  }
}

• location / : 루트로 진입했을 때 하위 코드를 실행한다.
• root: react 프로젝트의 build 폴더 경로로 설정해준다.
• index : 접근 시 리다이렉트 될 index.html을 설정해준다.
• try_files : 일종의 nginx 자체의 라우팅 설정으로, react의 경우 웹서버에서 먼저 리퀘스트 url을 가로채면 react-router의 기능을 사용할 수 없게 되므로, 모든 요청이 index.js로 향하도록 설정해준다.

 

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

파일 편집이 완료되면 site-enabled 폴더에 심볼릭 링크를 생성해준다.

 

방화벽 관련 오류 해결법 (좀 길어서 따로 뺍니당)

Nginx 설정 과정에서 나는 엄청난 실수를 하게 되는데....

프론트엔드 배포 포트가 로컬에서도 3000번이었기 때문에 당연히 저렇게 작성해야지! 하고 생각 없이 설정을 마쳤다..

그래서 조금 시간이 흐른 후 ssh를 재가동하려고 명령어를 입력했는데..

sh: connect to host ... port 3000: Operation timed out

두둥.. 이 오류와 계속해서 마주하게 되었다...

계속 서치해본 결과 2번에서 방화벽 설정을 할 때, HTTP를 allow했기 때문에 방화벽을 통과하는 포트는 80번이었다.

그래서 예외적으로 ufw에서 3000번 포트를 열어주어야 했지만 나는 ssh 접속이 안되는 상황이었고....

80번 포트만 방화벽을 통과하도록 설정해놓고 정작 배포될 포트는 3000번으로 설정해놓은(?) 바보같은 실수를 했다.

https://yvvyoon.github.io/ubuntu/ufw-enable-ssh-timeout/

어찌저찌 해결은 했는데, 위 링크의 도움을 많이 받았다..

요약하자면 다음과 같다.

1. 새로 인스턴스를 생성한다.
2. 기존 인스턴스를 중지한다. (종료 말고 중지!!)
3. 볼륨 메뉴로 가서 기존 인스턴스의 볼륨을 끊고 새 인스턴스에 연결한다.
4. 새 인스턴스에 ssh로 접속해서, 볼륨을 마운트 한 뒤 ufw 설정을 바꿔준다.
5. 볼륨을 다시 언마운트 하고 새 인스턴스에서 연결 해제한다.
6. 볼륨을 기존 인스턴스에 다시 연결한다.
7. 기존 인스턴스에 다시 ssh로 접속해본다.

 

4. Nginx 동작시키기

sudo systemctl stop nginx
sudo systemctl start nginx

위 명령어를 실행해서 nginx를 구동해준다.

만약 500 Internal Error가 발생한다면 build 경로까지의 디렉토리들에 접근 권한이 없어서 그럴 수 있다.

$ chmod 711 프로젝트 root 경로

owner 만 rwx가 가능하도록, 나머지는 read만 가능하도록 설정해주자.

여기까지 진행하면 Nginx 설정은 끝이다!

다음 포스팅에서 pm2를 적용해서 컴퓨터를 끄더라도 서버를 계속 유지하는 방법을 알아보자.