Help us understand the problem. What is going on with this article?

Vue.jsの開発をlocalhostでHTTPS環境で行う方法

More than 1 year has passed since last update.

はじめに

Vue.jsでFacebookログインとGoogleログインを作る開発過程で、開発環境にHTTPSが必要となった。
その開発環境構築のメモ書きです。

結論

「yarn serve --https」で「 https://localhost:8080 」で開発ができます。

HTTPSが必要になった経緯~Facebookログイン開発

開発の問題点

Facebookログインを使う場合は、「HTTPSを強制」が必須です。

以下はFacebookログインの設定画面です。「HTTPSを強制」が「はい」の状態で変更ができません。
2018-10-06_10h14_37.png

普通にVue.jsで「yarn serve」すると、「http://localhost:8080」で開発サーバが起動するので、Facebook SDKが以下のようなエラーを吐いて動きません。
2018-10-06_10h23_53.png

解決方法

Vue Cli 3にはHTTPSが準備されていました。

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve

Usage: vue-cli-service serve [options] [entry]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

実際に動かして見ると、HTTPSで起動しました。

PS D:\dev\xbc> yarn serve --https
yarn run v1.10.1
warning ..\package.json: No license field
$ vue-cli-service serve --https

 INFO  Starting development server...
 10% build 10% build      11% build 11% build 11% 13% build 13%    51% b 51% b 51% b 98% after emitting CopyPlugin

 DONE  Compiled successfully in 4507ms                                                                                                                                                 10:54:43

  App running at:
  - Local:   https://localhost:8080/
  - Network: https://192.168.0.8:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

証明書はオレオレです。
2018-10-06_10h57_50.png

補足

Facebookログインには、https://github.com/iliran11/facebook-login-vue を参考にさせていただきました。
ログインするだけなら、こちらのコンポーネントを導入するとよいと思います。

参考文献

idani
井谷(いだに)と申します。 前職では、cakePHPとjQueryとVue.jsを使って、メール配信、SMS配信、セミナー募集システム、かんたんな決済処理、アフィリエイトシステムなどを開発していました。 使える言語は、C、C++、Perl、C#、PHP、JSになります。 昔々、Gentoo Linuxの翻訳作業をしていました。
https://hirotae.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away