PHP, Web

WordPressのサイトをNetlifyで静的にお手軽配信

yusuke / 2020年3月9日

前回のエントリで説明したとおり、静的コンテンツをNetlifyで配信するのがオシャレ。
WP2Staticの設定がうまくいっていないので、とりあえずwgetで再帰的に吸い取ることにしました。

1. Docker ComposeでWordPressをローカルに起動

以下のようなdocker-compose.ymlでWordPressを起動します。
参考:Docker入門（第六回）〜Docker Compose〜 | さくらのナレッジ

version: '3.3'

services:
  wordpress:
    image: wordpress:latest
    depends_on:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html

  db:
    image: mysql:5.7.27
    ports:
      - "4306:3306"
    volumes:
      - ./db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

このdocker-compose.ymlの設定だとWordpressディレクトリにWordPress本体のファイルが、db_dataディレクトリにMySQLのデータが格納されます。
Dockerでファイルシェアリングの設定をしておくのをお忘れなく:

docker-compose.ymlはIntelliJ IDEAなどのJetBrains IDEで読み込むとマウスクリックでdocker-compose upしたり、コンテナを落としたりイメージの削除をしたりコンテナ内のファイルシステムを見られたりデータベースに接続できたりと便利です。日本総代理店のサムライズムから買うと安かったり日本語テクニカルサポートが付いてきたりするのでお得です(宣伝)。

マウスクリックでdocker-compose up

コンテナの確認も楽々

データベースのメンテナンスも楽々

2. htmlから不要な要素を削除

静的コンテンツにするのでコメントはいりません。また、<link rel=‘shortlink’ href=‘http://xxxx/?p=1’ />みたいな投稿IDを持ったURLもいりません。
こういったメタデータをhtmlから削除するため、functions.phpに以下を追記しました。
参考: WordPressの高速化とセキュリティ向上を両立させる施策まとめ | アルコブログ

3. GitHubにリポジトリを用意

プライベートでもパブリックでも構いません。

4. wgetでサイトをスクレイプ

以下のコマンドで、サイトを吸い取りました。

#パスを相対表記の修正して、ホスト名をディレクトリ名として格納することなくカレントディレクトリに書き出す
$ wget --mirror --no-parent --page-requisites --convert-links --adjust-extension --html-extension --restrict-file-names=windows --no-host-directories --no-verbose http://localhost:8000
# http://localhost:8000/magictraysns/embed といった oEmbed のページをクロール
# http://debug.iframely.com/ でデバッグできる
# http://debug.iframely.com/?uri=https%3A%2F%2Fmagictray.samuraism.com%2Fabout%2Findex.html
$ wget --mirror --no-parent --page-requisites --convert-links --adjust-extension --html-extension --restrict-file-names=windows --no-host-directories --no-verbose\
 $(find . -name index.html| awk '{ sub("./", "http://localhost:8000/"); print }' | awk '{ sub("index\.html", "embed"); print }');
# wp-admin/imaged をコピー
$ mkdir -p wp-admin/images
$ cp  /Users/yusuke/Library/Mobile\ Documents/com~apple~CloudDocs/samuraism/magicTraySite/wordpress/wp-admin/images/* ./wp-admin/images/
# wp-admin/uploads をコピー
$ mkdir -p wp-content/uploads
$ cp -R  /Users/yusuke/Library/Mobile\ Documents/com~apple~CloudDocs/samuraism/magicTraySite/wordpress/wp-content/uploads/* ./wp-content/uploads/ 
# URLを http://localhost:8000 から https://magictray.samuraism.com へ書き換え
$ sed -i '' -e 's/http:\/\/localhost:8000/https:\/\/magictray.samuraism.com/g'  $(find -E . -type f -iregex ".*(html|=xml|%2F)" );
$ sed -i '' -e 's/http:\\\/\\\/localhost:8000/https:\\\/\\\/magictray.samuraism.com/g'  $(find -E . -type f -iregex ".*(html|=xml|%2F)" );
# oembedのファイル内で & が &amp; となっているとリンクが切れてしまうので修正
$ sed -i '' -e 's/\&amp;format=xml/\&format=xml/g'  $(find -E . -type f -iregex ".*(html|=xml|%2F)" );

5. GitHubにプッシュ

$ git remote add origin https://github.com/yusuke/my-netlify-site.git
$ git add .
$ git commit -m "initial commit"
$ git push

6. Netlifyの設定

Netlifyでアカウントを作ったらウィザードに従って、New site from Git→Gitub→リポジトリを選択→Deploy Site(オプションはデフォルトのまま)でサイトのパブリッシュが完了します。

 

7. サイトの確認

しばらくまって”Your site is deployed”と出たら上に表示されている https://ランダムな単語-ランダムな単語-16進数/ のURLでサイトにアクセスできます。


デプロイ中


デプロイ完了


サイトにアクセス。Let’s Encryptで最初からhttps化されてる！

8. カスタムドメインの設定

Settings→Domain management→Add custom domainより任意の（もちろん取得済みの)ドメインを追加します。


追加したら、お手持ちのネームサーバで

cname magictray pedantic-neumann-ff2cb0.netlify.com.

などと設定するとカスタムドメインでアクセスできるようになります。

出来たサイトがこちら↓

oEmbedも効いています！

#magicTraySNS

以上が駆け足で説明したWordPressサイトを静的にNetlifyで配信する方法でした。