[Next.js, React(vite.js)] 로컬 개발 환경 https 적용하기

보통 웹 개발을 진행할 때 로컬 환경에서의 개발 주소는

대부분 http://localhost 이런 식으로 되어 있는 경우가 많습니다.

 

일반적으로 개발을 진행할 때에는 문제가 되지 않지만 쿠키를 사용하는 경우

secure 속성으로 인해 http에서 쿠키를 사용하지 못하는 경우가 있습니다.

 

이럴 경우 로컬 개발 환경에 https를 적용하여 개발을 진행할 수 있습니다.

| mkcert

https를 적용하기 위해서는 TLS/SSL 인증서가 필요합니다.

mkcert는 자체 서명된 인증서를 만들어 주고,

이를 신뢰할 수 있도록 로컬 CA(인증 기관)를 설치하고 관리합니다.

따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 합니다.

 

먼저 mkcert를 설치해 줍니다.

리눅스
brew install mkcert
윈도우
choco install mkcert

다음으로 로컬 CA를 만들고 로컬에 CA인증서를 생성합니다.

mkcert -install

mkcert localhost or mkcert 도메인

해당 과정을 마무리하면

터미널의 현재 경로에 localhost(도메인이름).pem 파일과 localhost(도메인이름)-key.pem 파일이 생성이 됩니다.

 

이제 이 파일들을 실제 개발하는 폴더의 루트 경로로 옮기고 https 개발 환경을 만들면 됩니다.

| React.js (Vite.js)에서 사용

간단한 vite.config 설정으로 https를 사용할 수 있습니다.

다음 코드는 vite에서 환경변수로 개발 환경인지 확인 후

https를 적용하는 설정 코드입니다.

import react from "@vitejs/plugin-react";
import fs from "fs";
import { ConfigEnv, defineConfig, loadEnv } from "vite";

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

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

  return defineConfig({
    plugins: [react()],
    server: {
      https: isDevelop
        ? {
            key: fs.readFileSync("localhost-key.pem"),
            cert: fs.readFileSync("localhost.pem"),
          }
        : false,
    },
  });
};

이런 식으로 fs를 사용하여 인증서의 경로를 설정 코드에 작성하면 됩니다.

 

만약 개발 환경에 커스텀 도메인이 적용 주이면 이를 위해 다음 한 줄을 추가해 주면 됩니다.

import react from "@vitejs/plugin-react";
import fs from "fs";
import { ConfigEnv, defineConfig, loadEnv } from "vite";

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

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

  return defineConfig({
    plugins: [react()],
    server: {
      https: isDevelop
        ? {
            key: fs.readFileSync("커스텀도메인-key.pem"),
            cert: fs.readFileSync("커스텀도메인.pem"),
          }
        : false,
      host: "커스텀도메인",
    },
  });
};

또한 vite.js의 플러그인을 사용하는 방법도 있습니다.

vite-plugin-mkcert 플러그인을 사용하면 mkcert로 필요한 인증서를 생성하고

vite 개발 환경에 적용해 줍니다.

vite-plugin-mkcert 

import react from "@vitejs/plugin-react";
import { ConfigEnv, defineConfig, loadEnv } from "vite";
import mkcert from "vite-plugin-mkcert";

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

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

  return defineConfig({
    plugins: [react(), mkcert()],
    server: {
      https: isDevelop ? true : false,
    },
  });
};

이런 식으로 개발 환경에 https를 적용할 수 있습니다.

| Next.js

커스텀 서버 이용

next.js에서는 크게 2가지 방법이 있는 거 같습니다.

먼저 좀 복잡한 방법으로는 custom server를 이용하여 인증서를 읽고 개발 환경에 https를 적용하는 방법입니다.

 

이를 위해서 우선 프로젝트 루트 경로에 커스텀 서버로 사용할 server.js 파일을 만들어 줍니다.

그다음 해당 파일에 다음과 같이 작성을 해줍니다.

const https = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");

const dev = process.env.NODE_ENV !== "production";
const PORT = 3000;
const hostname = "localhost"; // or 커스텀 도매인
const app = next({ dev, hostname, PORT });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync("localhost-key.pem", "utf8"),
  cert: fs.readFileSync("localhost.pem", "utf8"),
};

app.prepare().then(() => {
  https
    .createServer(httpsOptions, (req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    })
    .listen(PORT, (err) => {
      if (err) throw err;
      console.log(`> Ready on https://${hostname}:${PORT}`);
    });
});

이런 식으로 인증서를 읽고 https가 적용되도록 한 다음에

개발 서버를 실행시킬 때 해당 server.js를 실행시키기 위해

package.json에 scripts에 로컬 서버 실행 시키는 부분을

"dev": "node server.js",

이런 식으로 바꿔 줍니다.

그러면 이제 로컬 개발환경에서 https로 실행되게 됩니다. 

간단한 방법

다음으로는 최근에 알게 된 간단한 방법인데

mkcert가 설치되어 있고 mkcert -install로 로컬 인증 기관을 설치한 상태면

간단하게 package.json파일에 scripts 부분을

"scripts": {
    "dev": "next dev -H 도메인 -p 포트번호 --experimental-https",
  },

이런 식으로 수정한 후 실행 시키면 

자동으로 필요한 인증서를 생성하고 https로 로컬 환경을 실행시켜 줍니다.

 

마지막으로 만약 프로젝트가 깃허브를 통해 관리되고 있다면

pem파일로 생성된 인증서들은 .gitignore에 추가하여 관리하는 것이 좋습니다.