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に追加して利用しています。
Author And Source
この問題について(Nuxt 3 でlocalhostをhttps接続する方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/anpan/articles/0ddc884a5e3c1c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol