📝

Nuxt 3 でlocalhostをhttps接続する方法

2022/05/08に公開

素直にググると、 nuxt2 × https の組み合わせでイケナイためのメモ

参考
【Nuxt.js】ローカル環境をhttpsで起動する方法

1.参考記事と同様に、mkcertでオレオレ証明書を作成

brew install mkcert
mkcert -install
mkcert localhost

実行を行ったディレクトリ内に

localhost.pem
localhost-key.pem

が生成されます。

2.Nuxt3 でオレオレ証明書を利用し、https接続する

Nuxt3からは、nuxt.config.jsでhttpsがBoolean型になっております。
素直に、参考記事を参照してもできませんので、
Nuxt3 から追加されたpackagenuxiソースコードを読んでみると、
どうやら、--ssl-cert,--ssl-keyなるコマンドがあるようで、
実際に
npx nuxi dev --helpを行うと、

npx nuxi dev --help
Nuxt CLI v3.0.0-rc.2                                                                                                                                       
> Usage: npx nuxi dev [rootDir] [--clipboard] [--open, -o] [--port, -p] [--host, -h] [--https] [--ssl-cert] [--ssl-key]                                 

⋮ Run nuxt development server

Use npx nuxi [command] --help to see help for each command

と教えてくれてます。
ですので、

npx nuxi dev --https --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem

等とすることで、オレオレ証明書でhttps接続が行えます。

長いので僕は、
package.jsonに"https": "nuxi dev --https --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem"をscriptsに追加して利用しています。

Discussion