💡

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

2021/10/08に公開

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

概要

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

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

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

どうやるの?

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

①ルート直下に、vue.config.jsという名前のファイルを作成します。

vue.config.jsファイルを編集しよう!

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

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

npm run serveしてみよう!

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

④ブラウザでアクセス!

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

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

めでたし、めでたし〜🎉

まとめ

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

参考資料

[Vue CLI公式 CLI Service]
(https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve)

GitHubで編集を提案

Discussion