k01ken’s b10g

He110 W0r1d!

Firebaseを使ってみる

Firebase

開発環境は、Windows 10 Pro(64bit)。

※事前に、Googleアカウントでログインしておいてください


今回は、FirebaseのHostingの機能を用いて、静的なindex.htmlをデプロイするまでやっていきたいと思います。


1.公式サイトへアクセス。使ってみるボタンをクリック。
f:id:k01ken:20210528234820p:plain

2.プロジェクトを作成ボタンをクリック。
f:id:k01ken:20210528234947p:plain

3.プロジェクト名をつけます。今回は、hello-firebaseとします。次に、続行ボタンをクリック。
f:id:k01ken:20210528235132p:plain

4.Googleアナリティクス(Firebase プロジェクト向け)と出ますが、これはそのままで、続行ボタンをクリック。
f:id:k01ken:20210528235344p:plain

5.アカウントを選択から新しいアカウントを作成をクリックし、今回は、hello-firebaseと入力して、保存ボタンをクリック。アナリティクスの地域は日本に変更して、Googleアナリティクスの規約に同意しますにチェックを入れて、プロジェクトを作成ボタンをクリック。

6.しばらく処理が行われて、完成したら、続行ボタンをクリック。
f:id:k01ken:20210528235853p:plain

7.ダッシュボードにリダイレクトします。
f:id:k01ken:20210529000014p:plain

8.試しにウェブアプリを作ってみるために、以下の画像にあるボタンをクリック。
f:id:k01ken:20210529000401p:plain

9.アプリのニックネームを入力し、今回は、hello-firebase-webappとし、このアプリのFirebase Hostingも設定します。にチェックを入れる。アプリを登録ボタンをクリック。
f:id:k01ken:20210529000556p:plain

10.後で使うためのJavaScriptのコードをテキストエディタに保存しておき、次へボタンをクリック。
f:id:k01ken:20210529000840p:plain

11.npmでFirebase CLIをインストールしておきます。そして、次へボタンをクリック。
f:id:k01ken:20210529001148p:plain

npm i -g firebase-tools

と入力し、インストール。

12.コンソールに進むボタンをクリック。
f:id:k01ken:20210529001512p:plain

13.次にFirebase用のプロジェクトをローカル環境に作成します。以下のコマンドを1行ずつ入力してください。

cd c:\
mkdir hello-firebase-webapp
cd hello-firebase-webapp
mkdir public

試しに、以下のhtmlファイルをindex.htmlという名前で、今作ったプロジェクト内のpublicディレクトリに保存します。
先ほどメモしておいた、scriptタグもここで追加しておきます。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Firebase Webapp</title>
    <meta charset="utf-8">
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/8.6.3/firebase-app.js"></script>
    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="/__/firebase/8.6.3/firebase-analytics.js"></script>
    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>
  </head>
  <body>
    <h1>Hello Firebase Webapp</h1>
  </body>
</html>

14.まず、firebaseのインストールが完了しているか、以下のコマンドを入力して確認。

firebase

以下のようにコマンド一覧が表示されたら無事にインストールされています。
f:id:k01ken:20210529120242p:plain

15.次にローカル環境とリモート環境を紐づけるために以下のコマンドを入力して、firebaseにログインします。

firebase login

Allow Firebase to collect CLI usage and error reporting information?と聞かれるので、yを入力し、Enterを押す。そうするとブラウザが起動して、認証画面に飛ぶので、現在、ログインしているGoogleアカウントを選んで、許可ボタンをクリック。以下の画面になったら成功です。
f:id:k01ken:20210529120622p:plain

16.次に、プロジェクトの初期化を行うために以下のコマンドを入力します。

firebase init
  1. Are you ready to proceed?にyと入力し、Enter。
  2. 今回は、Hostingだけにspaceキーでチェックを入れて、Enter。
  3. 今回は、Use an existing projectを選んで、Enter。
  4. 先ほど作ったプロジェクト名のあるプロジェクトを選び、Enter。
  5. What do you want to use as your public directory?という質問に、Enter。
  6. Configure as a single-page app (rewrite all urls to /index.html)?という質問に、nを入力しEnter。
  7. Set up automatic builds and deploys with GitHub?という質問に、nを入力しEnter。
  8. File public/index.html already exists. Overwrite?という質問に、nを入力しEnter。

これで完成。

17.最後に、以下のコマンドを入力して、デプロイします。

firebase deploy

Hosting URLと書かれたURLをブラウザにコピペして、アクセスすると、以下のように表示されます。
f:id:k01ken:20210529121459p:plain