Nginx, Let's Encrypt로 HTTPS 적용, 프론트 도메인 연결 방법 (AWS Route53 X)

0. 들어가며

배경은 이렇다. Github Organization에서 프론트엔드, 백엔드 Repository를 따로 두어 팀으로 사이드 프로젝트를 개발하고 있다.

서버비를 최대한 아끼는게 좋기 때문에, 백엔드는 AWS Route53, ALB를 사용하지 않고 EC2(Ubuntu)내에 Nginx를 설치하여 HTTPS를 적용하여 배포할 것이고, 프론트엔드는 알아서 HTTPS 적용도 해주고 무료인 Vercel로 배포하는 상황이다.

 

이전 프로젝트에서는 AWS Route53, ALB를 사용하여 라우팅을 연결하여 도메인을 관리했는데, Nginx만으로도 HTTPS 설정이 가능하고 가비아 내 설정만으로 프론트엔드 도메인 연결이 가능하다는 사실을 알게되어 이번 사이드프로젝트에 적용해보았다.

 

AWS Route53, ALB를 쓸 때는 인스턴스가 하나여도 HTTPS 적용하려면 로드밸런서까지 굳이 써야하는 불편한 점이 있었는데 Nginx으로만 HTTPS 적용하니 편하기도 편하고 돈도 덜나가서 너무 좋다.

다만 중요한 서비스고 고가용성이 필요하다면 AWS 가 더 좋을 것이다.. Auto Scaling도 되고..

 

 

1. 가비아로 도메인 구매

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

도메인 파는 곳이다. 계정이 없다면 가입 후 원하는 도메인 검색해서 구매하면 된다.

구매 후 길면 10분 정도 기다리면 구매할때 적어둔 메일로 도메인 등록이 완료되었다고 오면 도메인 등록 완료!

 

2. DNS 레코드 등록

프론트엔드와 백엔드가 나뉘어 개발하고 배포하는 상황이므로 각각 서브도메인으로 차이를 두어 관리를 하는 것이 좋다.

서브도메인이란 api.example.com, www.example.com  처럼 임의로 구분짓기 위해 존재하는 도메인 주소이다.

 

가비아 하위도메인(서브도메인) 설정

 

위 블로그를 보고 DNS 설정 방법을 참고했다. 단 우리는 저 블로그대로 따라하면 안되고

 

CNAME 타입 / www / vercel 도메인주소 (프론트엔드 배포 도메인 주소)

A 타입 / api / EC2 인스턴스 ip 주소

 

로 입력하면 된다.

 

CNAME 타입이란 다른 도메인주소로 접근할때 원하는 도메인 주소로 연결시키기 위한 타입이고,

A 타입이란 도메인 이름을 특정 IP 주소로 매핑할 때 사용하는 타입이다.

 

따라서, 사이트를 이용할때는 www.도메인주소.xxx  로 접속하여 프론트엔드 개발 화면으로 접속되게 하고

프론트가 끌어다 쓸 api 서버의 주소는 api.도메인주소.xxx 로 구분짓게된다.

 

www.도메인주소.xxx  는 도메인주소.xxx 로만 접속해도 www로 연결되게 Vercel 내에서 설정할 수 있다.

나는 백엔드쪽이니 프론트엔드 팀원에게 맡기고 패스!

 

 

3. Nginx 설치

sudo apt update
sudo apt install nginx

 

4. Let's Encrypt 및 Cerbot 설치

sudo apt update
sudo apt install certbot python3-certbot-nginx

 

5. SSL 인증서 발급

sudo certbot --nginx -d {api.example.com}

{ } 안에는 api 서버의 도메인 주소를 입력하면 된다.

명령어를 실행하면 Email을 입력하라고 나오는데, 인증 관련 정보들을 메일로 보내주기 위함으로 이메일을 적어주면 된다.

c를 누르면 스킵된다고 하는데, 스킵하면 인증서 발급 자체가 취소되니 꼭 이메일을 적어줘야한다. 이후 y | n 으로 묻는건 전부 y.

 

6. Nginx 설정파일 수정

이 부분이 조금 헷갈릴 수 있는데 스크립트를 잘 보고 적어야한다.

어차피 nginx 테스트 명령어가 있어서 오류 위치까지 잘 알려주니 시행착오를 겪어가며 수정하면 된다.

 

sudo vi /etc/nginx/sites-available/default

 

vi 편집으로 해당 위치 nginx 설정파일을 관리자 권한으로 들어간다.

이 후, 아래 스크립트 구성이 되도록 수정한다.

 

5번 단계까지 마쳤다면 인증서 발급이 되면서 설정파일이 자동으로 수정되어서 아래 구성에만 맞춰 수정할 부분이 있다면 수정하면 된다.

 

# Default server block
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    # 기본 서버 블록에서 서버 이름 제거
    # server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}

# HTTP 리디렉션 서버 블록
server {
    listen 80;
    listen [::]:80;
    server_name api.chatfia.online;

    location / {
        return 301 https://$host$request_uri;
    }
}

# HTTPS 서버 블록
server {
    listen 443 ssl;
    listen [::]:443 ssl ipv6only=on;
    server_name api.chatfia.online;

    ssl_certificate /etc/letsencrypt/live/api.chatfia.online/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.chatfia.online/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

6-1. Nginx 테스트

아래 명령어로 nginx 설정대로 제대로 작동할 수 있는지 테스트한다.

sudo nginx -t

 

혹시라도 스크립트에 오류가 있어 에러가 난다면 line 위치까지 알려주니 보면서 수정하면 된다.

 

6-2. Nginx 재시작

테스트까지 성공하면 Nginx를 재시작 시킨다.

sudo systemctl restart nginx

 

 

7. 결과 확인

api.도메인주소.xxx 로 접속

 

 

자물쇠가 생기면 정상적으로 HTTPS 가 적용된 것!