【Nuxt.js】localhostでSSL証明書を取得してhttpsでアクセスするお話

  • このエントリーをはてなブックマークに追加

なんでSSL通信が必要?

位置情報を利用する際、数年前からSSL通信じゃないと取得できなくなったことで、ローカル環境でもSSL通信が必要になりました。

じゃあSSL証明書をローカル環境でどう取得するかというお話です。

前提としてWindows10環境でNuxt.jsが動く環境があるということです。

発行するプログラムはmkcertというものを使いますが、それをインストールするためにChololateyを使ってみます。

Chocolateyをインストールする

Windowsのシェルから管理者権限でインストールします。

下記のコマンドを打ちます。

 

mkcertをインストールする

同じくWindowsのシェルから以下のコマンドを打ちます。

これでmkcertがインストールされました。

それぞれの環境ごとに証明書を発行

 

Visual Studio Codeのターミナルから以下のコマンドを打つ

例)http://localhost:3000 でアクセスしていた場合

IPアドレスでも発行できますので、環境によって使い分けましょう。
これで、ルート上に[localhost-key.pem]と[localhost.pem]が保存されます。
ただ、かなり邪魔になるので、場所をまとめましょう


こんな感じでserverフォルダーを作り、その中にlocalhost/を作って中に放り込みます。

nuxt.config.jsに追記する

 

これで実行し、https://localhost:3001でアクセスすると、SSLでアクセスできます。

ただしこのままGitにPUSHすると、自分の証明書がほかの環境にPUSHされますので、除外設定をしておきましょう

.gitignoreに追記する

 

これで大丈夫なはず。

 

Firefoxで見た場合

Chromeだと問題なく表示されますが、Firefoxだと、警告が表示されます。
そのまま無視しても問題ないですが、さくっと解決できる(はず)なので、解決しましょう!

Windowsのシェルから以下のコマンドを打ってCA証明書格納場所を確認します。

Firefoxを起動して「オプション」ー「プライバシーとセキュリティ」から「証明書を表示」を開きます。


 

認証局証明書を開き、「インポート」で先ほどのCA証明書格納場所を指定し、「OK」を押す。
 

これでエラーなく表示されます。

執筆者:松本[ エンジニア ]

関連記事

マークアップ

CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 目次1 静止画のSVG2 基本のアニメーション2.1 […]

スマホアプリ

【Android Studio】Androidアプリでラジオボタンの『選択時』『非選択時』のボタンの背景色と文字色を変える

Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 目次1 ラジオボタンを設置2 背景色を設定3 文字色を設定 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 […]

マークアップ

祝解禁!IEがなくなって使えるようになった便利なCSS 8選

2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 目次1 object-fit1.1 今まで1.2 これから2 filte […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。