WordPressで構築したサイトをFirebase　Hostingを使って公開した話

hakase

ブログの記事を高速で提供する為にやった作業の記録

サーバー管理とか難しい事はGoogleさんにお任せだ

neko

いいですね

hakase

参考した記事はこちら

WordPress で構築したサイトをFirebase Hosting – rinoguchi's techlog

neko

お世話になりました

hakase

この構成はこんな人におすすめ

Dockerをちょっと触った事がある
Firebaseもちょっと触った事がある
DNSの事が少しわかる
WordPressの仕組みを何となく知ってる
早いブログを作りたい
コメント機能等のサーバー側でごちゃごちゃする機能は不要
何かあったら自分で解決するという心を持ってる
ブログは家で書く

neko

そうなんですね

hakase

ちなみにこの記事はこれくらいのスコアが出ている

neko

早いですね

hakase

では私がやった手順を説明する

neko

よろしくお願いします

hakase

まずは適当な所にディレクトリを作成

Powershellでディレクトリを作成する例

mkdir D:\src\wordpress

neko

Windowsを使っているんですね

hakase

作成したディレクトリの直下に、docker-compose.ymlを作成

次のサイトの情報を元に一部変更

Quickstart: Compose and WordPress

Getting started with Compose and WordPress

services:
  db:
    # We use a mariadb image which supports both amd64 & arm64 architecture
    image: mariadb:10.6.4-focal
    # If you really want to use MySQL, uncomment the following line
    #image: mysql:8.0.27
    command: '--default-authentication-plugin=mysql_native_password'
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=somewordpress
      - MYSQL_DATABASE=wordpress
      - MYSQL_USER=wordpress
      - MYSQL_PASSWORD=wordpress
    expose:
      - 3306
      - 33060
  wordpress:
    image: wordpress:latest
    ports:
      - 8000:80
    restart: always
    environment:
      - WORDPRESS_DB_HOST=db
      - WORDPRESS_DB_USER=wordpress
      - WORDPRESS_DB_PASSWORD=wordpress
      - WORDPRESS_DB_NAME=wordpress
    extra_hosts:
      - localhost:${DOCKER_HOST_IP} 
    volumes:
      - ${DOCUMENT_ROOT}:/var/www/html_static/
volumes:
  db_data:

neko

変更した所はどこですか？

hakase

portsを変更して、volumesを追記

    ports:
      - 8000:80

    volumes:
      - ${DOCUMENT_ROOT}:/var/www/html_static/

メモ

portsを変更:ホストであるWindowsからブラウザでアクセスする為

volumesを追記:出力されたhtmlをホストから確認する為

neko

そうなんですね

hakase

Dockerの準備ができたので起動

デタッチド・モードで起動

docker compose up -d

neko

簡単ですね

hakase

起動したら、ブラウザからlocalhost:8000にアクセス

neko

あとは普通のワードプレスと同じ手順ですね

hakase

管理画面にログインできたら、ブログをhtmlとして出力する為のプラグインをインストール

Simply Static

Create a static website directly from your WordPress website with Simply Static.

neko

便利なものがあるんですね

hakase

SimplyStaticのインストールが終わったら設定

設定したもの

リンク先URL
- https://www.sleepingmonster.dev
ローカルディレクトリ
- /var/www/html_static/
追加するURL
- http://localhost:8000/sitemap.xml
- http://localhost:8000/robots.txt
除外するURL
- http://localhost:8000/wp-json
- http://localhost:8000/wp-login.php
- http://localhost:8000/wp-admin.*
- http://localhost:8000/comments.*
- http://localhost:8000/.*.php

neko

むずかしそうですね

hakase

sitemap.xml、robots.txtは雰囲気で設定した

次にパーマリンク設定

これを設定しないと投稿毎にindex.htmlが生成されてしまう

設定したもの

カスタム構造
- /%year%/%monthnum%/%post_id%.html

neko

地味ですが大切ですね

hakase

さて、一通り設定が終わったのでSymple Staticの診断を確認する

neko

一つ失敗してますね

hakase

これはいいんだ。これで完成

neko

そういうものなんですね

hakase

あとは生成ボタンを押してhtmlが出力される事を確認したら、公開

neko

まだ続くんですね

hakase

Firebase Hostingへデプロイする準備をする

neko

カタカナが多いですね

hakase

サーバーへアップロードするという事だ

neko

分かりやすいカタカナになりましたね

hakase

Firebase CLIのインストールは終わっていて

ブログ用のプロジェクトが作成済みという前提で進める

neko

頑張ってください

hakase

まずはPowerShellで最初に作成したディレクトリへ移動しよう

Powershellでディレクトリを作成する例

cd D:\src\wordpress

neko

全てはここから始まったんですね

hakase

ここからは英語ばかりだ、次のコマンドを入力

firebase init

neko

戦いはこれからですね

hakase

すると次の質問が帰ってくる。YESと回答

? Are you ready to proceed? ## 意訳：続ける準備はできた？
 -> YES

neko

長い闘いになりそうですね

hakase

長いので質問と回答を全部書く

? Which Firebase features do you want to set up for this directory?
 -> Hosting: Configure files for Firebase Hosting and (optionally) set up

? Please select an option: 
 -> Use an existing project
? Select a default Firebase project for this directory: 
 -> ******** (blog) ## 適宜書き換えてください

? What do you want to use as your public directory?
 -> ./html_static
? Configure as a single-page app (rewrite all urls to /index.html)?
 -> No
? Set up automatic builds and deploys with GitHub?
 -> No

neko

助かります

hakase

このままだとfeedがリンク切れになるのでリダイレクトの設定をする

設定方法は下記のようにfirebase.jsonの追記。

{
  "hosting": {
    "public": "./html_static",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    /** 追記した箇所ここから **/
    /** JSONにコメントは無いのでコピペする時は注意 **/
    "redirects": [ {
      "regex": "^(.+|)/feed",
      "destination": ":1/feed/index.xml",
      "type": 301
    } ]
    /** 追記した箇所ここまで **/
  }
}

neko

何に使うものなのかは分かりませんね

hakase

これですべての準備が完成。最後にデプロイのコマンドを実行