로컬에 https 설치 가이드(윈도우)

1. 관리자 권한으로 윈도우 PowerShell 실행

 

2. chocalatey 설치

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'))

(그대로 복붙)

Chocalatey란? 

Chocolatey는 Windows용 패키지 관리자입니다. Ubuntu에서의 apt나 macOS에서의 Homebrew와 유사한 역할을 합니다. Chocolatey를 사용하면 다양한 웹사이트에서 수동으로 설치 프로그램을 다운로드하고 실행하는 대신, 명령줄에서 간단한 명령어를 통해 소프트웨어 애플리케이션과 도구를 설치, 업데이트 및 관리할 수 있습니다.

 

일반적으로 소프트웨어 설치 과정은 직접 공식 다운로드 페이지 찾고 가이드에 따라 수행해야하지만, Chocolatey 사용시, 간단한 명령어로만 모든 과정 처리 가능.

 

추가로 다른 소프트웨어 구성요소가 필요한 애플리케이션을 설치하면 그것들도 함께 설치해준다.

3. powerShell 닫고 다시 관리자 권한으로 열기

 

4. mkcert 설치 ( 나오는 문구 전부 y)

choco install mkcert

 

mkcert란?

mkcert는 로컬 개발 환경에서 사용할 수 있는 유효한 HTTPS 인증서를 간편하게 생성해주는 오픈소스 도구입니다. 로컬에서 개발 중인 웹사이트나 애플리케이션을 HTTPS로 테스트하고 싶을 때 특히 유용

 

mkcert는 Windows, macOS, Linux 등 주요 운영체제에서 모두 작동하며, 크롬, 파이어폭스, 엣지, 사파리 등 대부분의 웹 브라우저와 호환

5. 로컬 인증기관 설치

mkcert -install

 

 

6. powerShell 닫고 IDE(vs코드) 열어서 터미널에 인증서 생성 명령어 입력

mkcert localhost

 

 

7. 프로젝트에 server.js 추가

 

CommonJS 

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

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

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

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, () => {
    console.log('🚀 HTTPS 서버가 실행되었습니다: https://localhost:3000');
  });
});

 

ES

 

// server.js
import { createServer } from 'https';
import { parse } from 'url';
import next from 'next';
import fs from 'fs';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

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

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, () => {
    console.log('🚀 HTTPS 서버가 실행되었습니다: https://localhost:3000');
  });
});

 

typescript - server.ts

// server.ts
import { createServer, ServerOptions } from 'https';
import { parse, UrlWithParsedQuery } from 'url';
import next from 'next';
import { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';

const dev: boolean = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions: ServerOptions = {
  key: fs.readFileSync('./localhost-key.pem'),
  cert: fs.readFileSync('./localhost.pem'),
};

const startServer = async (): Promise<void> => {
  try {
    await app.prepare();
    
    createServer(httpsOptions, (req, res) => {
      const parsedUrl: UrlWithParsedQuery = parse(req.url || '', true);
      handle(req as NextApiRequest, res as NextApiResponse, parsedUrl);
    }).listen(3000, () => {
      console.log('🚀 HTTPS 서버가 실행되었습니다: https://localhost:3000');
    });
  } catch (error) {
    console.error('서버 시작 중 오류가 발생했습니다:', error);
    process.exit(1);
  }
};

startServer();

 

 

8. package.json에 원하는 명령어로 https 서버 가동 명령어 추가

  "scripts": {
    "https:dev": "node server.js", <-----
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
    "prepare": "husky install",
    "test": "jest --coverage"
  },