React Vite localhost https 설정하기

동건·2024년 11월 10일

현재 진행하고 있는 4호선톤에서 백엔드 배포가 https로 이루어졌는데
프론트 배포서버는 https지만 테스트하는 로컬호스트는 http여서 통신에 문제가 생기기때문에

https로 바꿀필요가 있었다...
HTTPS 설정을 위해 mkcert라는 도구를 사용하여 로컬 SSL 인증서를 생성하면 되는데

mkcert 설치를 위해 윈도우는 Chocolatey(Windows 패키지 관리자)를 설치하면된다.

1. mkcert 설치

1-1 Chocolatey 설치

관리자 권한으로 PowerShell을 열고 아래 명령어를 입력해 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 -v로 설치가 잘되었는지 확인한다. 버전이 뜨면 잘설치된것.

1-2 mkcert 설치

방금 설치한 Chocolatey를 이용해 mkcert를 설치하면된다.

 choco install mkcert

설치에 시간이 좀 걸리는데 중간중간 나오는 문구들에는 y를 눌러 계속 설치하면된다.

설치가 완료되면, mkcert가 제대로 설치되었는지 확인ㄱㄱ

mkcert -version

2.로컬 SSL 인증서 생성

이제 mkcert로 로컬 인증서를 생성하면된다.
먼저 PowerShell에서 Vite 프로젝트 폴더로 이동한다.

cd "C:\Users\YourUsername\vite-project"

이 명령어처럼 본인의 프로젝트 경로를 적음된다.
(내경로 cd ~/Desktop/Workspace_likelion/likelion-community-frontend)

mkcert로 인증서 생성한다.

mkcert -install
mkcert localhost 127.0.0.1 ::1

이 명령어를 실행하면 localhost.pem과 localhost-key.pem 파일이 생성됨
중간에 인증서설치하겠냐는 팝업에는 예 ㄱㄱ

3. Vite 프로젝트 설정

3-1 vite.config.js 파일 수정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs';
import path from 'path';

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
    },
  },
  plugins: [react()],
});

이렇게 파일을 수정해준다. 이때 localhost-key.pem과 localhost.pem은 방금 생성된 인증서 파일이므로 로컬프로젝트에 있는지확인하기

잘있다 ㅇㅇ

🧨중요!!

저펨키 파일은 당연하지만 깃이그노어에 추가하도록 설정해서 깃허브에 올라가지 않도록 설정해야된다.

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.env
*.env

localhost+2-key.pem//깃이그노어에 추가
localhost+2.pem

이런식으로 env에 본인의 펨키를 넣어두세요
server: {
https: {
key: fs.readFileSync("localhost+2-key.pem"),
cert: fs.readFileSync("localhost+2.pem"),
},
},
난 펨키 이름이 달라서 이렇게 설정했음

++추가)

  // .env 파일 로드
dotenv.config();

export default defineConfig({
  server: {
    https: process.env.VERCEL
      ? false // Vercel 환경에서는 HTTPS 설정을 제외
      : {
          key: fs.readFileSync(
            process.env.PEM_KEY_PATH || "localhost+2-key.pem"
          ),
          cert: fs.readFileSync(
            process.env.PEM_CERT_PATH || "localhost+2.pem"
          ),
        },
  },

다른사람들도 협업해서 써야되기때문에 기본값으로는 나의 펨키이름을 적고 env의 환경변수에서도 참조할 수 있게 했다.