WordPressで作成したウェブサイトを静的ウェブサイトに自動変換して高速・低価格・安全に運営する
WordPressを使うと、大変便利にウェブサイトを運営することができます。一方、閲覧者がウェブサイトにアクセスするたびにページを生成するため、いくつかのデメリットが発生します。そこで、WordPressで作ったサイトを静的なファイル群に変換することにより、デメリットを解消することにしました。
WordPressのデメリット
WordPressを使うことによるデメリットはいくつかあります。
- 快適に閲覧するにはある程度高性能なサーバーを用いる必要がある
- 全世界に公開するため、セキュリティを確保しなければならない
まず1に関して、WordPressはサーバー上で動くアプリケーションで、閲覧者がアクセスするたびにページを生成します。アプリが毎回動くため、アクセスが集中するサイトではある程度高性能なサーバーが必要になります。高性能なサーバーは高価なため、運営コスト上昇に繋がります。まぁぼくのサイトはほとんとアクセスされていないため、全く気にする必要はないのですが……はは……
次に2に関して、サーバーを公開するということは大いなる責任を伴います。悪意ある攻撃者に備えねばなりません。自分のウェブサイトが消されるくらいであればまだいい方で、他のサイトのクラッキングの踏み台にされたり、マルウェアをウェブサイトに仕込まれたりすると、自分だけでなく他の人にも迷惑が及んでしまいます。
セキュリティ的な責任を果たすためには、サーバーを常に最新に保たねばなりません。ベースとなるlinuxの更新、phpやMySQL・nginxの更新、WordPress自体やプラグインの更新、ファイアーウォールの適切な設定など、気にしなければいけないことは多岐にわたります。マネージドなWordPressのサーバーを借りればこの辺の対応はお任せにできますが、そのかわりに少々高価です。
静的ウェブサイトの利点と欠点
これらの問題を解決するため、WordPressが生成するページやコンテンツを全てファイルに変換した上で、ウェブサーバーにそれらのファイルをアップロードし、公開することを提案します。このようにして公開したウェブサイトを静的ウェブサイトと呼ぶことにします。
静的ウェブサイトの利点は三つあります。
- 待たされることなく素早く閲覧できる
- クラッカーからの攻撃のリスクが下がる
- 運営コストを低減できる
1に関して、静的ウェブサイトを公開するウェブサーバーでは、アクセスのたびにphpが動くということはなく、表示スピードは向上します。また、ウェブサーバーを提供する会社によっては、適切に負荷分散したり、CDNを用いて静的コンテンツを世界中に配置したりなどを自動的に行なってくれ、この結果どの国からも高速にアクセスできるようになります。
2に関して、攻撃リスクはlinuxとnginx、ファイアーウォールなどに残ります。これらの更新や管理はウェブサーバーを提供している会社が担当してくれるため、ユーザーはセキュリティをあまり気にする必要がなくなります。自分のパスワードを適切に管理する程度でよくなるのです。
3に関して、WordPressを動かすサーバーは管理者と投稿者に限られるようになります。そのため、比較的安価なサーバーで十分な性能が出ます。管理者、投稿者がひとりであれば、WordPressを自分のパソコンに導入することで、サーバー代をゼロにすることすら可能です。
このとき、静的ウェブサイトを公開できるウェブサーバーは必要になります。ただ、無料で性能の高いウェブサーバーが数多く存在します。そのため、追加の費用はほぼゼロです。
以上のように、静的ウェブサイトを公開することには多くのメリットがありますが、一方でデメリットも存在します。
- コメントやメールフォーム、検索などの動的な機能は使えなくなる
せっかくWordPressで運営しているのに、コメントをもらえずメールを送るのもひと手間いるようになります。そのため、静的ウェブサイトとして公開するには、このデメリットを受け入れる必要があります。ほとんどが固定ページのコーポレートサイトや、コメントの受け付けないblogサイトなどは問題なく運営できるでしょう。
Amazon LightsailとCloudflare Pagesを用いた静的ウェブサイトの運営
ぼくはこれらの欠点を我慢できるため、WordPressで管理しているサイトを静的ウェブサイトに変換することにしました。
WordPressを運営するサイトはAmazon Lightsailにしました。仮想プライベートサーバー(VPS)というやつだそうです。更新するのは私だけなので、Localを使ってサーバーレスにしたほうが安いのですが、外出先のスマホからも更新したいことが多いため、とりあえずサーバーを借りることにしました。
Lightsailは性能は比較的低いかわりに安価です。いちばん安いプランの月5ドルで使っています。Lightsailはbitnamiというソリューションを用いてWordPressの環境一式をワンクリックで構築できるようになっています。ほんとうにぼんやりしながらワンクリックで済むため、とても便利です。ただ、各種アップデートは面倒そうです……最悪、更新しない時はサーバーを止めることも検討しています。停止するのもワンクリックなので手間はかかりません。
また、Lightsailには毎日スナップショットを取ってくれる機能があります。1週間前まで保持してくれますし、適宜自分でスナップショットを保管することもワンクリックでできます。バックアップに関することをほぼ考えなくても良いため、これだけでもLightsailを契約する価値はあるでしょう。ローカルで賄うとき、地味にバックアップって面倒なんですよね。
静的なコンテンツを公開するウェブサーバーはCloudflare Pagesを使うことにしました。無料でサイト数上限なし、バンド幅も上限なしです。1ファイルあたり25MByte制限とかがあるので、大きな動画などは乗せられませんが、とりあえずは大丈夫でしょう。コンテンツはCDNに乗っかるので超高速なはずです。PageSpeed Insightsではぼくのサイトごときでは差は全くわかりませんでしたが……ドメインもCloudflareで原価で買えるのでそうして管理もしてもらっています。
Simply Static Proを用いたGitHub経由のデプロイ
WordPressと静的なコンテンツを公開するウェブサーバーは決まりました。あとはWordPress上のコンテンツをファイル群に変換し、ウェブサーバーにアップロードする手法を検討する必要があります。
ぼくはこれにSimply Static ProというWordPressプラグインを使うことにしました。このプラグインを導入することにより、WordPress上のコンテンツをファイルに変換し、GitHubにあるユーザーのプライベートレポジトリにコミットしてくれます。コミットによるトリガーは、レポジトリに登録したCloudflare製のGitHub Appsによりwebhook経由でCloudflare Pagesに伝わります。そのトリガーによりCloudflare Pagesがgit checkout/updateし、そのまま全世界に公開されます。
このように、WordPress上でワンクリックするだけで変換し公開までいくのでとても便利です。ぼくのスカスカサイトでも公開まで1分くらいかかるので、速度はそこまで速くはありませんが、気にするほどではないでしょう。
ちなみに、GitHubは単にファイルの転送のための経由場所です。自分のアカウントでプライベートレポジトリを作るだけで済みます。お金もかかりません。
ただ、このSimply Static Proは有料です。毎年69ドルかかります。円安なので毎年1万円くらいかかります。いちばん高いですね……
ProではないSimply Staticは無料です。そのかわり、GitHubへのコミット機能がありません。変換したファイル群をzipにする能力はあるので、それを手動でCloudflareにアップロードすることができます。手間は少しかかりますが、こちらは無料でできるので、人によっては十分検討の余地はあるでしょう。
ぼくはスマホで更新することも多く、スマホではzipファイルのやりとりは難しいため、Pro版を使うことにしました。Pro版では他にも、画像サイズの最適化やminify、必要ないファイルの除外、謎の力による検索機能などが提供されます。どうやら事前にサイトのインデックスを作って、JavaScriptで検索するようです。
具体的な環境構築手順 – 手動版
最初に、今あるWordPressの環境にSimply Staticの無料版をインストールして、Cloudflareに手動でデプロイする手順を説明します。Cloudflareは無料でも自分のウェブサイトを公開できるので、アカウントがない人はこの際に作っておくのも良いでしょう。また、WordPressの環境がない人はDockerやLocalを使ってローカルでサイト構築をしてみてください。
まず、WordPressのプラグインからSimply Staticを検索してインストール、有効化します。次にダッシュボードのSimplyStaticの設定をクリックし、settingsのDeployをクリックします。DEPLOYMENT METHODにZIP Archiveを選び、Generate Static Filesをクリックします。少し待つとzipファイルがダウンロードされます。ただ、このzipファイルはディレクトリが深く作られていたり、Windows11の標準機能では展開できない名前が含まれていたりします。7-Zipであれば展開できるので、index.htmlのあるディレクトリを展開してください。
次に、展開したフォルダ内のすべてのファイルをCloudflareにアップロードして公開してみましょう。Cloudflareにアカウントを作成しログインします。左側のWorkers & Pagesをクリックし、作成をクリックします。Pagesタブを選び、アセットをアップロードするをクリックします。公開したいサーバー名をプロジェクト名として入力します。ここで入力したものは「https://(プロジェクト名).pages.dev」として公開されます。プロジェクトの作成をクリックします。最後にindex.htmlのあるフォルダを選択してDeployをクリックすると、前述のアドレスにウェブサイトが公開されます。
このように、毎回zipファイルのやりとりが生じますが、ほとんど手間をかけずに静的ウェブサイトを構築できます。しかも無料です。
具体的な環境構築手順 – Simply Static Pro版
Simply Static Pro版を使う場合は、ライセンスがWordPressをホスティングしているサーバーの名前に結びつくため、事前にカスタムドメインを登録しておく必要があります。ここでは、Cloudflareでドメイン登録する手法を説明します。
手順1: Cloudflareでドメインを登録し権威DNSサーバーで管理する
Cloudflare Registrarで新たなドメインを登録し、Cloudflare DNSに管理してもらいます。Cloudflareのアカウントを作成したのちに、ドメイン登録手順の公式ドキュメントに従い登録します。引き続き、DNSSECを有効化するのが良いでしょう。また、他のレジストラから得たドメインを移管する方法もあります。これらのドキュメントは英語ですが、ブラウザの翻訳機能を使えば問題なく読めます。
手順2: Amazon LightsailでWordPressをホストするサーバーを立ち上げる
まずAWSアカウントを作成します。次に、Amazon Lightsailを3カ月無料でお試しします。Lightsailのホームを訪れ、Create instanceボタンを押します。次の画面はほとんどデフォルトで大丈夫です。platformをlinux/unixに、blueprintをWordPressに(Multisiteじゃない方)、network typeをDual-stackに、sizeを$5のものを選びます。一番下のCreate InstanceをクリックするとWordPressをホストするサーバーが立ち上がります。割り当てられたGlobal IPはinstanceの画面で確認できます。
手順3: Lightsailに割り当てられたGlobal IPをDNSに登録する
Cloudflareの権威サーバーにDNSレコードを追加します。DNSレコードの追加手順に従い作業をします。Aレコードの追加になりますので、Aレコードの欄をご覧ください。ここで、サーバー名はネットワークに公開され、Simply Static Proのライセンス認証にも使われます。Name欄に自分で決定したサーバー名を、IPv4アドレスに手順3で確認したGlobal IP(xx.xx.xx.xxという形式の数字)を入れます。
登録作業が済めば、自分で決定した名前を使ってWordPressのサイトにアクセスできるはずです。ウェブブラウザで、「https://（自分で決定したサーバー名）.(手順1で登録したドメイン名)」にアクセスし、WordPressの初期ウェブサイト画面が出ていることを確認してください。
WordPressのダッシュボードにもアクセスしましょう。この時、ユーザー名は「user」です。
パスワードを見つけるのはちょっと面倒な作業が必要です。まず、左パネルのinstanceをクリックし、中央あたりにある今回決定したサーバーの名前をクリックします。下の方にある「Access default password」をクリックし、記述に従い実行すると、コンソールにパスワードが表示されます。
上記パスワードを用いてWordPressのダッシュボードにアクセスできることを確認してください。
手順4: Simply Static Proを購入しインストールする
Simply Staticのサイトを訪れてPro版を購入します。Number of Websitesを1に（もっと多くのサーバーでSimply Static Proを使いたい人は適切に設定する）、Buy Nowをクリックして支払いを済ませるとPro版がダウンロードできます。ダウンロードしたzipファイルをWordPressのダッシュボードのプラグインからアップロードしてインストール、有効化します。
まずはWordPressデフォルトの内容がデプロイできるか確認するため、WordPress上で固定ページや投稿の追加・編集はスキップします。
手順5: Simply Static ProとGitHubを連携する
GitHubのアカウント作成手順に従いGitHubのアカウントを作成します。次に、GitHub連携に従いSimply Static ProとGitHubを連携します。英語ですがビデオもあります。
手順6: Cloudflare PagesとGitHubを連携させデプロイする
Cloudflare Pagesの設定に従い、GitHubとの連携を行います。連携が終わると、GitHubの指定レポジトリからcloneしてきた内容が「https://ほにゃらら.pages.dev」にデプロイされます。ウェブブラウザで閲覧して見えることを確認してください。また、「https://(手順1で登録したドメイン名)」でも同じウェブサイトが閲覧できます。
おわりに
以上が今のlulliecat.comを提供している環境です。なかなか快適で安心できる環境を構築することができました。書き下してみると、Pro版使うのはなかなか面倒ですね…手動版でも十分に楽に更新できるので、皆さんも是非安全安心高速なウェブサイト運営をためしてみてください。