AWS EC2에서 Nginx를 이용한 무료 HTTPS 통신 설정 및 도메인 적용

목표 : 개발 및 테스트를 위한 무료 HTTPS 통신 환경 구축

 

발생한 문제 및 배경

 

이번 프로젝트는 HttpSession을 사용해서 로그인이 유지되도록 했습니다.

프론트엔드와의 API 연결을 위해

AWS EC2 인스턴스에 배포하고 테스트를 시작하는데

 

API 개발시 Postman으로 테스트할때에는 잘 유지되다가

프론트엔드에서 API 연결을 할때에는 세션이 유지되지않는 문제가 발생했습니다.

 

SameSite = Lax로 해도 문제가 해결되지않아서 결국 https로 바꾸게 되었습니다 ..

 

 

 

해결법

0.  환경

- 백엔드 : Spring Boot, java 21, postgreSQL

- 프론트엔드 : React

 

AWS EC2 인스턴스 (t2.micro)에 docker로 백엔드 코드와 postgreSQL을 배포한 환경입니다.

(free-tier 입니다. 내 돈 소중해잉)

탄력 IP 설정해서 IP는 고정

 

 

 

1. 도메인 구입

https://내도메인.한국/

• 무료 도메인 서비스에서 최대한 저희 서비스와 비슷한 xxxxxxxx.p-e.kr 도메인을 구입했습니다.
• 도메인은 3개월 정도만 유지된다고 합니다.

• 빨간 부분에 EC2 인스턴스의 Public IP를 입력합니다.
  • DNS 제공업체(내도메인.한국)에서 A레코드를 연결하는 과정입니다.
• freenom이라는 서비스도 유명한데, 이런 무료 도메인이 어떻게 가능한건지 너무 궁금해서 나무위키 찾아봤어요
  • .tk, .cf, .ga[1], .gq, .ml로 끝나는 1차 도메인(국가 최상위 도메인; gLTD)을 무료로 등록할 수 있으며, ...
  • 위 도메인을 소유한 국가들은 인구가 매우 적어 도메인이 남아돌거나, 인터넷 인프라가 열악한 개발도상국들이라 자국의 도메인을 헐값에 팔아서 수입을 남기는 것이다. 
  • 소유권을 가지는 형태가 아닌, 사용권만 받는 형태로 ...

 

2. Nginx 설치 및 설정

• EC2 인스턴스에 Nginx를 설치하고, 웹 서버로 설정했습니다

sudo apt update
sudo apt install nginx

 

 

 

3. Let’s Encrypt 인증서 발급

• Let’s Encrypt에서 제공하는 Certbot을 사용하여 SSL 인증서를 발급받았습니다.
  • Let's Encrypt는 비영리 인터넷 보안 연구 그룹 (ISRG)에서 가져온 무료, 자동 및 공개 인증 기관입니다.

sudo apt install certbot python3-certbot-nginx

 

• Certbot을 사용하여 xxxxxxxx.p-e.kr 도메인에 대한 SSL 인증서를 발급받고, Nginx와 연동했습니다.

sudo certbot --nginx -d ${내 도메인}.p-e.kr

 

 

4. Nginx 설정 (HTTP → HTTPS 리디렉션)

• Nginx 설정 파일 열기

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

 

• HTTP에서 HTTPS로 리디렉션하는 설정을 추가하여, HTTP 요청을 자동으로 HTTPS로 전환하도록 설정했습니다.
• HTTPS 서버 블록을 추가하여 SSL 인증서를 적용했습니다.
• 백엔드 서버가 8080 포트에서 실행되고 있으므로, Nginx가 모든 요청을 백엔드 서버로 전달하도록 프록시 설정을 했습니다.

server {
    listen 80;
    listen [::]:80;
    server_name xxxxxxx.p-e.kr;

    # HTTP에서 HTTPS로 리디렉션
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name xxxxxxx.p-e.kr;

    ssl_certificate /etc/letsencrypt/live/xxxxxxx.p-e.kr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/xxxxxxx.p-e.kr/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 모든 요청을 백엔드 서버로 프록시
    location / {
        proxy_pass http://localhost:8080/;  # 백엔드 API 서버 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;
    }
}

 

 

5. Nginx 재시작

• Nginx 설정을 수정한 후, 오류 없는지 확인해주고 Nginx를 재시작하여 변경 사항을 적용했습니다.

sudo nginx -t 
sudo systemctl restart nginx

 

 

6. HTTPS 적용 확인

• 이제 https://발급받은 주소 으로 접속하면, SSL 인증서가 적용된 HTTPS 연결이 정상적으로 작동하며,
  백엔드 API 요청도 문제 없이 처리됩니다.
• application.yml 을 https에 맞게 same-site: None, secure: true로 바꿔주고 CORS 설정도 다시 확인해주세요.

 

 

 

 

https 적용해도 session 문제가 해결되지않는다면 ?

 

1. docker로 서버 로그 찍어보기

• JSESSIONID로 포스트맨 테스트 후 세션 생성에는 문제가 없음을 확인

 

   

   2.  Nginx 로그 살펴보기

 

   3.  프론트엔드 코드 살펴보기  <<< 저희 팀은 여기서 문제를 발견했습니다.

 

 

기존에는 "  withCredentials: true, " 설정이 로그인 API에만 들어있었는데
아래처럼 axios 파일에서 baseURL과 함께 넣어주세요 ...🔑ㅠㅎ

import axios from 'axios';

export const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_SERVER_URL,
  withCredentials: true,  
});

 

 

 

최종 배포시에는

 

실제 최종 배포시에는 Route 53를 사용하고 예쁜 도메인도 살 예정입니다 !