Vue CLI + Firebase + Github Pagesでアプリを作ってみたけど、公開できない→公開した

3 min read読了の目安(約3300字

Firebaseを使ってみたかったので、以下のサイトを参考に作ってみました。

Vue CLI + Firebase + Github Pages でサクッと作る、プロトタイプの始め方。https://blog.vivita.io/entry/2019/05/28/100000

2021/03/14追記:
最初は公開できなかったのですが、APIキーの利用を制限して公開しました。
一番下に追記しました。

Vue CLIでプロジェクト作成

$ npm install -g @vue/cli
$ vue create chat

オプションは以下を選択

❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Use NPM 

プロジェクトができたらディレクトリに移動して起動

 $ cd chat
 $ npm run serve

私はここでエラーが出てしまったので、以下の記事にまとめました。

https://qiita.com/okada3333/items/84a0754a494480bcd909

立ち上がりました 👏

GitHub設定

つぎはGitHubを設定します。

リポジトリを作成

https://github.com/newからリポジトリを作ります。

さっき作ったremoteを追加してmainブランチへpush

$ git remote add origin git@github.com:[アカウント名]/[リポジトリ名].git
$ git branch -M main
$ git push -u origin main

まだコミットしてなかったと思うのですが、これでgithubへ反映されてました 👀 (うろ覚え)

このときのコミットは以下です。
(コミットコメントは、最初はinitと書かれていました。その後rebaseで変えました)

https://github.com/okadamari/chat/commit/ba35bdb411fb0c02893db49a3b7bc53fd17bd1ce

GitHub Pages設定

長くなるので、ここは別の記事にしました。

https://qiita.com/okada3333/items/ca4a1c48f1f8801d6746

ここまででVueアプリの作成&Github Pagesでの公開ができました。
次は、このプロジェクトをFirebaseを使ったチャットアプリケーションに変更していきます。

Firebaseを使ったチャットアプリケーションに変更

Firebaseでプロジェクトを作成

こちらも長くなるので別の記事にしました。

https://qiita.com/okada3333/items/93a9767427808147e2ac

追記:参考サイトにはありませんでしたが、私の環境では、Cloud Firestoreも設定が必要でした。
また、最初はセキュリティルールを変えることに気づかず時間がかかりました。

firebaseを追加

Vue CLIで作ったchatプロジェクトにfirebaseのpackageを追加します。

$ npm install firebase

App.vueファイルの内容を差し替える

App.vueを参考サイトのとおりに書き換えました。

https://blog.vivita.io/entry/2019/05/28/100000

firebaseConfigを書き換える

以下の部分を変更します。

    var firebaseConfig = {
      apiKey: "xxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxx",
      databaseURL: "https://xxxxxxxxx",
      projectId: "xxxxxxxx",
      storageBucket: "",
      messagingSenderId: "xxxxxx",
      appId: "xxxxxxx"
    };

SDKは以下の場所で確認できます。

https://qiita.com/okada3333/items/93a9767427808147e2ac#sdkの確認方法

firebaseConfigを環境変数に置き換え

このままGitにコミットするとAPI keyが見えてしまうので、環境変数にしまいました。

https://qiita.com/okada3333/items/4a497798262a76d33592

現在の状況

作成したファイルは、以下に保存しました。

https://github.com/okadamari/chat/commit/888cb113d4da79bb604418a94ddf303c8af6065e

が、Github Pagesには反映していません。

なぜかというと、デプロイする時にAPIキーを含めてしまうとソースコードに載ってしまうし、含めないと書き込めないし…

やっぱりGitHub Pagesで公開はできないかな…?と思っているところです。

追記:一応ローカルではできました 🎉

2021/03/14追記

以下の記事を見つけたので、GCPコンソール内の認証情報でAPIキーの利用を制限を追加して公開しました!

https://shiodaifuku.io/articles/txEgArhm4Z2BOzrd0IKJ

localhostでは動かず、以下のサイトでは動く状態です。
https://okadamari.github.io/chat/ (→ 2021/04/30 https://chat-c5491.web.app/ に移行しました)

ですが、同時にメール認証もつけた(そしてサインアップは未実装)なので、結局自分しか見えないページになっちゃいました。

2021/04/30追記

Github PagesからFirebase Hostingへ移行しました。

https://qiita.com/okada3333/items/760e7778c01820bebbc4