📝
Nuxt 3 でlocalhostをhttps接続する方法
素直にググると、 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