目次
格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法
今人気のミニサイトのように、ちょっとしたサイトを作る際に、皆さんは何を使っているでしょうか。
エンジニアであれば、Middlemanなどのような静的サイトジェネレータを使えば良いでしょうが、ノンプログラマーやブロガーの方に取っては非常にコストが高いものです。
今回はそんな悩みを解決しつつ、サーバ代を格安で済ませる方法についてご紹介します。
Amazon S3、CloudFront、Route53を使って、格安で爆速なサイトを構築しよう!
今回WordPressを使って静的サイトを構成するにあたり、上図の様な構成を組みます。
まずはじめに、自身のPC上にDockerと呼ばれるコンテナ型仮想マシンをインストールし、その上でWordPressが動くコンテナを作成します。
自身のPC上で構築したWordPressで記事を作成し、「StaticPress」というプラグインを利用して静的サイトへ変換し、自動で「Amazon S3」上にファイルを転送します。
これだけでもアクセスできるのですが、Amazon S3だけではHTTPでしか公開できず、今後HTTPSサイトで無ければ様々なペナルティを受けることになるため、ここにさらに「CloudFront」というCDNを利用します。
その際、SSL証明書を用意する必要があるのですが、AWSコンテンツ内でのみ無償で利用できるSSL証明書を発行できる「Certificate Manager」を利用することで解決できます。
最後に、CloudFrontの配信URLをクラウドDNSサーバー「Route53」を利用して、自分で用意した独自ドメインでアクセスできるように設定します。
AWSって高くないの？
AWSときくと、普通のサーバーと比べて高くなるんじゃないの？と思いがちですが、特定サービスは個人でも十分利用できるくらい低価格で運用できちゃうんです。
例えば、月間3万PV程のサイトで下記のようなどんぶり勘定を行っても月額1234円程度で済みます。
[table id=90 /]
大規模サイトになるとそれなりの額になる恐れもありますが、AWSでは設定した金額よりも請求額が超えそうになるとアラートが飛ばせます。
少なくとも、請求額で大爆死するという自体は起こりにくいと言えます。
この値段で超安定化していてかつ、爆速で利用できるのであれば安いくらいです。
Dockerでコンテナを作成する
それでは、早速環境を構築していきましょう。この環境構築手順は最初に1回行うだけで良いのでご安心ください。
今回の作業を行う上で必須ではありませんが、フリーのエディタである「Visual Studio Code」をインストールすることで、作業効率を上げることができますので、インストールすることをオススメします。
手順紹介でも基本的にVisual Studio Codeを利用しています。
本作業を行う上で必須な「Docker」は基本的にダウンロードしてきたインストーラを実行するだけで利用できるため、インストール手順については省きます。
適当な作業用フォルダーを作成した後、Visual Studio Codeを開きます。
続いて、「ファイル」->「フォルダーを開く」をクリックし、先ほど作成したフォルダーを選択します。
フォルダーを選択すると、上図の様にようこそ画面が出てきますので、「新しいファイル」をクリックして空ファイルのまま保存を行います。
その際、ファイル名は「docker-compose.yml」と入力します。
ファイルの作成ができたら、「docker-compose.yml」を開き、下記の通り入力して保存します。
version: '3'
services:
db:
image: mysql:5.7
volumes:
- "./.data/db:/var/lib/mysql"
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
links:
- db
ports:
- "80:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
- "./html:/var/www/html"
Dockerを使ったことがある人からすると、WordPressコンテナのPortsが何故80:80なのかと疑問に思われるかも知れませんが、StaticPressの仕様上仕方なくそのまま80ポートを利用しています。
今回、DBとWEBルートの中身をPC上に保存するように、volumes設定を行っていますので、コンテナを再起動しても削除されることはありません。
なお、WordPressで利用するDBのユーザー名やパスワードが丸見えですが、外部に公開するわけではないためそのままで問題ありません。
ここまで完了したら、「表示」->「統合ターミナル」をクリックします。すると、上図の様にエディタ画面の下に「ターミナル」が表示されるようになります。
このターミナルで下記のコマンドを実行します。
docker-compose up -d
すると、コンソールに下記のようなメッセージが流れます。
Creating network "test_default" with the default driver Creating test_db_1 ... done Creating test_wordpress_1 ... done
dbとwordpressのコンテナが正常に作成できていればOKです。
以降はPCを再起動した際も自動的にWordPressコンテナが立ち上がってきます。
コンテナを停止するには
作成したコンテナを停止するには、まず下記のコマンドで現在実行中のコンテナをリストアップします。
PS C:\Users\syobon\iCloudDrive\work\site\test> docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES ca80f6d35c42 wordpress:latest "docker-entrypoint.s…" About a minute ago Up About a minute 0.0.0.0:80->80/tcp test_wordpress_1 5e5c54ea86a8 mysql:5.7 "docker-entrypoint.s…" About a minute ago Up About a minute 3306/tcp test_db_1
上記コマンドを実行して実行中のコンテナの「NAMES」欄をメモし、
PS C:\Users\syobon\iCloudDrive\work\site\test> docker stop
上記のようにdocker stopコマンドを利用することでコンテナを停止させることができます。
構築したWordPressへアクセスする
ここまで完了したらWEBブラウザで「http://127.0.0.1」へアクセスします。すると上図の様にWordPressインストール画面が表示れるので、「日本語」を選択して「続ける」をクリックします。
WordPressのサイト名設定、ログインユーザー作成画面が表示されるので、任意の物を入力して「WordPressをインストール」をクリックします。
成功すると、作成したユーザー名が表示され、「ログイン」ボタンが表示されるのでクリックし、先ほど作成したユーザーでログインします。
ログインすると無事ダッシュボードが表示されます。記事執筆当時はDockerコンテナで最新版を指定しても、4.9.5がインストールされていないので「今すぐ更新してください」をクリックします。
するといつもの更新画面が表示されるので、サクッと更新します。
問題無くWordPress 4.9.5へアップデートできます。
WordPressの設定
WordPressを静的サイトとして構成する場合、いくつか設定を行う必要があります。
まずは必須プラグインである「StaticPress」と「Disable Responsive Images」をそれぞれインストールして有効化します。
さらに「StaticPress」とAmazon S3を連携させるプラグイン「StaticPress S3」をインストールします。
インストールするには、上図の通り「Download ZIP」をクリックしてプラグインを「staticpress-s3-master.zip」としてダウンロードします。
プラグイン追加画面に移り、「プラグインのアップロード」->「ファイルを選択」をクリックし、先ほどダウンロードした「staticpress-s3-master.zip」を指定し、「今すぐインストール」をクリックしてインストールした後、プラグインを有効化します。
続いて最初からインストールされている「Akismet Anti-Spam」と「Hello Dolly」プラグインを削除します。
本来であれば「Akismet Anti-Spam」を削除するなんて無いのですが、静的サイトではWordPressのコメント欄が利用できないためここで削除しておきます。
コメント欄を追加したいのであれば、Discuz!などを利用するようにします。
続いてパーマリンクの設定を行います。静的サイトで運用する場合、パーマリンクの最後に「.html」と必ず指定する必要がありますので、「カスタム構造」を選択して「/%postname%.html」もしくは「/%category%/%postname%.html」と入力して「変更を保存」をクリックします。
Route53の設定
ここまで完了したら一旦AWSのコンソールへログインし、「Route53」の設定画面へ移ります。
「Create Hosted Zone」をクリックします。
「Domain Name」には使用する独自ドメインを入力し、Typeを「Public Hosted Zone」に設定して「Create」をクリックします。
Hosted Zoneを作成すると、NSレコードが自動で作成されているので、独自ドメインのネームサーバーにこれらのアドレスを設定しておきます。
Amazon S3の設定
続いて「S3」の設定画面へ移ります。
S3の設定画面に移ったら、「Create bucket」をクリックします。
Bucketの作成画面が表示されるので設定を行うのですが、独自ドメインを利用してS3でWEBホスティングを行う場合、Bucket nameは必ず利用するドメイン名を指定する必要があります。
例えばhogehoge.comを利用する場合は、Bucket nameは「hogehoge.com」である必要があります。
Regionについては国内に住んでいるのであれば、「Asia Pacific (Tokyo)」を選択して「Next」をクリックします。
オプションを設定する画面が表示されますが、特に弄らずそのまま「Next」をクリックします。
権限を設定する画面が表示されますが、これも特に弄らず「Next」をクリックします。
設定確認画面が表示されるので、特に問題無ければ「Create bucket」をクリックします。
無事にBucketが作成できたら、Bucket一覧に先ほど作成したBucketが表示されるのでクリックして選択し、
「Properties」をクリックします。
するとプロパティ設定画面が表示されるので、「Static website hosting」をクリックし、「Use this bucket to host a website」にチェックを入れ、Index documentに「index.html」、「404.html」と入力して「Save」をクリックします。
続いてPropertiesタブの隣の「Permissions」タブをクリックし、「Bucket Policy」をクリックして表示されるテキストエリアに下記の通り入力して「Save」をクリックします。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::hogehoge.com/*"
}
]
}
※hogehoge.comには自分で利用する独自ドメインに変更します。
Bucket Policyを保存すると、「This bucket has public access」と表示されますが、外部に公開するために作成したので無視してOKです。
IAMの設定
S3へ外部からアクセスするにはAPIキーを発行する必要があるので、今度は「IAM」の設定画面を表示します。
続いて、左欄の「Users」をクリックします。
「Add user」ボタンをクリックします。
User nameには任意のユーザー名を入力し、Access Typeの「Programmatic access」にチェックを入れて次へ進みます。
権限を設定する画面が表示されるので、「Attach exiting policies directly」をクリックし、検索欄に「S3」と入力した後に表示される「AmazonS3FullAccess」にチェックを入れて次へ進みます。
確認画面が表示されるので、問題無ければユーザーの作成を実行します。
ユーザーの作成が完了すると、Access key IDとSecret access key（Showをクリックすると表示されます）をそれぞれメモしておきます。
なお、このAccess key IDとSecret access keyは「絶対に」外部に漏らさないようにしてください。
StaticPressの設定
S3の設定が完了したら再度WordPressの設定に戻ります。
ダッシュボード左ペインの「StaticPress」-「StaticPress設定」をクリックします。
ここで注意して頂きたいのですが、「StaticPress 設定」と「StaticPress S3 Option」はそれぞれ別プラグイン扱いなので、まとめて設定したから「変更を保存」をクリックすると、片一方の設定が保存されないので注意が必要です。
まず、StaticPress設定の「静的サイトURL」には「https://www.<独自ドメイン>/（hogehoge,comなど）」を、「出力先ディレクトリ（ドキュメントルート）」は「/static」を後ろに追記します。
ここまで入力できたら「上部」の「変更を保存」をクリックしてStaticPress 設定を保存します。
続いて、StaticPress S3 Optionの「AWS Access Key」に先ほどメモした「S3のAccess key ID」を、「AWS Secret Key」に先ほどメモした「S3のSecret access key」をそれぞれ入力し、AWS Regionは「AP_NOARTHEAST_1」を指定して一旦「下部」の「変更を保存」をクリックします。
すると、「S3 Bucket」欄が表示されるようになるので、先ほど作成したS3 Bucketをドロップダウンメニューから選択して「下部」の「変更を保存」をクリックします。
CloudFrontの設定
続いてCloudFrontの設定を行うため、再度AWSコンソールに移り「CloudFront」の設定画面に移ります。
CloudFrontの設定画面が表示されるので、「Create Distribution」をクリックします。
デリバリーメソッドを選択する画面が表示されるので、「Web」の「Get Started」をクリックします。
ひとまず「Origin Settings」は飛ばして、「Distribution Settings」に移りSSL Certificate欄の「Request or Import a Certificate with ACM」をクリックします。
Add domain names画面が表示されるので、Domain name欄に「*.<独自ドメイン>」と入力して「Next」をクリックします。
続いてドメインの検証方法を選択する画面が表示されるので、「DNS validation」を選択して「Next」をクリックします。
確認画面が表示されるので、問題無ければ「Confirm and request」をクリックします。
すると、Validation画面が表示されるので、独自ドメイン左にある矢印をクリックしてメニューを展開し、「Create record in Route 53」をクリックします。
するとレコード作成の確認画面が表示されるので、「Create」をクリックします。
問題無く作成できれば上図の通り、Successと表示されます。
しばらくすると証明書のStatusが「Issued」に変わります。StatusがIssuedになったら、再度CloudFrontの設定画面に移ります。
Origin Domain Nameのテキストエリアをクリックすると、作成したS3のBucketが自動で出てくるので選択します。
Origin IDはS3のBucketを選択すると自動的に入力されます。
続いて「Viewer Protocol Policy」を「Redirect HTTP to HTTPS」を選択します。
そうすることで、HTTPでアクセスしても自動的にHTTPSへリダイレクトされるようになります。
続いて「Distribution Settings」へ移り、Alternate Domain Namesに「www.<独自ドメイン>」と入力します。
SSL Certificateは「Custom SSL Certificate」を選択して、テキストエリアをクリックすると先ほど発行したSSL証明書が選択できるようになっているので選択します。
Security Policyは基本的に（TLS v1.1_2016 (recommended)」で良いのですが、好みで「TLSv1.2_2018」を選択します。
しょぼんブログではTLSv1.2のみ接続を許可しているので、僕が作成するときは基本的に「TLSv1.2_2018」を選択しています。
Support HTTP Versionsはデフォルトの「HTTP/2, HTTP/1.1, HTTP/1.0」のままにしておきます。
Default Root Objectには必ず「index.html」と入力します。この設定を忘れるとAccess Deniedエラーが発生します。
ここまで設定できたら他はそのままで「Create Distribution」をクリックします。
するとDistributionのDeployが始まります。これには30～1時間ほどかかるのでしばらく待ちます。
しばらくするとStatusが「In Progress」から「Deployed」に変わります。
Route53のレコード設定
ここまで完了したら、先ほどRoute53で作成したHosted Zoneを開き、「Create Record Set」をクリックします。
Created Record Setメニューが表示されるので、「Name」に「www」を、Aliasを「Yes」と選択します。
Alias Targetというテキストエリアが表示されるのでクリックすると、先ほど作成したCloudFront distributionが表示されるのでクリックし、「Create」をクリックします。
これで設定は全て完了です。
WordPressの静的サイト化
WordPressで記事を作成しただけではもちろんローカルからしかアクセスできないため、外部から閲覧することはできません。
WordPressを静的サイトとして運用する場合、記事作成やプラグイン追加、本体やプラグインのアップデート、テーマの追加、変更を行ったあとは必ず、ダッシュボード左ペインの「StaticPress」をクリックして、
「再構築」をクリックする必要があります。
無事に再構築を終え、「https://www.<独自ドメイン>」にアクセスすると、ページが表示されるようになります。
証明書もAmazonが発行した物がキチンと設定されているので、SSL化もこれでOKです。
Tips1 子テーマがうまく使えない
WordPressのテーマの中には親テーマと子テーマが分かれており、子テーマをカスタマイズしていく、といったスタイルの物が多くなってきました。
今回の静的サイトとして利用する場合は、適用順序に少し注意する必要があります。
子テーマを利用する場合はまず、親テーマを適用した状態でサイト再構築を実施し、その後子テーマを適用してからもう一度サイト再構築を行う必要があります。
Tips2 テーマによってはPHP Wariningが表示されてしまう
テーマによってはPHP Warningメッセージが表示され、再構築して生成された静的ページにもそのメッセージが表示されてしまう、といった問題に遭遇する恐れがあります。
その際は、Visual Studio Codeで「display-error-off.ini」ファイルを作成し、下記の通り入力して保存します。
続いて、統合ターミナルから下記コマンドすると、下記のような結果が得られます。
PS C:\Users\syobon\iCloudDrive\work\site\photo-blog> docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES a33e07aa4f90 wordpress:latest "docker-entrypoint.s…" 9 hours ago Up About an hour 0.0.0.0:80->80/tcp hogehoge_wordpress_1 a0cef7846b34 mysql:5.7 "docker-entrypoint.s…" 9 hours ago Up About an hour 3306/tcp hogehoge_db_1
上記のhogehoge_wordpress_1のCONTAINER IDをメモします。（今回だとa33e07aa4f90）
続いて下記コマンドを「display-error-off.ini」が保存されているフォルダ内で実行して「display-error-off.ini」をコンテナへコピーします。
docker cp display-error-off.ini a33e07aa4f90:/usr/local/etc/php/conf.d
ここまで完了したら、下記コマンドでコンテナを再起動します。
docker restart a33e07aa4f90
これでPHP Warningメッセージが表示されなくなるので、サイト再構築を実施します。
まとめ
初期設定自体は慣れていないと少し時間がかかりますが、一度構築してしまえばあとはWordPressを利用しているときとほとんど使い方は変わらないので、大変良い感じで運営できます。
ミニサイトを作るにはWordPress導入するコストあまりかけたくないし、かといってHTML書けない・・・といった方でもこの方法を使えば、従来のWordPressと同じ使い勝手でかつ、セキュリティ面の心配もなくなり、安くサイトを運用できるようになるので、ぜひともオススメしたいですね。
これはミニサイトだけに限らず、永代供養したいイベントのページや、絶対にサイトダウンさせたくないコーポレートサイトなどにも使えるので、利用者の幅は結構広いものかと思われます。
もし、この方法でサイトを構築しようと考えている方で、ここがどうしても分からないという場合は、コメント欄にてお気軽にご質問ください。できる限り答えていきたいと思います。
Source: Dcoker Hub | StaticPress | AWSドキュメント | Developers.IO
