Closed2021/12/22にクローズ3

local 環境で https を使いたい

nbstsh

この記事を参考にやってみる

https://web.dev/how-to-use-local-https/

nbstsh

mkcert を使って local で https

mkcert という tool がおすすめらしい

手順

1. install (macOS)

terminal で以下を実行

brew install mkcert
brew install nss # if you use Firefox

2. Add mkcert to your local root CAs.

terminal で以下を実行

mkcert -install

local certificate authority (CA) が生成される。

3. Generate a certificate for your site, signed by mkcert.

local で https を実行したいサイトの root directory で以下を実行

mkcert localhost

そのサイト用の certificate を生成。localhost-key.pem (private key) と localhost.pem (certificate) の二つのファイルが生成される。

4. Configure your server.

app server に HTTPS を使うように設定。やり方は server によって異なるため割愛。

nbstsh

Next.js の例

Next.js で local-ssl-proxy を使用して HTTPS で localhost にアクセスできるようにする例をメモ

こちらを参考にした

install

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

package.json 更新

以下を package.json に追加

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

npm run dev をすると、https://localhost:3001 にアクセスできる

このスクラップは2021/12/22にクローズされました

ログインするとコメントできます