로컬에서 https 설정

프론트엔드(http://localhost:3000) -> 백엔드(http://localhost:8080) http 통신시
둘다 localhost 환경이라면 크롬, 사파리에서는 localhost 의 경우도 SameSite: None과 Secure: true 여도
개발환경이라고 생각하고 브라우저는 쿠키 설정을 허용해줌

프론트엔드(http://localhost:3000) -> 백엔드(배포 도메인 https://api.com) http 통신시
SameSite: None과 Secure: true 는 브라우저는 쿠키를 허용하지 않음
따라서 프론트엔드는 우회로 https로 변경하여 요청하도록 해야함

Set-cookie할때 도메인을 api.com 로 명시할 경우, .api.com (서브도메인 포함일 경우) 요청시 쿠키를 자동으로 보내준다,
https://localhost:3000 일 경우도 쿠키가 설정되지만 쿠키 허용 도메인이 .api.com 이므로 메인 및 서브도메인 포함일 경우의 요청에만
쿠키를 자동으로 보내준다. (즉, Next.js 같은 https://localhost:3000/api/test 요청에는 해당 쿠키가 포함되지 않는다)

Next.js 와 같은 api route.ts 를 만들어 사용하고 쿠키에 값이 필요할때는 local DNS 에서 127.0.0.1 을 dev-api.com 같은 형식변경해서 사용을 해야함 ( Mac : sudo vi /private/etc/hosts )

127.0.0.1       localhost

127.0.0.1       dev-api.com (사용안할때는 앞에 # 으로 하고 저장)

접속시에는

STEP1

mkcert를 사용하여 로컬 HTTPS를 설정할 수 있습니다.
mkcert 설치 및 인증서 생성

mkcert를 설치하고 localhost용 인증서를 생성합니다:

brew install mkcert
mkcert -install (로컬에 인증서 설치), 안된다면 mkcert -uninstall 후 재설치 요망

mkcert localhost (로컬 DNS 조작없이 사용할 경우)

mkcert를 사용안할 경우
openssl req -x509 -newkey rsa:4096 -keyout localhost-key.pem -out localhost.pem -days 365 -nodes

또는

mkcert dev-api.com (로컬 DNS 조작으로 사용할 경우)

mkcert를 사용안할 경우
openssl req -x509 -newkey rsa:4096 -keyout dev-api.com-key.pem -out dev-api.com.pem -days 365 -nodes

인증서 생성 후 localhost.pem(인증서)과 localhost-key.pem(키 파일)이 생성됩니다.

또는

인증서 생성 후 dev-api.com.pem(인증서)과 dev-api.com-key.pem(키 파일)이 생성됩니다.

STEP2

local-ssl-proxy는 로컬에서 HTTPS 환경을 쉽게 설정할 수 있도록 도와주는 도구입니다.
전역 설치 터미널에서 local-ssl-proxy를 전역으로 설치 또는 프로젝트 설치 프로젝트에 종속적으로 설치

npm install -g local-ssl-proxy

npm install --save-dev local-ssl-proxy

STEP3

local-ssl-proxy를 사용하여 HTTPS 프록시를 실행 후

local-ssl-proxy --source 3000 --target 3001 --key localhost-key.pem --cert localhost.pem

또는

local-ssl-proxy --source 3000 --target 3001 --key dev-api.com-key.pem --cert dev-api.com.pem

--source: HTTPS 요청을 받을 포트 (예: 3001)
--target: 로컬 개발 서버가 실행 중인 HTTP 포트 (예: 3000)
--key: 인증서 키 파일
--cert: 인증서 파일

동일한 포트를 사용할 수 없습니다 (예: 개발서버 3000, 프록시 3000)

환경별로 .env 를 사용 ✅ -> env 파일마다 PORT=3001 (Next.js는 .env 파일에 설정된 PORT 값을 자동으로 읽어서 적용)
(개발서버 포트 변경 -> Nextjs에선 보통 3000 포트를 개발로 사용하므로)

환경별로 .env 를 사용안함 ❌ -> 스크립트에 개발서버 PORT변경

STEP4 선택사항 (package.json 스크립트 추가)

"scripts": {
  "start:proxy": "local-ssl-proxy --source 3000 --target 3001 --key localhost-key.pem --cert localhost.pem",
  "dev": "npm run start:proxy & next dev"
}

또는 

"scripts": {
  "start:proxy": "local-ssl-proxy --source 3000 --target 3001 --key dev-api.com-key.pem --cert dev-api.com.pem",
  "dev": "npm run start:proxy & next dev"
}

STEP5

개발 서버 실행 -> 브라우저에서 직접 https://localhost:3000 으로 접속

또는

개발 서버 실행 -> 브라우저에서 직접 https://dev-api.com:3000 으로 접속