Firebase

Firebase Hosting を使ってみた

Firebase

Firebase Hosting とは

GoogleさんのFirebaeというサービスの中の一つで 静的なWebサイトを簡単手軽に公開出来る様です。HTML,CSS,Javascriptを組み合わせた様なサイトは問題ない様です。Bootstrapの様なCSSフレームワークを使った場合はどうなのか、まだわかりません。

公開までの手順

ローカルでの準備

公開用のプロジェクトフォルダを作成 フォルダ名は任意
このプロジェクトフォルダ直下に「public」フォルダを作成。フォルダ名は ”public” がデフォルト。
この public フォルダ配下に公開したいページのファイル群を配置する。

最終的にこの public フォルダ内が全て公開されるので公開したくないファイルは置かない様に注意。

Firebase コンソールを開く

Firebase で検索して Firebaseコンソールへ移動する

Google アカウントでログインする

プロジェクトの作成

Node.js をインストール

ホスティングの設定をする上で npm コマンドを使用するため Node.js をインストールします。
Node.js をググってインストールします。自動で npm コマンドもインストールされます。

Firebase CLI をインストール

以下 windows 環境での話になります。

コマンドプロンプトの画面にて実行

グローバルに使用できる firebase コマンドがインストールされます。

npm install -g firebase-tools
同じコマンドを再実行するだけで、最新バージョンに更新できる様です。

Firebase プロジェクトにアクセスする

ローカルマシンをFirebase アカウントに接続し、Firebase プロジェクトへのアクセスを取得します。

firebase login
2回目以降の firebase login では 既にログイン済みと表示される様です。

コマンドプロンプトでプロジェクトフォルダに移動

cd プロジェクトフォルダ名

サイトを初期化する

firebase init
矢印キーで移動してスペースキーで Hosting を選択

=== Project Setup プロジェクトフォルダの指定

意図したプロジェクトフォルダが表示されなかったので、[don’t setup default project] を選択した

=== Hosting Setup 公開ルートディレクト public を選択

What do you want to use as your public directory? => public
Configure as a single-page up(rewrite all urls to /index.html)? => No
File public/index.html already exists. Overwrite? => No
プロジェクトフォルダ直下に firebase.json .firebaserc .gitignore ができた
public フォルダ内に 404.html(Page Not Found) が作成された

いよいよサイトをデプロイする

firebase deploy
前でプロジェクトフォルダの指定がされてない(don’t setup default project)のでエラー発生
Run with – -project <projectId>の指示が出た。
この <projectId> を次の様に Firebase コンソールから取得した

エラーで再デプロイする為 Firebaseコンソールにて projectId を取得

プロジェクトIDを確認

再デプロイ

 firebase deploy – -project ”プロジェクトID”

公開URLの確認

デプロイが成功すると 「Hosting URL: https://xxx.firebaseapp.com」が表示されるのでブラウザから確認する。

使ってみた感想

  • サーバーの準備不要でとてもラクチン サイトの開発に注力できる
  • Node.jsさえインストールすれば1コマンドでデプロイできるのでシンプル。シンプル イズ ベスト!
  • シンプルなサイトの確認にも良いのでは
  • 無料枠があるのでお試しできる。簡単なサイトであれば運用も可かも。
  • 他のサービスもいろいろあるのでそれらを組み合わせて何かできそう。
  • 無料枠で独自ドメイン+SSL証明書付きで公開できそう

コメント