⛳

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

2021/03/13に公開

Firebase

GitHub Pages

Vue CLI

tech

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

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

立ち上がりました 👏

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で変えました）

GitHub Pages設定

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

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

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

Firebaseでプロジェクトを作成

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

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

firebaseを追加

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

$ npm install firebase

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

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

firebaseConfigを書き換える

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

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

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