WordPressのウェブサイトを静的化し、Firebaseで配信する

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設定は以下のようになる。

WordPressのURL設定

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

WordPressの静的HTML化

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

キャッシュの無効化(Bitnamiの場合)

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


    ModPagespeed Off

sudo /opt/bitnami/ctlscript.sh restart apache

Pleskの場合は不要。

WordPress管理画面からの設定

Deployの設定は

WP2Staticのデプロイ設定

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を指定できる。

Firebase Hostingへのデプロイ

プロジェクトディレクトリ配下で

firebase deploy --only hosting

を実行する。

URLは

  • https://プロジェクト名.web.app
  • https://プロジェクト名.firebaseapp.com
  • https://www.marketechlabo.com

https://marketechlabo.comhttps://www.marketechlabo.comにリダイレクトされる。

Google Analytics for Firebase

詳細はこちら(以前の記事)

GCP/Firebase の記事一覧