Firebase Hosting でWebサイトを公開するまで

-

GoogleのFirebaseというクラウドサービスには無料プランがあって、ホスティングサービスが使える。もちろん広告とかつかないしHTTPSもデフォルトで利用できる。ちなみに認証サービスやストレージも無料割り当て分があるようだ。恐るべし巨大プラットフォーマー。

とりあえずホスティングを使ってみたのでWebサイトを公開するまでのメモ。基本的には公式ドキュメントがあるので、最低限必要なことを知るオーバービュー的なものとして残す。

Firebaseコンソールでの操作

Firebaseの利用を開始する

Googleアカウントは既に持っているものとする。Firebaseコンソール（https://console.firebase.google.com）へアクセスしてFirebaseを利用開始する。ボタン一つ。

Firebaseプロジェクトを作る

コンソールのメイン画面からプロジェクトを追加する。ちなみにここで付けたプロジェクト名がWEBサイトのデフォルトURLに使われる。一意な名前じゃなかった場合どうなるんだろう。

ローカルでの操作

Firebaseへコンテンツをデプロイするには、ローカルPCに作業環境を作る必要がある。なおこの時のローカル環境はWindows10。

Node.jsのインストール

Node.jsのサイトからダウンロードしてきてインストールする。一緒にパッケージマネージャのnmpがインストールされる。

Firebase CLIをインストール

FirebaseのクライアントであるCLIをインストールする。コマンドプロンプトからnmpを実行。

>npm install -g firebase-tools

インストール出来たら、FirebaseCLIにGoogleアカウントを覚えさせる。

>firebase login

プロジェクト用ディレクトリを作る

プロジェクトのローカル作業用のディレクトリを作成する。適当にフォルダを作ってそこでコマンドを実行する。

>firebase init

なんか色々と聞かれる

[セットアップする機能]
hostingだけ選択

[クラウド側プロジェクトの選択]
アカウントのプロジェクト一覧が出てくるので、さっきコンソールで作成したプロジェクトを選ぶ。

[公開ルートディレクトリの名称]
デフォルトはpublic。特に変えない。

[SPAを利用するか]
Yesにすると何かフレームワークでも入るんだろうか。とりあえずNo。

完了すると作業ディレクトリの下に

  • pulicフォルダ
  • .firebasercファイル
  • .gitignoreファイル
  • firebase.jsonファイル

が出来上がる。

コンテンツを作る

publicフォルダの下にWebサイトのコンテンツを作る。

アップロードして公開

以下のコマンドでプロジェクトにデプロイする。

firebase deploy

デプロイされたものはすぐに公開される。なおデプロイするたびに勝手にバージョン管理されていて。コンソールから過去の状態に戻したりできる。ただし容量制限にも含まれるので、必要ないなら適当に消す必要がある。

独自ドメインの利用

ついでに独自ドメインの登録方法。

ドメインを取得する

別途ドメインを取得してネームサーバを用意する。大抵はドメインサービスにネームサーバも用意されている。お名前.comとかXdomainとか。今回ここだけお金がかかっている。

Firebaseコンソールから登録

Firebaseコンソールの該当プロジェクトを開き、Hostingの設定から「カスタムドメインを追加」を行う。

手順に沿ってネームサーバ側に、googleが所有権を確認するためのTXTレコードと、アドレス解決のAレコードを追加する。

少し経つとアクセスできるようになる。

以上

いわゆる誰でも使えるホームページサービスと比べると多少は敷居がある。いや、FTPアカウントとか考えずにできるからそうでもないか？

コメント

コメントを投稿