1. Chocolatey 설치

• powershell 관리자 권한으로 실행하여 다음 명령어 입력

  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>](<https://community.chocolatey.org/install.ps1>)'))
  

2. mkcert 설치

• Chocolatey 설치 후 명령어 입력

  choco install mkcert
  

3. init-https.sh 파일 생성

• 프론트엔드 프로젝트 루트 디렉토리에 init-https.sh 파일 생성

  #!/bin/bash
  
  # Check if mkcert is installed
  MKCERT_INSTALLED=$(which mkcert)
  
  # Install mkcert if not installed
  if [ -z "$MKCERT_INSTALLED" ]; then 
      echo "Please install mkcert manually from <https://github.com/FiloSottile/mkcert/releases>"
      exit 1
  fi
  
  # Create server.js file
  cat <<EOT >> server.mjs
  const { createServer } = require('https');
  const { parse } = require('url');
  const next = require('next');
  const fs = require('fs');
  
  const hostname = 'localhost';
  const port = 3000;
  
  const dev = process.env.NODE_ENV !== 'production';
  const app = next({ dev, hostname, port });
  const handle = app.getRequestHandler();
  
  const httpsOptions = {
    key: fs.readFileSync('./localhost-key.pem'),
    cert: fs.readFileSync('./cert.pem'),
  };
  
  app.prepare().then(() => {
    createServer(httpsOptions, async (req, res) => {
      try {
        const parsedUrl = parse(req.url, true);
        await handle(req, res, parsedUrl);
      } catch (err) {
        console.error('Error occurred handling', req.url, err);
        res.statusCode = 500;
        res.end('internal server error');
      }
    }).listen(port, (err) => {
      if (err) throw err;
      console.log(\\`> Ready on https://\\${hostname}:\\${port}\\`);
    });
  });
  EOT
  
  # Install mkcert CA
  mkcert -install
  
  # Create localhost certificate
  mkcert localhost
  
  

• 파일 실행

  ./init-https.sh
  

4. server.mjs, localhost-key.pem, localhost.pem 파일 생성

• init-https.sh 파일 실행 후 세 파일이 생성됨
• 만약 gitignore 파일에 *.pem 추가 안되어 있다면 추가

5. package.json 설정 수정

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  }

6. npm run dev