shimar's blog

Jekyllで構築したブログをFirebase Hostingで公開する

2018-05-15
jekyllfirebase

このブログは、Jekyllで構築してGithub Pagesでホスティングしています。先日、Jekyll + Firebase Hostingという記事を読み、Github PagesからFirebaseに移行しようか検討していて、テスト用のサイトをJekyllで作成し、Firebaseでのホスティングを試してみたので、その過程を纏めておこうと思います。

Jekyllプロジェクトを作成する

ここでは詳細は割愛します。公式サイトに従って、プロジェクトを作成します。

Firebaseプロジェクトを作成する

Firebaseコンソールにアクセスし、ブログをホスティングするためのプロジェクトを作成します。

JekyllプロジェクトとFirebaseプロジェクトの関連付け

JekyllプロジェクトとFirebaseプロジェクトの関連付け、および管理には、firebase-toolsというFirebaseがnpmとして提供しているCLIツールを使用します。

firebase-toolsのインストール

次のコマンドでインストールします。

$ npm install -g firebase-tools

JekyllプロジェクトとFirebaseプロジェクトの関連付け

Jekyllプロジェクト直下で、firebase initを実行することで、

  • firebase.json
  • .firebaserc

が生成されます。 これらのファイルにより、Firebaseプロジェクトと関連付けることができます。

実際は、firebase initを実行すると、firebase loginを先に実行せよ、とのメッセージが表示されます。

$ firebase init

Error: Command requires authentication, please run firebase login

したがって、まずfirebase loginを実行します。 すると、ブラウザが起動し、Googleの認証画面が表示されるので、Googleアカウントでログインします。Firebase CLIの使用を許可すると、

✔  Success! Logged in as メールアドレス

が表示され、コマンドが終了します。

次に、firebase initを実行します。

まず、「次のFirebase CLIの機能のうち、どれを使用するか?」が聞かれます。

  • Database
  • Firestore
  • Functions
  • Hosting
  • Storage

今回は、Hostingを選択します。

次に、「どのFirebaseプロジェクトをデフォルトとして使用するか?」が聞かれます。 事前に作成しておいたFirebaseプロジェクトを選択します。

次に、「どのディレクトリを公開するか?」が聞かれます。 Jekyllはデフォルトで_siteディレクトリにビルドされるため、_siteを指定します。

次に、「SPAとして設定するか?」が聞かれます。 JekyllによるサイトはSPAではないので、Nと回答します。

事前に、jekyll buildを実行し、_siteディレクトリに404.html、index.htmlが存在する場合は、上書きするか否かを聞かれますので、Nと回答します。

すると、前述の通り、

  • firebase.json
  • .firebaserc

がそれぞれ、次のような内容で生成されます。

firebase.json

{
  "hosting": {
    "public": "_site",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

.firebaserc

{
  "projects": {
    "default": "Firebaseプロジェクト名"
  }
}

Firebase Hosting

Firebase Hostingについて、ここでは詳細は割愛しますが、公式サイトで、

Firebase Hosting は、ウェブアプリ向けの高速で安全性の高い静的ホスティングを提供します。

とある通り、静的なWebサイトをホスティングしてくれる機能です。

ビルドとデプロイ、公開停止

Fireabase Hostingを使って、静的サイトをホスティングするには、

  • ホスティングするリソースを生成する。
  • Firebaseにデプロイする。

の手順を踏むことになります。

前者は、今回のようにサイトをJekyllで作るので、Jekyllのコマンドで実施します。 後者は、firebase-toolsのコマンドで実施します。

ビルド

Jekyllのサイトをビルドするには、

bundle exec jekyll build

を実行します。これにより、_siteディレクトリが作られ、その中にサイトのコンテンツが格納されます。

デプロイ

デプロイは、

firebase deploy

を実行します。 すると、

=== Deploying to 'プロジェクト名'...

i  deploying hosting
i  hosting: preparing _site directory for upload...
✔  hosting: 14 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/[プロジェクト名]/overview
Hosting URL: https://[プロジェクト名].firebaseapp.com

という出力が得られます。

そこで、実際にhttps://[プロジェクト名].firebaseapp.comにアクセスすると、 おおおお、サイトが公開されました。

公開停止

Firebase Hostingを使用して公開したサイトを停止するには、

firebase hosting:disable

を実行します。

すると、

? Are you sure you want to disable Firebase Hosting?
  This will immediately make your site inaccessible! Yes
✔  Hosting has been disabled for [プロジェクト名]. Deploy a new version to re-enable.

と出力され、数分すると以下のページが表示されるようになり、アクセスできなくなります。

jekyll firebase hosting site not found

この後、再度firebase deployを実行すると、新しいバージョンとしてコンテンツがアップロードされ、 再びアクセスできるようになります。

カスタムドメイン

Firebase Hostingでは、デフォルトでhttps://[プロジェクト名].firebaseapp.comというURLでサイトが公開されます。 これをカスタムドメインで公開することも可能で、かつSSLも有効になります。

おわりに

Jekyllで構築したブログをFirebase Hostingでホスティングする方法について纏めました。 今回は、Jekyllなサイトを対象としましたが、例えばVue.jsや、Nuxtで 構築したアプリケーションをホスティングするのも簡単にできそうです。

©2016-2023 shimar