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로 설치하기
cmd.exe를 관리자 권한으로 실행합니다.
다음 명령줄을 실행합니다.
@"%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 옵션을 사용하셔도 됩니다.
PowerShell.exe를 관리자 권한으로 실행합니다.
Get-ExecutionPolicy 명령어로 실행 정책을 확인합니다. 만약 Restricted가 출력된다면, Set-ExecutionPolicy AllSigned 나, Set-ExecutionPolicy Bypass -Scope Process를 입력하여 제한을 풀어줍니다.
이제 다음의 명령줄을 실행합니다.
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
그 외의 방법으로 설치하기
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" } }
댓글 ( 4)
댓글 남기기