Next.js 터보팩 + HTTPS 개발 서버 사용하기

Welcome file

기본값은 HTTP

Next.js의 개발 서버 기본값은 HTTP이다. Turbopack을 사용하든 사용하지 않든 마찬가지. 리액트도 역시 HTTP이다. 그렇다면 도대체 어떻게 HTTPS를 사용해야 할까?
보안도 물론 엄청나게 중요하지만, 개발 측면에서 볼 때 HTTP 프로토콜을 사용하면 클립보드, CORS, 인증, …등등 다양한 HTTPS를 요구하는 기능을 사용하지 못하게 된다.

server.js?

구글링에서 가장 먼저 찾은 것은 server.js를 사용해 Custom Server를 만들라는 내용이었다. 문제는, 이렇게 되면 터보팩을 사용하는 의미가 사라진다. 터보팩을 사용하지 않는 사람들은 써볼만 한 옵션일지도?
구글에 관련 자료를 검색하면 다양한 방법이 나오니 참고하길 바란다.

local-ssl-proxy

내 경우에는 터보팩을 사용해야만 의미가 있는 상황이기에 더 깊게 구글링 하던 도중 local-ssl-proxy라는 키워드를 찾았다. 알아보니 local-ssl-proxy(이하 프록시)가 소스 포트에서 동작하면서 타겟 포트로 들어온 트래픽을 HTTPS로 변환해주는 동작을 하는 것 같았다. 전문 분야가 아니라 설명이 이상해도 양해 바란다.

아무튼, npm -i -g local-ssl-proxy 명령어를 입력해 전역으로 프록시를 설치하고, 인증서는 기존에 사용하던 pem들을 쓰려고 했으나 왜인지 bad decrypt 예외가 계속 발생했다.

Passphrase

이유는 패스프레이즈 때문이었다. 해당 PEM 인증서는 패스프레이즈가 걸려있었는데 이걸 그만 깜빡한 것이다.
때문에 win-acme를 사용하여 새 PEM을 만들고 이를 다음과 같이 적용하니 정상적으로 로컬 뿐 아니라 외부에서 역시 HTTPS로 잘 접속이 되는 것을 확인하였다.

"scripts": {  
    ...
    "ssl-proxy": "local-ssl-proxy --source 3001 --target 3000 --key honsal.be-key.pem --cert honsal.be-crt.pem"  
},

pnpm ssl-proxy

> local-ssl-proxy --source 3001 --target 3000 --key honsal.be-key.pem --cert honsal.be-crt.pem

Started proxy: https://localhost:3001 → http://localhost:3000

댓글

댓글 쓰기

이 블로그의 인기 게시물

C# 남아도는 메모리에도 불구하고 OutOfMemoryException이 발생한다면?

이미지
  C# 코딩 중 평소 볼 수 없던 생소한 현상이 발생했습니다. 분명 메모리는 남아도는데(32기가바이트 중 26기가바이트 사용 가능) 프로그램이 돌다가 OutOfMemory 예외를 던지며 죽어버리는 현상이었죠. List 에 수많은 파싱된 데이터를 넣는 작업 중이었습니다.   그래서 메모리 프로파일러를 잘 관찰해보니 2GB의 메모리를 사용하면 무조건 뻗어버리는 현상을 발견했고, 왜 그럴까 생각해보다가 문득 예전 XP에서 4기가 메모리를 달아도 32비트 운영체제의 한계 아닌 한계로 3기가 조금 넘게밖에 인식을 못 했던 것이 생각났습니다. 생각은 자연스럽게 컴파일이 32비트로 됐구나! 쪽으로 넘어갔고 프로젝트 설정에 보니 빌드 항목에 해당되는 체크박스가 있더군요.   현재 메모리가 남아도는데도 OutOfMemory 예외가 뜬다면 100% 저게 체크된 상태일 겁니다. 그림과 같이 체크 해제 하신 후 실행하시면 특별한 경우가 아닌 이상 컴퓨터 메모리가 바닥날 때까지 저 예외를 볼 일 없게 될겁니다.
자세한 내용 보기

MySQL 데이터 타입과 Java 데이터 타입 비교/매칭

  안녕하세요? 혼살입니다. 블로그에 정말 오랜만에 글을 씁니다. 일하고 겜하고 일하고 겜하고 집에 박혀서 매일 똑같은 일상을 보내다 보니 블로그에 글을 오랫동안 안 쓰고 있었네요. 대부분 근황은 유튜브 동영상으로 대체하다 보니 더욱 더 그랬던 것 같습니다.   하지만 이번엔 영상보다 글로 남기는 게 더 유익할 것 같아 간만에 글을 쓰게 되었습니다. 바로 MySQL Data Types & Java Data Types 매칭! 현재 진행중인 외주 작업 중 SET 타입을 Java에선 어떻게 처리하나 찾아보다가 잘 정리된 블로그 글 을 발견해 나중에 손쉽게 찾기 위해 제 블로그에도 씁니다. 위 링크에 들어가시면 테이블로 잘 정리돼 있으니 한 번 들어가 보시는것도 괜찮겠네요. 왼쪽은 MySQL, 오른쪽은 Java의 데이터 타입입니다. BIT <-> Boolean TINYINT <-> Integer BOOL/BOOLEAN (TINYINT(1)) <-> Integer SMALLINT <-> Unsigned 상관없이 Integer MEDIUMINT <-> Integer, Unsinged라면 Long INT <-> Integer, Unsigned라면 Long BIGINT <-> Long, Unsigned라면 java.math.BigInteger FLOAT <-> Float DOUBLE <-> Double DECIMAL <-> java.math.BigDecimal DATE <-> java.sql.Date DATETIME <-> java.sql.Timestamp TIMESTAMP <-> java.sql.Timestamp TIME <-> java.sql.Timestamp YEAR <-> yearsIsDateType이 설정됐다면 java.sql.Date, 아니라면 Short CHA
자세한 내용 보기

테일즈위버 OST 전곡 모음

이미지
  블로그를 옮기면서 카드캡터 사쿠라 OST를 포함해 테일즈위버 OST 역시 까먹고 안 옮겼었네요. 소름... 블로그 조회수의 대부분을 차지하는 두 개를 안 옮겼었다니!   게임보다 OST들으러 들어간다는 테일즈 위버(Tales Weaver)의 모든 OST 모음집입니다. FLAC파일을 재생할 수 있는 플레이어가 필요합니다... 만 요새는 웬만해선 다 재생해주죠. 즐감하세요.
자세한 내용 보기