Vue.js + Nginx + Spring Boot 환경에서 SSL 인증서 적용하기

on
Vue.js + Nginx + Spring Boot 환경에서 SSL 인증서 적용하기

 

1. 왜 SSL이 필요할까?

최근 개발한 프로젝트에서 Vue.js + Nginx + Spring Boot 조합으로 웹 애플리케이션을 배포하면서, HTTPS를 적용해야 하는 상황이 발생했습니다. 특히, Spring Boot에서 자체 서명된 SSL 인증서를 생성하고, 이를 Nginx와 Vue.js에서도 활용하는 과정에서 몇 가지 문제를 겪었습니다.

"HTTP 환경에서 Vue.js에서 Spring Boot API를 호출하면 Mixed Content 오류가 발생하는데, HTTPS로 통신하려면 어떻게 해야 할까?"

이런 고민을 하다가 자체 서명된 인증서를 활용해 HTTPS를 설정하는 방법을 정리했습니다. 이 과정에서 SSL 인증서 생성, 변환, Nginx 적용, Vue.js HTTPS 요청 처리까지 하나하나 해결해야 했는데요. 같은 고민을 하시는 분들을 위해 경험을 공유해 보려고 합니다. 🚀


2. Spring Boot에서 자체 서명된 SSL 인증서 생성 및 변환

2-1. SSL 인증서가 필요한 이유

Spring Boot에서 기본적으로 HTTPS를 적용하려면 SSL 인증서가 필요합니다. 만약 Let's Encrypt 같은 공인 인증서를 사용하지 않고, 개발 환경에서 자체 서명된 인증서(self-signed certificate) 를 사용하려면 직접 생성해야 합니다.

2-2. OpenSSL을 사용한 SSL 인증서 생성

다음 명령어를 사용하면 .key 및 .crt 파일을 생성할 수 있습니다.

openssl req -x509 -newkey rsa:2048 -keyout server.key -out server.crt -days 365 -nodes

위 명령어를 실행하면 몇 가지 정보를 입력하라고 합니다. 예를 들어:

  • Country Name (국가 코드): KR
  • State or Province Name (도): Seoul
  • Locality Name (시/군/구): Gangnam
  • Organization Name (회사명): MyCompany
  • Common Name (도메인): localhost (또는 yourdomain.com)

이렇게 하면 server.key와 server.crt 파일이 생성됩니다.

2-3. Spring Boot에서 사용할 수 있도록 .p12 변환

Spring Boot는 .p12(PKCS#12) 포맷을 선호하기 때문에 변환해야 합니다.

openssl pkcs12 -export -in server.crt -inkey server.key -out server.p12 -name myssl -password pass:123456

이제 server.p12 파일이 생성됩니다. Spring Boot에서 이를 활용하려면 application.yml에 SSL 설정을 추가하면 됩니다.

2-4. application.yml에 SSL 적용

server: localhost
port: 8443
ssl:
  key-store: classpath:server.p12
  key-store-password: 123456
  key-store-type: PKCS12
  key-alias: myssl

이제 Spring Boot 애플리케이션을 실행하면 https://localhost:8443에서 실행됩니다. 하지만 여기서 끝이 아닙니다! 이 인증서를 Nginx에서도 적용해야 Vue.js가 API를 호출할 수 있습니다.


3. Nginx에서 SSL 인증서 적용

이전 편에서 Spring Boot에서 자체 서명된 SSL 인증서를 생성하는 방법을 다뤘습니다. 이제 이 인증서를 Nginx에서 활용하여 HTTPS를 적용하는 방법을 알아보겠습니다.

3-1. 인증서 파일 Nginx로 이동

sudo mkdir -p /etc/nginx/ssl
sudo cp server.crt /etc/nginx/ssl/
sudo cp server.key /etc/nginx/ssl/
sudo chmod 600 /etc/nginx/ssl/server.*

3-2. Nginx SSL 설정

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/nginx/ssl/server.crt;
    ssl_certificate_key /etc/nginx/ssl/server.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        root /var/www/vue-app/dist;
        index index.html;
        try_files $uri /index.html;
    }
}

server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

3-3. Nginx 설정 적용 및 재시작

sudo nginx -t  # 설정 문법 검사
sudo systemctl restart nginx

4. Vue.js에서 HTTPS 요청 처리

Nginx에서 SSL 인증서를 설정한 후, Vue.js 애플리케이션에서 HTTPS를 통해 Spring Boot API를 호출하는 과정에서 몇 가지 문제가 발생할 수 있습니다. 특히 자체 서명된 인증서를 사용할 경우, 브라우저 및 API 요청에서 인증서 신뢰 문제가 발생할 수 있습니다.

4-1. 브라우저에서 인증서 신뢰 추가

자체 서명된 인증서는 기본적으로 신뢰되지 않으므로, 사용자의 운영체제 및 브라우저에서 직접 신뢰 목록에 추가해야 합니다.

Windows에서 인증서 신뢰 추가

  1. server.crt 파일을 더블 클릭하여 "인증서 설치"를 선택합니다.
  2. "로컬 컴퓨터"를 선택하고 "신뢰할 수 있는 루트 인증 기관"에 추가합니다.

Mac에서 인증서 신뢰 추가

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/nginx/ssl/server.crt

Linux에서 인증서 신뢰 추가

sudo cp /etc/nginx/ssl/server.crt /usr/local/share/ca-certificates/
sudo update-ca-certificates

4-2. Vue.js에서 HTTPS API 요청 처리

Vue.js에서 HTTPS API 요청을 보낼 때 자체 서명된 인증서로 인해 요청이 거부될 수 있습니다. 이를 해결하기 위해, 개발 환경에서는 SSL 검증을 비활성화할 수도 있습니다.

Axios에서 SSL 검증 무시 설정 (개발 환경용)

import axios from 'axios';
const instance = axios.create({
baseURL: 'https://yourdomain.com',
httpsAgent: new (require('https').Agent)({ rejectUnauthorized: false }),
});

export default instance;

⚠️ 주의: 위 방법은 보안상 안전하지 않으므로 프로덕션에서는 사용하지 마세요.


이 방법을 적용하면 Spring Boot에서 생성한 자체 서명된 SSL 인증서를 Vue.js + Nginx 환경에서도 활용할 수 있습니다. 직접 삽질하면서 정리한 내용이라 같은 문제를 겪고 있는 분들에게 도움이 되면 좋겠습니다. 🔥

Comments

Post a Comment