Https 서버 맹글기

웹 개발을 하다보면 가끔씩 귀찮게 https가 필요할 때가 있당!

요즘 브라우져들은 속도와 보안때문에 캐시와 https로 개발자들을 꽤 귀차니즘에 빠트린당!

뭐~브라우져 주소줄에 보이는 자물쇠가 때론 꽤나 있어 보이기도 한당!

 

완벽하게 하려면 실제 public 도메인과 public 인증서가 있어야 하고, 그런 상황이라면 very Good!

이지만 실제는 상황과 여건이 도와주지 않아 대부분 여의치 않당.

 

완벽하진 않지만 요런 상황에서 https를 사용할 수 있는 방법(불편 감수)은 일단 크게  2가지인데,

1.  셀프 인증서(self signed certificate) 사용

2.  ngrok 무료 사용 (유료사용하면 완벽~~ ㅋㅋ)

 

셀프 인증서 사용 방법

직접 아무도 공증 안한 자신만 인증한(그래서 요런조런 제약있음 ) 인증서를 만들어야 하는데,

요거이 openssl을 설치 해서 명령어로 하는 건 응용개발자에겐 조금 과도하다 싶당.

그래서 mkcert를 이용하면 깔끔 심플한 데, window에선 Chocolatey를 이용해서 설치해야 하는

쪼메 불편함을 감수해야 한당!.

Chocolatey(package 관리툴)를 보통 choco라고도 부르는데, 아래 접속하면 개인은 무료당

https://chocolatey.org/install#individual

Installing Chocolatey

다 필요없고 install에서 시키는 대로 관리자권한으로 powershell을 열어서 아래 명령어들만

입력해 준당! ,  choco를 이용 mkcert까지 설치를 마치장!

 Get-ExecutionPolicy
 Set-ExecutionPolicy AllSigned
 ## Y나 A로 답한당!
 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'))
 choco install mkcert

아래와 같은 모습일 것이당! (노파심에 캡쳐!)

Waring이 보이지망  과감히 무시하장. 해결하려하면 마이크로소프트의 powershell 정책설정 지옥에

빠지게 되공, 힘만 빠진당. 시간은 항상 설정부분을 편하게 하는 쪽으로 도움을 주니 기다린당.

 

 

필요한 걸 설치 했으니, Node를 이용 간단히 https 서버를 맹글어서 확인해보장

HttpsServer라고 폴더(디렉토리)를 1개 맹글고(난 d:\nodews 아래에 맹글었당),

HttpsServer 폴더를  관리자 권한으로 실행된 cmd 창에서 열장.

아래 캡쳐된 화면처럼 따라 한당!(mkcert라고 친건 사용법을 보기 위해서당!) 

192.168.0.102는 내 컴 IP이니, 본인 걸로 바꿔야 한당!

HttpsServer 폴더에  아래 2개 파일이 생겼을 거이당

 localhost+3-key.pem 파일 (요거이 private key 파일이 되겄당!)

 locahost+3.pem( 요거이 public key 파일이 되겄당)

 

 Node가 설치되어 있다는 가정하에  cmd나 vs code 터미널에서 아래 명령어로 package.json

파일을 맹글고, express와 serve-index 모듈도 설치하장!

npm init -y
npm i express serve-index

package.json 파일을 열어  "type":"module" 을 추가(느낌이 올것이당)해 줘야 

require가 아닌 import를 쓸 수 있당! ~~ 대략 준비 완료당!

 

간단히 서버프로그램 (app.js) 을 아래 처럼 맹글장. 

https모듈만 있어도 되지만, 거의 항상 express 모듈이 사용되니 그냥 연결시켰당!

귀찮지만 HttpsServer 폴더 아래에 public 폴더도 맹글고, 그 안에

원하는 내용으로 암거나 쓴 test.html을 한개 미리 맹글어 두장!

import express from 'express';
import serveIndex from 'serve-index';
import https from 'https';
import fs from 'fs';

const app = express();

const options = {
  key: fs.readFileSync('localhost+3-key.pem'),
  cert: fs.readFileSync('localhost+3.pem')
};

const serverPort = process.env.PORT || 8272;

const httpsServer = https.createServer(options, app);

app.use("/",express.static('public'),serveIndex('public',{icons:true}));

httpsServer.listen(serverPort,()=>{
    console.log(`Server listening on port ${serverPort}`);
});

아래 명령으로 서버를 구동시키고(에러 없음?), 브라우져에서 https://localhost:8272 를 확인하장!

https://192.168.102:8272도 확인해 보장, 주소 표시줄에 자물쇠가 나타났다면 훌륭하당! GOOD!

node app.js

글만 장황했지, 사실 별거 없음이당!

 

NGROK을 이용하는 방법은 아래 링크를 참고하장!

2023.09.08 - [스프링] - NGROK 무료 static 도메인 (기쁨)

 

 

https://www.youtube.com/watch?v=0CxvGbRuQQM