目次
なんでSSL通信が必要？
位置情報を利用する際、数年前からSSL通信じゃないと取得できなくなったことで、ローカル環境でもSSL通信が必要になりました。じゃあSSL証明書をローカル環境でどう取得するかというお話です。
前提としてWindows10環境でNuxt.jsが動く環境があるということです。
発行するプログラムはmkcertというものを使いますが、それをインストールするためにChololateyを使ってみます。
Chocolateyをインストールする
Windowsのシェルから管理者権限でインストールします。下記のコマンドを打ちます。
|
1 |
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) |
mkcertをインストールする
同じくWindowsのシェルから以下のコマンドを打ちます。|
1 2 |
cinst -y mkcert mkcert -install |
これでmkcertがインストールされました。
それぞれの環境ごとに証明書を発行
Visual Studio Codeのターミナルから以下のコマンドを打つ
例）http://localhost:3000 でアクセスしていた場合|
1 |
mkcert localhost |
IPアドレスでも発行できますので、環境によって使い分けましょう。
これで、ルート上に[localhost-key.pem]と[localhost.pem]が保存されます。
ただ、かなり邪魔になるので、場所をまとめましょう
こんな感じでserverフォルダーを作り、その中にlocalhost/を作って中に放り込みます。
nuxt.config.jsに追記する
|
1 2 3 4 5 |
import colors from 'vuetify/es5/util/colors' # 下２行を追記 import path from 'path' import fs from 'fs' |
|
1 2 3 4 5 6 7 8 9 10 |
server: { port: 3001, // デフォルト: 3000 host: 'localhost', // デフォルト: localhost https: { key: fs.readFileSync( path.resolve('server/localhost', 'localhost-key.pem') ), cert: fs.readFileSync(path.resolve('server/localhost', 'localhost.pem')), }, }, |
これで実行し、https://localhost:3001でアクセスすると、SSLでアクセスできます。
ただしこのままGitにPUSHすると、自分の証明書がほかの環境にPUSHされますので、除外設定をしておきましょう
.gitignoreに追記する
|
1 2 |
# local 証明書を無視する server/localhost/*.pem |
これで大丈夫なはず。
Firefoxで見た場合
Chromeだと問題なく表示されますが、Firefoxだと、警告が表示されます。そのまま無視しても問題ないですが、さくっと解決できる（はず）なので、解決しましょう！
Windowsのシェルから以下のコマンドを打ってCA証明書格納場所を確認します。
|
1 |
mkcert -CAROOT |
Firefoxを起動して「オプション」ー「プライバシーとセキュリティ」から「証明書を表示」を開きます。
認証局証明書を開き、「インポート」で先ほどのCA証明書格納場所を指定し、「OK」を押す。 
これでエラーなく表示されます。
