[웹] local에 https 적용하기(with Vite)

프로젝트를 진행하던 과정에서 서버에서 보내오는 쿠키에 대해서 문제가 발생했습니다.

 

로그인을 하면 서버에서 JWT 토큰을 생성하고 쿠키에 담아 클라이언트로 넘겨줍니다. 넘겨받은 쿠키는 클라이언트에서 필요할 때 요청을 보내면 브라우저가 자동으로 현재 가지고 있는 쿠키를 요청에 담아서 보내줍니다. 서버에서 보내는 쿠키는 httpOnly 속성을 true로 사용하기 때문에 프론트 측 개발자가 쿠키를 다룰 수 없는 상황입니다.

 

서버에서 보내는 쿠키는 잘 넘어오는 상황입니만! 클라이언트에서 요청을 보낼 때 가지고 있는 쿠키가 자동으로 넘겨지지 않는 문제가 발생했습니다.

요즘은 브라우저가 좋아져서 어떤 문제가 있고 어떻게 해결하면 좋은지 알려주는 상황입니다.

 

왜냐하면? 개발 도메인(localhost:5173)과 서버 도메인(https://pocurq.store)이 다르기 때문에 문제가 발생합니다.

 

브라우저가 추천해준 해결 방법을 따르기 위해서 백엔드 개발자에게 쿠키 설정에 대한 변경을 요청합니다.

 

그다음 프론트에서 해야 할 일은 기존 개발 서버를 http가 아닌 https에서 동작시켜야 합니다. 왜냐하면? 쿠키의 SameSite 속성값은 None으로 사용하는 경우 크롬 보안 정책으로 인해 Secure 쿠키만 전달이 가능합니다. 그런데 Secure 쿠키는 https 환경 즉, 암호화된 환경에서 제공되는 쿠키를 의미합니다.

 

그렇기에 어떻게 http로 진행하던 개발 환경을 https로 바꿀 수 있는지 알아보겠습니다.

 

해당 과정은 윈도우, React, Vite 환경에서 진행됩니다.

 

과정

1. mkcert를 사용해 무료로 localhost에 대한 SSL 인증서를 발급

1. 우선 Chocolatey를 설치합니다.
   - PowerShell을 관리자 권한으로 실행 및 실행 권한 확인
   > Get-ExecutionPolicy
   
   - 권한이 Restricted인 경우 AllSigned로 변경
   > Set-ExecutionPolicy AllSigned
   
   - chocolatey 설치
   > Set-ExecutionPolicy Bypass -Scope Process -
   Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
   
   - 설치 확인
   > choco
2. mkcert 설치
   > choco install mkcert
   
   - mkcert 기본 설치
   > mkcert -install
   
   - 인증서 발급
   > mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
   : localhost, 127.0.0.1, ::1에서 사용할 수 있는 SSL 인증서 생성

인증서 발급이 성공했다면 key.pem과 cert.pem 파일이 프로젝트 폴더 또는 c:/windows/system32 폴더 내부에 있습니다.

 

2. 생성된 인증서를 통해 vite 환경에 적용해 HTTPS로 서버 열기

생성된 key.pem, cert.pem 파일을 프로젝트 폴더로 가져옵니다. 이제 vite.config.js 파일에서 https에 대한 설정을 하면 끝이 납니다.

vite에서 제공해 주는 server 옵션에서 https 속성에 key와 cert 값을 넣으면 됩니다. 파일을 가져와서 설정을 완료하고 로컬 서버를 다시 실행시키면 https로 설정된 서버가 돌아가는 것을 확인할 수 있습니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import fs from 'fs'; // 여기
import path from 'path'; // 여기
import { fileURLToPath } from 'url'; // 여기
import tsconfigPaths from 'vite-tsconfig-paths';
import 'dotenv/config';

const fileName = fileURLToPath(import.meta.url); // 여기
const dirName = path.dirname(fileName); // 여기

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
  ],
  base: '/',
  server: { // 여기
    https: {
      key: fs.readFileSync(path.resolve(dirName, 'key.pem')),
      cert: fs.readFileSync(path.resolve(dirName, 'cert.pem')),
    },
  },
});

 

참고

React에서 localhost 개발환경 https 적용하기, HGY, 2024.10.22

브라우저 쿠키와 SameSite 속성, 이현섭, 2024.11.12

프론트엔드 로컬에서 HTTPS 웹서버 띄우기, Ari, 2024.11.12

set up / install, chocolatey 공식 문서, 2024.11.12