3. 도메인 연결 및 nginx 설정하기

 

우선 기본 페이지 그대로 서버에 올려 도메인을 서버와 연결시키고 CNAME을 이용해서 API 요청의 경우 백엔드 서버로 일반 요청의 경우 React Page로 라우팅되게 설정해보려 한다.

가비아 도메인 구매하기

가비아 홈에서 원하는 도메인 이름을 검색하고 결제를 하게 되면 금방 이메일로 도메인 등록 완료 알림을 보내준다.

가비아는 도메인 이름을 등록해주는 네임서버 역할이기에 실제 내가 돌리는 서버에 연결 시켜주는 것은 별개의 작업이 필요하다.

(사진)

위 사진 처럼 도메인 이름 관리에 들어와 A타입 레코드에 호스트 www, @ 를 넣고 연결될 서버의 ip주소를 넣어준다.

그리고, 백엔드 요청과 프론트엔드 요청을 분리하기 위해 도메인 이름 앞에 api를 붙인 서브 도메인도 등록해주자

서브 도메인의 경우 CNAME (도메인의 별명이라 생각)레코드를 추가하면 등록해서 사용할 수 있다.

테스트

이제 올려놓은 서버를 도메인 주소를 이용해서 들어가보면 원하던 대로 도메인이 서버와 연결되었음을 확인할 수 있으나, 도메인:포트 형식으로 접속해야 한다는 단점이 있다.

해당 부분을 직접 네트워크 테이블 수정으로 80,443(HTTP/S) 를 8080 or 3000 으로 포트포워딩 해주는 방법도 있지만 프로젝트 구조 상 하나의 인스턴스에 React와 API Gateway역할을 하는 (Spring Cloud Gateway를 바탕으로) 서버 등을 배포할 계획이니 nginx를 이용하는 방법을 선택했다.

Ubuntu환경에 Nginx설정하기

ec2 인스턴스에 nginx를 설치하고

우분투 방화벽 (Ubuntu FireWall)을 설정해주자

sudo ufw app list

를 실행해보면 가능한 앱 리스트를 보여준다

그 후 아래 명령을 입력해보면

sudo ufw status

이미 켜져 있는 경우, 현재 ufw의 상태를 꺼져있는 경우 inactive 라고 알려준다.

sudo ufw allow 'Nginx Full'

HTTP, HTTPS 모두 접속 허가를 하려면 Full을 선택하면 된다.

#주의#

만약 본인이 ufw 설정을 처음 한다면 22번 포트 (ssh포트)를 반드시 열어놔야 한다 ( ‘Open SSH’ 를 허용하는것도 된다.)

그렇지 않은 상태로 ufw를 켜버리면 접속중이던 ssh연결이 끊어지게 되고 다시 ssh 연결을 할 수 없다 (ufw가 켜져있으니..)

혹시 나처럼 추가하지 않고 ufw를 켜서 ssh 연결이 이미 안된다면 굳이 인스턴스를 지우지 말고

여기 글을 참고해서 고쳐보자

• 요약하자면
  • 인스턴트 중지 → 인스턴스 설정 → 사용자 데이터 편집 → 아래 스크립트 복붙

  Content-Type: multipart/mixed; boundary="//"
  MIME-Version: 1.0
  --//
  Content-Type: text/cloud-config; charset="us-ascii"
  MIME-Version: 1.0
  Content-Transfer-Encoding: 7bit
  Content-Disposition: attachment; filename="cloud-config.txt"
  #cloud-config
  cloud_final_modules:
  - [scripts-user, always]
  --//
  Content-Type: text/x-shellscript; charset="us-ascii"
  MIME-Version: 1.0
  Content-Transfer-Encoding: 7bit
  Content-Disposition: attachment; filename="userdata.txt"
  #!/bin/bash
  ufw disable
  iptables -L
  iptables -F
  --//
  

  • 저장 후 인스턴스 시작 → 다시 인스턴스 중지 → 작성했던 스크립트 삭제 → 인스턴스 재시작
  • 위 과정을 거치면 ufw가 꺼져있던 초기의 상태로 돌아온다.

