mkcert 을 사용하여 로컬 개발에 HTTPS를 사용하는 방법

 

 

1. mkcert  사용  및 윈도우 설치

https://github.com/FiloSottile/mkcert

 

윈도우에 mkcert 를 사용하려면 먼저  CHOCOLATEY 설치해야 한다.

https://chocolatey.org/install

cmd 창을 관리자 권한으로  열고 다음 명령어로 

 

1) Chocolatey 설치하기

요구사항

• Windows 7+/ Windows Server 2003+
• Powershell v2+ (온라인 설치 시 v3+)
• .Net Framework 4+ (온라인 설치 시 4.5+)

cmd.exe로 설치하기

1. cmd.exe를 관리자 권한으로 실행합니다.

2. 다음 명령줄을 실행합니다.

 

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command " [System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

 

 

PowerShell.exe로 설치하기

PowerShell로 설치할 때에는 실행 정책(Execution Policy)상 제한이 걸리지 않도록 설정하는 과정이 추가적으로 필요할 수 있습니다. 실행 정책에 관해서는 간단하게 Bypass 옵션을 사용하셔도 되고, 좀 더 보안을 신경쓰신다면 AllSigned 옵션을 사용하셔도 됩니다.

1. PowerShell.exe를 관리자 권한으로 실행합니다.

2. Get-ExecutionPolicy 명령어로 실행 정책을 확인합니다. 만약 Restricted가 출력된다면, Set-ExecutionPolicy AllSigned 나, Set-ExecutionPolicy Bypass -Scope Process를 입력하여 제한을 풀어줍니다.

3. 이제 다음의 명령줄을 실행합니다.

 

 

[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

 

그 외의 방법으로 설치하기

chocolatey 공식 홈페이지를 참고하세요.

 

 

2 ) Windows mkcert 설치

On Windows, use Chocolatey

choco install mkcert

or use Scoop

scoop bucket add extras
scoop install mkcert

 

mkcert  설치를 했으면 cmd 를 닫은 후에 새로  열어야 한다.

 

 

 

3)로컬 환경에 대한 인증서 생성

 

다음은 로컬 환경에 대한 인증서를 만들어야 한다.

 

• 옵션으로 추가한 example.com 도메인에서 사용할 수 있는 인증서 발급 

mkcert -key-file key.pem -cert-file cert.pem example.com *.example.com

 

또는

 

• 옵션으로 추가한 localhost, 127.0.0.1(IPv4), ::1(IPv6)에서 사용할 수 있는 인증서 발급

mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

로컬을 c:/  확인해보면 cert.pem, key.pem이라는 파일이 생성된 것을 확인할 수 있다.

 

 

https 디렉토리를 만든 후 옮겨 놓았다.

 

 

4) node.js https 모듈 이용

const https = require('https');
const fs = require('fs');

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    function (req, res) {
      res.write('Congrats! You made https server now :)');
      res.end();
    }
  )
  .listen(3000);

 

 

 

5)express.js를 이용

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    app.use('/', (req, res) => {
      res.send('Congrats! You made https server now :)');
    })
  )
  .listen(3000);

 

 

6)

http 서버 사용:

다음과 같이 서버를 시작합니다({PATH/TO/CERTIFICATE...} 대체).

http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

-S는 HTTPS로 서버를 실행하고 -C는 인증서를 설정하고 -K는 키를 설정합니다.

 

React 개발 서버 사용:

package.json을 다음과 같이 편집하고 {PATH/TO/CERTIFICATE...}를 대체합니다.

"scripts": {
"start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_F

 

 

webpack의 devServer 설정

devServer: {
  ... // 기존 설정들
  https: {
    key: "./*-key.pem", // 생성된 파일의 이름을 입력해주세요
    cert: "./*.pem"
  }
}