vue + firebase 01_環境構築

Javascript Vue Firebase

■Vueのローカル環境構築

  1. npm install -g vue-cl

    グローバルにvue-cliをインストールする。

  2. cd で作業ディレクトリに移動

  3. vue init webpack [プロジェクト名]

    でアプリケーション作成用のコマンドを実行

    実行すると色々質問されるが、基本全部enterでOK。一応注意して読む。

  4. アプリケーションの作成が完了したので、

    cd [アプリケーション名]

    でアプリケーションディレクトリに移動し

    npm run dev

    で仮想サーバーを立ち上げ

  5. http://localhost:8080

    で問題なく表示されれば環境準備完了

■githubのセッティング

（Gitの使い方を参照。Firebaseの前にやったほうがいい）

■Firebaseへのデプロイ（gitで追跡対象にしていない場合）

  1. プロジェクトの作成、またはプロジェクトを追加をクリック

  2. 任意のプロジェクト名をつける

    アナリティクスとか聞かれるが、テストの場合は外して「プロジェクトを作成」

  3. 完了したら、左のメニューから「Hosting」を選択

  4. 「始める」をクリックし、ホスティングの設定を行う。

    コマンドラインツールのFirebaseCLIをインストールする。

    表示しているコマンドをターミナルで実行

    npm install -g firebase-tools

    ただ、実行する前に、インストールされているか確認。

    ターミナルで firebase -V を実行

    バージョンが表示されない場合にはFirebaseCLIをインストール。

  5. firebaseにログイン

    firebase login

    ログアウトは

    firebase logout

    すでにログインになっている時は、一度ログアウトしてからログインする

    ↓　接続の証明

  1. pwd

    でプロジェクトディレクトリに居ることを確認後、アプリケーションディレクトリ内で

    firebase init

    でfirebaseに接続

  1. 今回はホスティングサービスを使用するので、

    Hosting: Configure files for Firebase Hosting and (optinally) set up Github Action deploys

    をスペースを押して確定後、enterで確定して選択

  2. 次にオプションが出てくるが、

    Use an existing project

    を選択

  1. Select a default Firebase project for this directory:(今設定しているプロジェクト名)

    をそのままEnterで確定。

  2. 次にpublicディレクトリを聞かれるので、vueの場合は

    dist

    と入力する

  3. /index.html　で良いので、そのままenterを押し

  4. 自動的にset upし、Githubにデプロイしていいか聞かれるのでYesで進む
  5. githubの設定をあれこれ質問を受けるので、それらに答えていく

  6. コレでfirebaseの設定完了なので、

    npm run build

    コマンドを使って、vue.jsをビルドしていく

  7. ビルドが完了したら、

    firebase deploy

    を使って、firebaseにデプロイしていく

  8. ビルドが完了すると、ホスティングURLが発行されるので、このホスティングURLをアクセスしてみます。

    Firebaseの管理画面から、Hostingでも見れる。

    https://view-firebase-hosting2.web.app/#/

    こんなURL。

  9. 正常に表示されれば成功。