개발 환경에서 https 사용하기

서버와 통신할 때 쿠키 값을 사용하기 위해서는 바뀐 크롬 보안 정책 때문에 https를 사용해서 데이터를 주고 받아야합니다.

그래서 급한대로 vercel을 통해 배포를 해서 서버와 도메인을 맞추고 http-only로 감싼 쿠키 데이터를 주고 받는데 성공을 했습니다.

그런데 로컬환경에서는 http이기 때문에 매번 코드 작성 후 push하고 배포 환경에서 테스트하기 번거로워서 로컬 환경에서 https를 설정을 해주기로 했습니다.

초기 세팅

homebrew 설치

1. https://brew.sh/ 사이트로 이동 후 lnstall Homebrew 아래의 명령어를 복사해줍니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 터미널에 복사한 명령어를 붙어넣어줍니다.

3. 엔터를 치면 맥북 비밀번호를 작성한 뒤 경로 설정을 위해 화면에 나타난 2줄을 복사한 후 한 줄씩 입력해줍니다.

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/jiheon/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"

4. brew --version을 입력하여 버전을 확인하여 설치가 잘 되어있는지 확인해줍니다.

(24.6.17기준 버전 4.3.5)

• 홈브류 명령어

  	brew update - brew 업데이트
  	brew search <패키지 이름> - 해당 패키지 검색
  	brew install <패키지 이름> - 해당 패키지 설치
  	brew list - 설치 된 패키지 리스트 확인
  	brew info <패키지 이름> - 해당 패키지 상세 정보 확인
  	brew outdated - 업데이트가 필요한 패키지 찾아보기
  	brew upgrade - 패키지 전체 업데이트
  	brew upgrade <패키지 이름> - 해당 패키지 업데이트
  	brew cleanup <패키지 이름> - 여러 개의 버전이 있을 때, 가장 최신 버전만 살리고 나머지는 삭제
  	brew uninstall <패키지 이름> - 해당 패키지 삭제

• 홈브류 영구 삭제 명령어

  	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)"

https 설정

mkcert를 설치하기 전에 homebrew를 설치해주어야 합니다.

1. brew install mkcert
2. mkcert -install
3. mkcert localhost

순으로 터미널에서 작성해주면

localhost에 대한 인증서가 두개가 생성된다. 이를 개발하고 있는 루트 폴더에 넣어주면 됩니다.

만약 깃허브에서 관리 중이라면 mkcert localhost로 생성된 localhost 인증서는 꼭 .gitignore를 통해 관리해줍니다.

• vite.config.ts

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { fileURLToPath } from "url";
import { visualizer } from "rollup-plugin-visualizer";
import fs from "fs";
import type { ServerOptions } from "https";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default ({ mode }: { mode: string }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  const isDevelop = process.env.VITE_DEVELOP === "true";

  const serverConfig = {
    host: "127.0.0.1",
    https: isDevelop
      ? ({
          key: fs.readFileSync("127.0.0.1-key.pem"),
          cert: fs.readFileSync("127.0.0.1.pem"),
        } as ServerOptions)
      : undefined,
  };

  return defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return "vendor";
            }
          },
        },
        plugins: [visualizer()],
      },
      chunkSizeWarningLimit: 1000,
    },
    server: serverConfig,
  });
};

작성 후 npm run dev를 통해 로컬환경을 실행하면

적용이 잘된 것을 확인할 수 있습니다.