개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.

https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.

해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.

mkcert?

레포에서는 아래와 같이 설명하고 있다.

A simple zero-config tool to make locally trusted development certificates with any names you'd like.

해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.

mkcert 설치

window

readme.md 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.

아래 명령어를 입력해주자.

winget install mkcert

mac

homebrew로 설치해주면 된다.

brew install mkcert

설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.

mkcert -install

인증서 생성 및 적용

로컬 도메인 적용

특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.

본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 c:\Windows\System32\drivers\etc, mac은/private/etc/hosts 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.

나는 dev.until.blog를 적용했다.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
localhost name resolution is handled within DNS itself.127.0.0.1       localhost::1             localhost127.0.0.1 dev.until.blog

next local server 연동

이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.

mkcert dev.until.blog

next custom server를 통해 생성된 파일을 연결해주면된다.

// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() => {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) => {
if (err) throw err
console.log(> Ready on https://dev.until.blog:${PORT})
})
})

이제 package.json에 해당 dev:https스크립트를 추가해주고 실행하면 끝.

  ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....