本ブログではたびたび静的ウェブ配信について説明してきたが、
個人で静的配信するなら決定版といえる方法を紹介する
目次
Netlifyとは
WordPressで静的サイトを生成し、Netlifyで公開する。Netlifyは
- 静的サイトのホスティング
- AWS Lambdaのような関数
- フォーム
などができる、サーバレスで何らかのサービスを配信するためのプラットフォームである。個人用途であれば大部分の機能を無料で使える（複数ユーザ、Basic認証などは有料）。
端的に言うと静的サイトの配信を無料でできるサービスである。リダイレクトや転送（リバースプロキシ）も可能でリスト形式で設定できる。動的コンテンツは別のサーバに設置してそこに転送するということも可能。独自ドメインも使用でき、自動でSSL証明書（Let’s Encrypt）も取得、適用、更新してくれる。これが無料とは至れり尽くせりである。
コンテンツのでデプロイは専用コマンド、管理画面からのアップロード、WordPressのプラグインから行う。FTPやSFTPには対応していない（外部のインテグレーションサービスを使えば可能だが）。
ほとんどのケースで必要なのは静的サイト
ブログや一般的なコーポレートサイトで使う動的機能はお問い合わせフォームと検索機能程度で、それ以外は静的HTMLだけで十分なことが多い。お問い合わせフォームはMailChimpなど別のサービスを使ってJavaScriptのみで実装できるケースも多いし、Netlifyでは簡単なフォーム機能なら搭載されている。
一方で複数ページを持つウェブサイトを作って管理するにはWordPressは便利である。それはPHPの動的なことをしない静的サイトにおいても当てはまる。メニューやカテゴリアーカイブなどのリンクの管理や、プラグインでブログカードなど便利なパーツを作るのはWordPressを使うのが楽。
仕組み
WordPressでページを生成し、それをNetlifyで配信する。
WordPressは管理画面からページを編集してプラグインを使って静的化してNetlifyに送るだけで、直接パブリックなアクセスを受けるわけではない。セキュリティ面で安全だし、スペックは低くてもいい。プラグインさえインストールできたら月額500円程度のホスティングで十分。配信自体はNetlifyから行う。
Netlifyの設定
サイトの新規登録
「Sites」のページの
Want to deploy a new site without connecting to Git?
Drag and drop your site folder here
と表示されている部分（赤枠）に空のフォルダをドラッグする
するとサイトが新規作成され、サイトの設定画面が表示される。
独自ドメイン
Netlifyで独自ドメインを使う場合、ドメイン全体の権限を委譲（delegate）し、NetlifyのDNSでドメインを管理することになる。サブドメインを他のホストで使っているケースでも、NetlifyのDNS設定でレコードを指定できるので問題はない。
サイトの設定画面から「Domain settings」をクリックするとデフォルトでNetlifyのサブドメインが割り当てられており、このドメインでアクセスできるようになっている。
「Add custom domain」をクリックして「www」の付かない親ドメイン名を登録する。
これがプライマリドメインという扱いで登録され、同時に「www」の付いたドメインも登録される。
「Check DNS configuration」をクリックするとドメインのDNSとしてNetlifyのサーバを設定するように指示されるので、自分のドメイン管理画面でそのように設定する。
DNSの登録後、それが浸透すると「Check DNS configuration」の表示が消える。なおサブドメインやTXTレコードを使った認証など、Netlifyに関係ないDNSの設定をする場合は「Options」から「Go to DNS panel」でDNSの個別レコードを登録できる。
SSL証明書
上記のドメインの登録が正しく行われると、登録したドメインのSSL証明書がLet’s Encryptから自動で取得される。更新も自動で行われる。
WordPressサーバの準備
サーバにはいくつか選択肢がある。
ホスティング
WordPress対応で、かつプラグインのインストールが可能なものを選ぶ。インストール済みですぐ使えるから簡単。
VPS
安いものでいいが、生のVPSだとウェブサーバとPHP環境とDBサーバとWordPressとSSL証明書取得ツール（certbot）を自前でインストールする必要がある。kusanagi対応しているVPSを使うとこれらのインストールやサイトの初期設定が楽で、複数サイト対応も容易。AWSのLightsailなどで使われているbitnamiは単一サイト用（複数サイト化は不可能ではないが設定が面倒）。だったらPleskのほうがいい。
クラウドインスタンス
AWS、GCPともにkusanagiのイメージがあるのでこれを使うのがおすすめ。編集、デプロイするときだけ起動すればいいので実は最低コストで済むかもしれない。
自前サーバ／PC
外部からアクセスすることはないのでPCにXAMPPとWordPressをインストールしてもいいが、面倒ではある。
※kusanagi：WordPressに最適にチューニングされたサーバのミドルウェア
管理画面のURLの準備
管理画面のURLにはIPアドレスではなくドメイン名を使う。そのドメインにSSL証明書を適用する。ホスティングであればそのサービスのサブドメインでもOK。VPS、クラウド、自前サーバであれば、ワイルドカードDNSを使うのがいい。
ワイルドカードDNS
ワイルドカードDNSとは具体例にするとわかりやすいのだが、
- 111.222.33.44.nip.io
- aaa.111.222.33.44.nip.io
- bbb.111.222.33.44.nip.io
を 111.222.33.44 に名前解決するサービスである（nip.ioの場合）
任意のIPアドレスベースのサブドメイン（111.222.33.44.nip.io）を、そのIPアドレスに対して名前解決する。さらにIPアドレスの前のサブドメイン部分（aaa.111.222.33.44.nip.io）を任意につけることができ、それも同様にそのIPアドレスに名前解決する。
つまりワイルドカードDNSであれば同じIPアドレスに対して複数のドメイン名を生成できるので、それをバーチャルホストで区切って1台のサーバで複数のサイトのWordPressを設置できる（単一のIPアドレスでのアクセスだと1サイトしか設置できない）。
管理画面用のホスト名
単一サイト運用の場合は
- https://111.222.33.44.nip.io/
複数サイト運用をする場合は
- https://aaa.111.222.33.44.nip.io/
- https://bbb.111.222.33.44.nip.io/
のようにサブディレクトリではなくドメインを分ける。
ローカルのPCの場合でも
- https://aaa.127.0.0.1.nip.io/
- https://bbb.127.0.0.1.nip.io/
として、XAMPPの設定で「aaa.127.0.0.1.nip.io」「bbb.127.0.0.1.nip.io」をそれぞれバーチャルホストにしてWordPressをインストールすれば複数サイト対応可能。
ワイルドカードDNSにはnip.io、xip.io、sslip.ioなどがある。
管理画面用のSSL証明書
今のブラウザではhttpでは警告が出まくって使えないし、編集用のサイト（http）と公開ページ（https）のプロトコル違いは不安なところがあるので、一般にアクセスされない管理画面でもhttps化しておくのが安全。つまり上記で取得した管理画面用のドメインにSSL証明書を割り当てる必要がある。また自前証明書でも警告が出るのでLet’s Encryptで取得しておく（だからIPアドレスではなくドメイン名にした）。
VPSやクラウドの場合
- aaa.111.222.33.44.nip.io
- bbb.111.222.33.44.nip.io
ローカルの場合
- aaa.127.0.0.1.nip.io
- bbb.127.0.0.1.nip.io
など、それぞれのサイトの管理画面のドメインに対してCertbotで証明書を取得し、Webサーバの証明書パスに配置する。このあたりはPleskやkusanagiを使うと自動でやってくれるので楽である。
WordPress内の設定
以下、WordPressの設置パスを
https://aaa.111.222.33.44.nip.io/
公開用のサイトを
https://www.example.com/
と仮定して（バーチャルホスト「aaa.111.222.33.44.nip.io」のルートディレクトリ）進める。
基本設定（URL）
WordPressの管理画面左メニューから「設定」 > 「一般」
- WordPress アドレス (URL)
- サイトアドレス (URL)
いずれも
https://aaa.111.222.33.44.nip.io
プラグインのインストール
WP2Staticをインストールする。
プラグインの設定
WordPressの管理画面左メニューの上にある「WP2Static」から
Deploy static website
必須
- 「Where will you host the optimized version of your site?」で「Netlify」を選択
- 「Destination URL」には末尾に「/」のつかない「https://www.example.com」
- 「Personal Access Token」はNetlifyの管理画面 Site settings > Site details > Site information で取得したAPI ID
- 「Site ID」はNetlify設定の以下のいずれも可
- Site settings > Site details > Site information のSite name
- Netlifyのサブドメイン
- 独自ドメイン
以下は任意
- 「Redirects File」でリダイレクトを希望するのであれば一覧で指定できる
- 「Headers File」でNetlifyのサーバが出力するHTTPヘッダの細かい指定ができる
Crawling
任意でクローリングの細かい指定ができるが、
- 「Exclude certain URLs」で公開したくないURLを指定できる
- 「Include additional URLs」で、HTMLから
hrefやsrcのリンクでたどれないためにクロールはされないが必要なURL（robots.txtやads.txtなど）を指定する
Processing
- 「Use relative URLs」と「Base HREF」は空欄
以下は任意ではあるが便利
- 「Rewrite Links in source code」ではソースコード中のhrefやsrcのURLを書き換える。「wp-content」などを書き換えてWordPress臭を消すことができる
- 「Rename Exported Directories」では転送するHTMLや画像のパス自体を書き換える。書き換えは上から順に適用される。
- 「Remove cruft」の各設定でWordPress臭を消すことができる
「Save current options」をクリックして設定を保存する。
デプロイの実行
「Start static site export」をクリックして待つ。
コスト
- 独自ドメイン
- WordPressのサーバ（ホスティング／VPS／クラウドインスタンス）
- SSL証明書：0円
- Netlify：0円（転送量は100GBまで。それを超えると有料）
まとめ
大規模になるならFirebase Hostingを使うのが安心かもしれないが、月数十万PV程度のサイトであればこれでいけそう。
[公開日：2021年1月26日]データ周辺の技術 の記事一覧