그 후 nginx를 켜주고

sudo systemctl start nginx

접속해보면 nginx의 기본 페이지가 뜨게 된다…

 

삽질로그

문제 상황 : nginx 설치 후 도메인 or ip 주소로 접속 시 nginx의 default 페이지가 노출되지 않음

• 분석
  • 우분투 방화벽 포트 확인 (sudo ufw status verbose)→ 정상
  • 실제 80,443포트 열려있는 지 확인 (sudo ss -tuln, sudo lsof -i:80) → 정상
  • nginx 구동 상태 확인 (sudo systemctl status nginx) → 정상
  • nginx 페이지 설정이 잘못되어 있을 수 있다 → 기본 설정 site를 지우고 fe,be로 index.html을 각각 생성 → 도메인 (sirong.shop)으로 들어오는 경우 fe, 서브도메인 (api.sirong.shop)으로 들어오는 경우 be html을 리턴하게 변경 → 동일 증상 재현 ⇒ 원인아님
  • nginx 접속 로그 확인 (cat /var/log/nginx/access.log) → 비어있음 = 비정상
    • 도메인 접속 시 연결이 되지 않는 이유가 nginx때문이 아니라는 것으로 판단
• 해결
  • ec2 kafka랑 이것저것 연습삼아 해봤던게 있어서 인바운드를 여러개 열어놨어서 당연히 HTTP, HTTPS도 열어놨다고 생각했지만
  • 80,443이 애초에 안열려있었음 ..
  • 인바운드 추가 후 바로 정상동작..
• 소감?
  • 접속에 관해서 생각을 하다 nginx에 무엇인가 오류가 있다고 생각했었는데 .. 조금 더 근본적인 원인부터 찾아보는게 좋았지 않았을까 싶다.

HTTPS 적용

인증서 제공을 위해 먼저 Certbot을 설치한다

sudo apt install certbot python3-certbot-nginx

다음으론 ufw에 HTTPS를 추가해준다

(기존에 Full로 했다면 Skip)

이제 SSL 인증서를 발급받는다.

sudo certbot --nginx -d 도메인 이름 -d www.도메인 이름

처음 설치한다면 이메일 등등 뭐 물어보는데 읽어보고 대답해주면 된다.

Let’s Encrypt의 경우 90일의 유통기한을 가지지만 certbot이 알아서 30일 이내 만료면 갱신시켜준다 !

sudo systemctl status cerbot.timer 를 통해 확인할 수 있다.

또, 이렇게 되면 알아서 nginx의 기본 설정 파일도 바꿔준다.

vi /etc/nginx/sites-available/default 로 파일을 확인해보면 알아서 리다이렉션 구문을 certbot을 작성해준다.

이제 메인 도메인에 대해선 다 구성되었으니

서브 도메인으로 들어오는 경우에 대해서도 동일하게 적용해보자.

certbot이 생성한 설정을 보고 직접 해도 되지만

sudo certbot --nginx -d 서브도메인 이름

편하게 위처럼 해주면 certbot이 알아서 설정파일을 추가로 작성해준다.

Certbot이 작성해준 부분에서 location 부분을

location / {
            proxy_pass <http://localhost:8080>;
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

아래 처럼 설정해서 Gateway 서버로 리버스 프록시를 설정해주자.

결과

일반 도메인으로 접속하면

기본적으로 nginx가 제공해주는 default page가 노출되고 연결 또한 https로 잡히게 된다.

 

 

 

반대로 서브 도메인 (api.~)으로 접속하게 되면

Spring Boot가 제공하는 기본 페이지가 노출되는 것을 볼 수 있다.

 

 

 

---

 

참고

https://suucong.tistory.com/61

https://webdir.tistory.com/206

https://yoo-dev.tistory.com/18

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_install&wr_id=94780

https://zionh.tistory.com/20

https://www.inflearn.com/questions/862898/도메인-주소-사용-질문

https://jaehyeon48.github.io/nginx/configure-nginx-on-ubuntu-2004/

https://wiki.yowu.dev/ko/dev/WAS/setting-certbot-ssl-on-apache2-nginx