viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。
きっかけ
nginxの上でNuxtのアプリケーションを動かしてnginxのconfでSSL/TLS化していたのですが、もっと手軽な方法があったため、置き換えた内容です。
対象
- Nuxt3で開発してる方
- 簡単にhttpsで開発したい
🪪 mkcertとは
mkcert is a simple tool for making locally-trusted development certificates. It requires no configuration.
自身のPC内でローカル認証局を作成・インストールしてくれた上、信頼されるサーバー証明書を生成してくれます。
※本番環境では使用できません
vite-plugin-mkcert
mkcertをviteで使いやすいようにしてくれてます。
今回は、Nuxtアプリケーションを作っていたため、README通りこちらの手順が必要となりました。
import mkcert from 'vite-plugin-mkcert'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
vite: {
plugins: [
mkcert({
savePath: './certs', // 証明書を保存するディレクトリ
force: true, // vite設定にhttpsプロパティがなかった場合も証明書を生成する
hosts: ['localhost', '127.0.0.1', 'hogehoge.com'] // 必要に応じて対象となるホストを設定
})
]
},
devServer: {
https: {
cert: './certs/cert.pem',
key: './certs/dev.pem'
}
},
});
初回のdevServerの指定について
nuxi dev (nuxt dev) を実行した際に vite-plugin-mkcertが証明書を作成してくれるため、初回は公開鍵・秘密鍵が見つからず、サーバー起動時点でこけてしまいます 
ERROR ENOENT: no such file or directory, open './certs/dev.pem'
チーム開発で「初回はdevServerを消して実行してね」と共通認識をもってもらうのも手間だと感じたため、 公開鍵・秘密鍵があるかないかをfsのexistsSyncで判定する形に調整することで解決しました。
（但し、初回のnuxi devはhttpになります）
+ import { existsSync } from 'fs'
import mkcert from 'vite-plugin-mkcert'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// 上と違いないので省略
- devServer: {
- https: {
- cert: './certs/cert.pem',
- key: './certs/dev.pem'
- }
- },
+ devServer: existsSync('./certs/cert.pem') && existsSync('./certs/dev.pem')
+ ? {
+ https: {
+ cert: './certs/cert.pem',
+ key: './certs/dev.pem',
+ },
+ }
+ : undefined,
});
WSL2で開発してる場合
WSL2で開発している場合も同様によしなにやってくれますが、恐らく開発ではWSL2を使っていてもブラウザはWindows上で動かしていることがほとんどかと思います。
その場合、認証局のインストールはWindows側でする必要があります。
-
WSL側でvite-plugin-mkcertが生成してくれた鍵をopensslコマンドを用いてWindows側で利用できる形式に変換します。
この際パスワードの設定が必要になりますopenssl pkcs12 -export -inkey rootCA-key.pem -in rootCA.pem -out rootCA.pfx
-
Windowsの証明書管理ツール（certmgr.msc）を開きます。
信頼されたルート証明機関 → 証明書を右クリック → インポート にてインポートウィザードで先ほど変換した rootCA.pfx をインポートします
- 先ほど設定したパスワードの入力が必要になります
- 証明書ストアの選択では「証明書をすべて次のストアに配置する → 信頼されたルート証明機関」を選択しています（デフォルトまま）
インポートウィザードに従うがまま、正しくインポートされました
補足（エクスプローラーからWSLのディレクトリを開く方法）
上のopensslコマンドで変換した場合、証明書をインポートの際にWindowsのエクスプローラーからWSLのディレクトリを該当ディレクトリ開く必要があると思いますが、
\\wsl$から開くことができます。
-
ブラウザ側でページを確認して証明書が有効になっていれば完了です
まとめ
- 簡単にhttpsで接続することができました 🎉
- Secure属性つきのCookieの設定やhttpsを必須とするサードパーティのAPI通信のようなときに有用です
参考にさせていただいた記事
https://qiita.com/recordare/items/d51f50dc634187e20538
https://web.dev/articles/how-to-use-local-https?hl=ja
一緒に二次元業界を盛り上げていきませんか？
株式会社viviONでは、フロントエンドエンジニアを募集しています。
また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。