6. NestJs & Git Actions CI/CD - [ AWS EC2 배포 ] - 도메인&nginx

[AWS EC2 배포] - 기본편에서  발생한 문제점 2번을 해결하는 글입니다

DNS로 인스턴스에 접근하기 ( 퍼블릭ip:포트번호로 접근합니다. 일반적으로 우리는 ip:포트번호로 접근하진 않습니다 )

우선 도메인을 하나 구매해야합니다.

저는 가비아에서 도메인을 구매하였고 이벤트 도메인으로 550원(1년)에 도메인을 구매하였습니다.

 

1. aws 웹페이지 접속 후 검색창에 route 53을 입력하고 route 53 페이지에 진입합니다.

route 53 검색 -> 대시보드

2. 호슽팅 영역 생성 버튼을 클릭합니다.

---

3. 도메인 이름 인풋박스에 미리 구매한 도메인을 입력한 후 호스팅 영역 생성 버튼을 클릭합니다.

---

호스팅 영역 생성 결과

---

4. 생성된 결과 레코드 중 NS유형의 값/트래픽 라우팅 대상의 4개의 값을 복사한 뒤 도메인을 구매한 사이트로 이동합니다.

-> 저는 가비아에서 도메인을 구매했기 때문에 예제 이미지를 가비아로 합니다.

 

5. 가비에 접속한 후 my가비아 -> 구매한 도메인의 관리 버튼을 클릭합니다.

도메인 관리 페이지

6. 네임서버 설정 버튼을 클릭 후 aws 호스팅 영역 생성 후 얻은 NS 유형 4개를 차례대로 1~4차까지 넣고 적용 버튼을 클릭합니다.

---

7. 다시 aws route 53 페이지로 돌아가서 호스팅 영역의 레코드를 생성합니다.

-> 레코드 생성은 dns 서버에 ec2 인스턴스 ip주소를 설정합니다.

route 53 - 호스팅 영역 - 레코드 생성

8. 레코드 값 텍스트 에리어에 ec2 퍼블릭 ip 주소를 넣어준 후 레코드를 생성합니다.

-> 서브도메인은 사용하지 않으므로 비워둡니다.

 

9. 조금 기다린 후 도메인:포트번호로 접속하면 도메인이 연결된 것을 확인할 수 있습니다.

->  이상하지 않나요? 우리는 보통 도메인으로 접속을 시도하지만 위의 연결된 방식은 도메인:포트번호입니다.

-> 이를 해결하기 위해서 ec2 인스턴스 서버에 nginx를 사용하여 리버스 프록시를 설정하겠습니다.

---

10. 터미널로 ec2 인스턴스에 접근한 뒤 nginx를 설치합니다.

sudo amazon-linux-extras install nginx1    #nginx 설치
sudo systemctl start nginx.service    # nginx 실행
sudo systemctl status nginx      # nginx 상태 확인

 

11. 그 후 ec2 인스턴스 -> 인바운드 규칙 -> 80포트를 개방합니다.

80 포트 개방

12. 그 후 구매한 도메인에 접근하면 아래 이미지와 같은 화면이 출력됩니다.

nginx 기본 화면

-> 우리는 도메인으로 접근하면 pm2로 실행중인 서버에 접근하고 싶은데.. 스태틱한 페이지가 랜더링되고 있는걸 확인하고 있습니다.

 

13. nginx의 설정 파일을 변경하여 포트포워딩을 해주도록 하겠습니다.

-> 포트포워딩은  IP 주소와 포트 번호 결합의 통신 요청을 다른 곳으로 넘겨주는 것입니다.

 

---

14. 터미널로 ec2 인스턴스에 접속한 뒤 nginx.conf 파일을 수정합니다.

sudo vi /etc/nginx/nginx.conf # 설정 파일 수정

##### nginx.conf 파일의 server 영역  ######
...

 server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

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

		# location 추가
		location / {
			proxy_pass http://127.0.0.1:3000;
		}

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
    
  ...
  ######
  
  sudo service nginx restart # nginx 재시작

15. nginx를 재시작 후 다시 도메인으로 접근하면 정상적으로 연결된걸 확인할 수 있습니다.

16. nginx의 인바운드 포트인 80포트를 개방했으므로 외부에서 직접 앱 서버로 접근할 수 없도록 aws 페이지에 접속하여 인바운드 규칙 3000번 포트를 닫아줍니다.