Firebaseといえばネイティブアプリ（iOS, Android）のイメージがあるが、ウェブ運用でも便利。今回は純粋なWebサイトだけの運用のケースで環境をFirebaseに統一してみた。使うのは以下の機能

Firebase Hosting: 静的HTML、画像などのファイル配信
Google Analytics for Firebase: 計測

これらを独自ドメインのHTTPS環境で公開する。コンテンツはWordPressで管理、生成する。

ドメインは

https://marketechlabo.com
https://www.marketechlabo.com

wwwのないURLからwww付きのURLにリダイレクトする。

Firebaseの初期設定

sudo npm install -g firebase-tools
firebase login --no-localhost

Bitnamiを使う場合、ユーザbitnamiで
Pleskを使う場合、当該ドメインのユーザ権限で

mkdir ~/marketechlabo-firebase # ホームディレクトリにディレクトリ「marketechlabo-firebase」を作成
cd $_
sudo firebase init

Cloud FunctionsとHostingを有効にする。

Functonsのディレクトリはfunctions
Hostingのディレクトリはpublic

なおmarketechlabo-firebaseのパスは

Bitnamiの場合/home/bitnami/marketechlabo-firebase
Pleskの場合/var/www/vhosts/marketechlabo.111.222.33.44.nip.io/marketechlabo-firebase`

になる。

Firebase Hosting: 静的HTML、画像などのファイル配信

WordPressを静的HTML化してコンテンツをFirebase Hostingで配信する。なおWordPressを設置するサーバは負荷の心配がないので複数のサイトのWordPressを同居させてもOK

Bitnamiの場合デプロイ用のディレクトリにApache実行ユーザが書き込めるようにする。（Pleskでは不要）

chmod 777 /home/bitnami/marketechlabo-firebase/public

WordPressのURL設定

WordPressのドメインとサイトのドメインは異なる。

WordPressのURL：https://marketechlabo.111.222.33.44.nip.io
コンテンツを公開するURL：https://www.marketechlabo.com

WordPressのドメインはwildcard DNSを使うと便利。この場合WordPressのURL設定は以下のようになる。

ここでコンテンツ公開用のURLを入れると二度と管理画面にアクセスできなくなる。

WordPressの静的HTML化

プラグインWP2Staticを使う。このプラグインを使う場合、事前にサーバ側のキャッシュ設定は解除しておく必要がある。特にmod_pagespeedがデフォルトで有効になっている環境では、静的化時に対象サイトで無効化する必要がある。

キャッシュの無効化（Bitnamiの場合）

/opt/bitnami/apps/wordpress/conf/httpd-app.confに以下を追記

<IfModule pagespeed_module>
    ModPagespeed Off
</IfModule>

sudo /opt/bitnami/ctlscript.sh restart apache

Pleskの場合は不要。

WordPress管理画面からの設定

Deployの設定は

Target Directoryは

Bitnamiの場合/home/bitnami/marketechlabo-firebase/public
Pleskの場合/var/www/vhosts/marketechlabo.111.222.33.44.nip.io/marketechlabo-firebase/public

となる。

Processingの設定では

Use relative URLs: なし
Base HREF: なし
Rewrite Links in source codeとRename Exported Directoriesは好みに応じて指定すればいい。
Remove cruft: すべてチェック入れてOK

「Start static site export」をクリックすると先に設定したTarget Directoryにファイル一式が出力される。

コマンドライン

Bitnamiの場合

wp-cliがあらかじめインストールされているので、一度設定が済んだらコマンドラインで実行することも可能

/opt/bitnami/apps/wordpress/bin/wp wp2static generate
/opt/bitnami/apps/wordpress/bin/wp wp2static deploy

Pleskの場合

wp-cliはインストールされていないので自前で取得する必要がある。

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
/opt/plesk/php/7.3/bin/php wp-cli.phar --path=/var/www/vhosts/marketechlabo.111.222.33.44.nip.io/httpdocs/ wp2static generate
/opt/plesk/php/7.3/bin/php wp-cli.phar --path=/var/www/vhosts/marketechlabo.111.222.33.44.nip.io/httpdocs/ wp2static deploy

留意点

ただしこのプラグインでは現時点では404ページが生成されないので、手動で404ページを生成して404.htmlという名前のHTMLファイルにしてpublic配下に置く。

2回目以降はデプロイ用のディレクトリの内容を消去したうえで出力すること。そうしないとWordPress内で削除したページが残ったままデプロイすることになってしまう。

WP2Staticではmarkdown中のコード挿入部分でHTMLのタグがエスケープされないバグがある→使えない

リダイレクトの設定

リダイレクトを設定している場合、そのルールを書き出してmarketechlabo-firebase/firebase.jsonに記入する。書式は以下のようになる。

{
    :
  "hosting": {
      :
    "redirects": [{
    }, {
        "source": "/r-date-in-datatable/**",
        "destination": "/r-tips/",
        "type": 301
    }, {
        "source": "/r-zipcode-master/**",
        "destination": "/r-tips/",
        "type": 301
    }]
  }
}

ステータスコード301と302を指定できる。