FirebaseでWebサイトを公開するには

1. Firebaseのベネフィット

2. FirebaseでWebサイトを公開するステップ

2-1. node.js をダウンロード
2-2. node.jsをインストール
2-3. Firebase CLIをインストール
2-4. Projectを作成
2-5. Firebaseへログイン
2-6. ProjectをInitialize
2-7. Deployment

3. まとめ

1.Firebaseのベネフィット

  • ただであること(1GB までの file storage と 毎月10GB のデータトランスファー )
  • 簡単にSecureなWebサイトを作成できる。SSLがビルトインされているのでConfigurationの必要がない。
  • Realtimeデータベース(クラウド):自分のDBを作ったりFrameworkとしてAPIを使わなくてもよい。
  • ストーレージが良い。安全なファイルトランスファーやFirebaseのAppをダウンロードできる。
  • App Indexing:簡単にGoogle searchのIndexが作れる機能
  • Cloud messeging:メッセージの送信にコストがかからない。
  • 注意: Firebase Hostingはサーバサイドのコーディング(PHPの実行)が出来ない(しなくていい)のでWordpressはインストールできないです。

2.FirebaseでWebサイトを公開するステップ

2-1. node.js をダウンロード する。
node.jsとはオープンソースでサーバサイドでjavascriptを実行できます。プラットフォームは選びません。 nodejs.org/en/downloadから自分のプラットフォームに合わせてダウンロードします。私は Windows Installer (.msi) の64ビットを選択しました。

2-2. Node.js のインストール
次にダウンロードしたnode-v10.15.3-x64.msi(私の場合)をダブルクリックしてインストールします。

2-3. Firebase CLIをインストール
Firebaseのコマンドを実行するようにするために、コマンドラインから
npm install -g firebase-toolsをタイプ。
npmはNode Package Managerの略称です。Node.jsのパッケージを管理するために使用されます。

2-4. Project の作成
FirebaseにGoogleのアカウントでログインします。(gmailで大丈夫です)新しいプロジェクトを作ります(Add Project)。Analyticsの地域を日本にします。

2-5. Firebase CLIでログイン
コマンドラインに戻って自分のプロジェクトフォルダーにいき、Firebase CLIでログインします。firebase loginとタイプ。匿名でCLIの使用やエラー情報を収集するかと聞かれるのでYesと答えます。loginが無事終了すると以下のメッセージが出ます。

2-6. ProjectのInitialize
コマンドライン からfirebase init とタイプ。どのFeatureをセットアップするか聞かれるので、Hostingを選びます。 Select a default Firebase project for this directoryと聞かれるので作成したプロジェクトを選びます。そして、メインフォルダーを聞かれるのでそのままPublicで大丈夫です。そしてSPAとしてConfigureするかと聞かれますが、Index.htmlをOverrideしたくないのでNと答えます。Initializeが終了した後、 Publicのフォルダーが作られるのでその下に自分のHtml等を移動します。

Hosting を選びます。
ディフォルトにしたいプロジェクトを選びます。
Index.html をOverrideしたくないのでNと入れます。

2-7. ProjectのDeploy
最後にProjectをDeployします。firebase deployとタイプ。

3. まとめ

初めてFirebaseを使う場合は色々インストールが必要ですが、次回からは楽になるはずです。Windowsだからか、firebaseのコマンドが動かなくて、ちょっと苦労しましたが、最終的にDeploy出来きました。以下が私が作ったサイトです。

meissenlady-0223.firebaseapp.com

Leave a Reply

Your email address will not be published. Required fields are marked *