💡

HTTPS接続して確認したい！！〜Vue.jsで開発編〜

2021/10/08に公開

こんばんは！
今日は、面白い学びがあったので、記事にしてみます🎶

概要

通常、開発時に使用するのは、HTTP接続ですよね？
http://localhost:8080/みたいな。

しかし、使用するライブラリによってはHTTP接続では、きちんと動作確認ができないものがあります😭(localhost以外でも確認の必要があります！)
そこで、HTTPS接続への変更に挑戦してみました🙋‍♀️

...ってめっちゃ意気込んでますが、案外すんなりできました！
公式ドキュメントにも書いてあったし笑

それでは、どうやってHTTPS接続を実現したのか、次の①〜④の手順に沿って解説していきます！

ファイルを以下のように編集し、HTTPS接続できるように設定します。
色々なオプションの設定ができるのですが、今回利用するのは、devServerです。httpsをtrueに指定することで、HTTPS接続に設定できます。

module.exports = {
  devServer: {
    https: true
  }
}

設定が完了したので、早速、npm run serveしてみましょう！
すると、URLがhttpではなく、httpsになっていると思います。

npm run serveが成功したので、ブラウザで確認してみましょう。
すると、次のように警告を示すページが表示されます。

HTTPS接続のままでアクセスする必要があるので、左下の詳細設定をクリックして詳細情報を展開し、赤線で囲った部分をクリックすると、アクセスすることが可能に！

めでたし、めでたし〜🎉

Vue.jsを使って開発している中で、HTTPS接続でないときちんと動作確認ができないライブラリに遭遇してしまった場合に、今回の記事がお役に立てれば嬉しいです！
まだまだ未熟な拙い記事ですが、お読み下さり、ありがとうございました🙏