Nuxt3をhttpsで起動(ローカル環境)

概要

開発しているバックエンドアプリケーションの影響で、ローカル環境でもフロントエンド用として構成しているNuxt3をhttpsで起動する必要がありました。

環境

• Nuxt3 v3.7.3

• macOS 13.4.1

自己署名証明書の作成(オレオレ証明書)

アプリケーション起動時に自己署名証明書を指定して起動することになるのですが、その際に利用する自己署名証明書を準備します。
mkcertを使えばサーバー証明書と秘密鍵を簡単に作成することができます。
Macの場合Homebrewを利用してインストールし、CAの作成、証明書/秘密鍵の作成を行います。

$ brew install mkcert
$ mkcert -install
$ mkcert localhost

上記コマンドを実行すると「localhost.pem」「localhost-key.pem」が作成されます。

起動時オプション修正

このnuxtコマンドを利用した起動時に、sslに関するオプションを付け加えて実行することでhttpsでのホスティングが実現できます。

nuxt dev --https --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem

--httpsと、先ほど作成した証明書と秘密鍵をそれぞれ--ssl-certと--ssl-keyに指定し実行するとhttpsで起動されます。

通常ローカル環境でのアプリケーション起動は「npm run dev」で実行します。こちらのようにpackage.jsonのscriptsプロパティにhttpsで起動する上記コマンドを登録しておくと、短いコマンドで起動することができます。

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "dev:ssl": "nuxt dev --https --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
　},

「npm run:ssl」を実行すると画像のようにhttpsで起動されます。