[Project] HTTPS 설정을 해 보자

📋요약

1. 도메인 구매
2. let's encrypt 에서 인증서 발급 받기
3. nginx or caddy를 통해서 reverse proxy(port forwarding) 하기

---

🚨필요성

API 서버 개발 후 Github Actions와 AWS EC2로 배포를 진행했다. 도메인이나 HTTPS에 대한 필요성을 느끼지 못했다. "HTTP로 배포해도 별 문제 없겠지~ 8080 포트 있어도 통신하는 데는 지장이 없으니깐 괜찮아~" 라고 생각했다. 그렇게 프론트엔드와 http://ip번호:8080 으로 통신하게 되었다.

그러나 진짜 문제는 프로젝트 마감 직전에 발생했다. 프론트엔드 로컬에서 화면을 개발하고 API 테스트를 할 때는 HTTP 환경이라 크게 문제가 되지 않았는데, Github Pages로 배포 후 HTTP 보안 경고가 발생했다. Github Pages는 HTTPS를 사용하기 때문이다.

귀찮은 설정들을 따로 해줘야 하는 것도 문제였지만, HTTP 이슈로 인해 모바일 환경에서는 흰 페이지만 뜨는 문제도 있었다. 그래서 결국 서비스를 위한 도메인을 생성하였고, SSL 인증서를 발급받아 HTTP를 HTTPS로 변환하게 되었다!

---

📝알아두면 좋은 것들

🌐Web Server, Web Application Server

• Web Browser : 사용자(클라이언트)가 요청한 웹 서버의 결과를 화면에 출력하는 애플리케이션

• Web Server : 인터넷을 기반으로 클라이언트에게 웹 서비스를 제공하는 컴퓨터
  • 클라이언트 : 웹 서버에게 주소(url) 을 가지고 통신 규칙(http) 에 맞게 요청하면, 알맞은 내용(html) 을 응답 받음
  • 서버 : 클라이언트의 요청을 기다리고, 웹 요청(http)에 대한 데이터를 만들어서 응답, 이때 데이터는 웹에서 처리할 수 있는 html, css, 이미지 등 정적인 데이터로 한정
• Web Server 한계 : 정적인 자료만 제공
• 예 : apache, nginx, Microsoft IIS 등

• Web Application Server(WAS) : 웹 애플리케이션을 실행시켜 필요한 기능을 수행하고 그 결과를 웹 서버에게 전달하는 일종의 미들웨어
  • 동적인 페이지를 만들어낼 수 있는 서버
• 예 : tomcat, JEUS, IBM WebSphere 등

🪪DNS Record

• DNS Record
  • DNS에 받은 요청을 어떻게 처리할 것인지에 대한 정보

• DNS Record Type
  • A
    • IP주소와 도메인 주소를 매핑할 때 사용하는 레코드
    • 하나의 도메인에 여러 개의 IP 주소를 등록할 수 있음
    • 예: naver.com의 A레코드를 조회했을 때 125.209.222.141, 125.209.222.142, 223.130.195.200, 223.130.195.95 의 IP주소가 매핑되어 있음
  • AAA
    • A의 확장형으로 도메인에 IPv6 주소가 매핑되어 있는 레코드
  • CNAME
    • 도메인 별명 레코드. 기존 도메인에 별명을 붙인 레코드
    • velog.io/@sians0209 의 CNAME이 velog.io/@siyeonSon 일 때, velog.io/@siyeonSon 을 입력하면 velog.io/@sians0209 로 접근 가능
  • MX
    • 메일 서버 레코드. 메일 서버를 확인하는데 사용하는 레코드
  • NS
    • 네임 서버 레코드. 도메인에 대한 네임서버 권한을 가지고 있는지 알려주는 레코드
  • PTR
    • IP주소에 대한 도메인 주소를 확인할 수 있는 레코드
  • SOA
    • 도메인 정보를 가지고 있는 레코드
  • TXT
    • 텍스트를 입력할 수 있는 레코드. 메모를 남기는 레코드
  • CAA
    • 도메인 인증기관에 관련된 레코드

🖥️웹서버 vs API 서버

• 웹 서버
  • 프론트엔드 서버
  • 웹 페이지를 렌더링하는 데에 필요한 HTML, CSS, JS 파일을 브라우저에게 전송하는 역할

• API 서버
  • 백엔드 서버
  • 웹 페이지에 필요한 동적인 데이터들을 생성하고 전송하는 역할

🖥️CSR vs SSR

• 클라이언트 사이드 렌더링(CSR)
  • 웹 페이지 기본 화면(정적 웹 페이지)을 받아올 때 : 클라이언트(브라우저) ↔ 프론트엔드 서버
  • API 요청을 할 때 : 클라이언트(브라우저) ↔ 백엔드 서버 ↔ 데이터베이스

• 서버 사이드 렌더링(SSR)
  • 클라이언트(브라우저) ↔ 프론트엔드 서버 ↔ 백엔드 서버 ↔ 데이터베이스

🔐tls ssl

tls ssl 차이
TLS 는 SSL의 업데이트 버전으로 SSL의 최종버전인 3.0과 TLS의 최초버전의 차이는 크지않으며, 이름이 바뀐것은 SSL을 개발한 Netscape가 업데이트에 참여하지 않게 되어 소유권 변경을 위해서였다고 한다.

💻실습

1. Nginx 설치

# Nginx 설치
sudo apt install nginx

# Nginx 실행
sudo service nginx start

• 참고

# Nignx 재실행
sudo service nginx restart

# Nginx 삭제
sudo apt-get remove --purge nginx nginx-full nginx-common

2. 인증서(certbot) 설치

sudo apt update

sudo apt upgrade -y

sudo apt install certbot python3-certbot-nginx

• 인증서 등록
  • email과 도메인 주소를 입력하여 인증서를 발급 받는다

sudo certbot --nginx

3. Nginx config 수정

• cd /etc/nginx/sites-available
  • 존재하지 않을 경우 sudo mkdir /etc/nginx/sites-available 을 통해 폴더를 생성한다
• sudo vi test.conf 파일 생성 후 다음 내용을 작성한다
  • 자신이 사용할 도메인과 ip 및 포트 주소를 올바르게 작성한다

server {
       listen 80;
       server_name example.com www.example.com;  # 수정
       return 301 https://example.com$request_uri;  # 수정
![](https://i.imgur.com/fY4piAy.png)

![](https://i.imgur.com/uqGhDWV.png)

}
server {
       listen 443 ssl;
server_name example.com www.example.com;  # 수정
       # Certificate
       ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;  # 수정

       # Private Key
       ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.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;
               }
}

• nginx config 문법 확인

sudo nginx -t

• 심볼릭 링크 생성
  • sites-available에 service config 내용을 작성 후 sites-enabled으로 심볼릭 링크를 생성한다
    - sites-available: 동작 가능한 service 문서들을 작성 및 저장
    - sites-enabled: 실제로 nginx가 service할 대상들

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

• test 파일을 새롭게 생성하였으므로, 기존 defalut 파일을 삭제해 준다

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

4. 인증서 확인 및 갱신

sudo certbot renew --dry-run

5. 인증서 자동 갱신

• Let's Encrypt 무료 SSL 인증서는 3개월 단위로 인증서가 발급된다
• 매달 1일 자정에 갱신하고 nginx 재시작한다

sudo crontab -e

# nano 에디터를 사용함
0 0 1 * * certbot renew --renew-hook="sudo service nginx restart"
# cntl+x 를 통해서 저장 후 종료 가능

# 크론탭 갱신
sudo service cron restart