格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法 サーバー
スポンサーリンク

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

今人気のミニサイトのように、ちょっとしたサイトを作る際に、皆さんは何を使っているでしょうか。

エンジニアであれば、Middlemanなどのような静的サイトジェネレータを使えば良いでしょうが、ノンプログラマーやブロガーの方に取っては非常にコストが高いものです。

今回はそんな悩みを解決しつつ、サーバ代を格安で済ませる方法についてご紹介します。

Amazon S3、CloudFront、Route53を使って、格安で爆速なサイトを構築しよう!

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

今回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円程度で済みます。

項目価格
Amazon S3539円
容量10GB
データ転送量30GB
読み込み回数1,800,000回
書き込み回数10,000回
CloudFront607円
データ転送量25GB
リクエスト数1,800,000回
Route5388円
ホストゾーン数1
クエリ数800,000回
合計金額1,234円

大規模サイトになるとそれなりの額になる恐れもありますが、AWSでは設定した金額よりも請求額が超えそうになるとアラートが飛ばせます。

少なくとも、請求額で大爆死するという自体は起こりにくいと言えます。

この値段で超安定化していてかつ、爆速で利用できるのであれば安いくらいです。

Dockerでコンテナを作成する

それでは、早速環境を構築していきましょう。この環境構築手順は最初に1回行うだけで良いのでご安心ください。

今回の作業を行う上で必須ではありませんが、フリーのエディタである「Visual Studio Code」をインストールすることで、作業効率を上げることができますので、インストールすることをオススメします。
手順紹介でも基本的にVisual Studio Codeを利用しています。

本作業を行う上で必須な「Docker」は基本的にダウンロードしてきたインストーラを実行するだけで利用できるため、インストール手順については省きます。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

適当な作業用フォルダーを作成した後、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

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

すると、コンソールに下記のようなメッセージが流れます。

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へアクセスする

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ここまで完了したらWEBブラウザで「http://127.0.0.1」へアクセスします。すると上図の様にWordPressインストール画面が表示れるので、「日本語」を選択して「続ける」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

WordPressのサイト名設定、ログインユーザー作成画面が表示されるので、任意の物を入力して「WordPressをインストール」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

成功すると、作成したユーザー名が表示され、「ログイン」ボタンが表示されるのでクリックし、先ほど作成したユーザーでログインします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ログインすると無事ダッシュボードが表示されます。記事執筆当時はDockerコンテナで最新版を指定しても、4.9.5がインストールされていないので「今すぐ更新してください」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

するといつもの更新画面が表示されるので、サクッと更新します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

問題無くWordPress 4.9.5へアップデートできます。

WordPressの設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

WordPressを静的サイトとして構成する場合、いくつか設定を行う必要があります。

まずは必須プラグインである「StaticPress」と「Disable Responsive Images」をそれぞれインストールして有効化します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

さらに「StaticPress」とAmazon S3を連携させるプラグイン「StaticPress S3」をインストールします。

インストールするには、上図の通り「Download ZIP」をクリックしてプラグインを「staticpress-s3-master.zip」としてダウンロードします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

プラグイン追加画面に移り、「プラグインのアップロード」->「ファイルを選択」をクリックし、先ほどダウンロードした「staticpress-s3-master.zip」を指定し、「今すぐインストール」をクリックしてインストールした後、プラグインを有効化します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いて最初からインストールされている「Akismet Anti-Spam」と「Hello Dolly」プラグインを削除します。

本来であれば「Akismet Anti-Spam」を削除するなんて無いのですが、静的サイトではWordPressのコメント欄が利用できないためここで削除しておきます。

コメント欄を追加したいのであれば、Discuz!などを利用するようにします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いてパーマリンクの設定を行います。静的サイトで運用する場合、パーマリンクの最後に「.html」と必ず指定する必要がありますので、「カスタム構造」を選択して「/%postname%.html」もしくは「/%category%/%postname%.html」と入力して「変更を保存」をクリックします。

Route53の設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ここまで完了したら一旦AWSのコンソールへログインし、「Route53」の設定画面へ移ります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

「Create Hosted Zone」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

「Domain Name」には使用する独自ドメインを入力し、Typeを「Public Hosted Zone」に設定して「Create」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Hosted Zoneを作成すると、NSレコードが自動で作成されているので、独自ドメインのネームサーバーにこれらのアドレスを設定しておきます。

Amazon S3の設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いて「S3」の設定画面へ移ります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

S3の設定画面に移ったら、「Create bucket」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Bucketの作成画面が表示されるので設定を行うのですが、独自ドメインを利用してS3でWEBホスティングを行う場合、Bucket nameは必ず利用するドメイン名を指定する必要があります。

例えばhogehoge.comを利用する場合は、Bucket nameは「hogehoge.com」である必要があります。

Regionについては国内に住んでいるのであれば、「Asia Pacific (Tokyo)」を選択して「Next」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

オプションを設定する画面が表示されますが、特に弄らずそのまま「Next」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

権限を設定する画面が表示されますが、これも特に弄らず「Next」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

設定確認画面が表示されるので、特に問題無ければ「Create bucket」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

無事にBucketが作成できたら、Bucket一覧に先ほど作成したBucketが表示されるのでクリックして選択し、

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

「Properties」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

するとプロパティ設定画面が表示されるので、「Static website hosting」をクリックし、「Use this bucket to host a website」にチェックを入れ、Index documentに「index.html」、「404.html」と入力して「Save」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いて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には自分で利用する独自ドメインに変更します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Bucket Policyを保存すると、「This bucket has public access」と表示されますが、外部に公開するために作成したので無視してOKです。

IAMの設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

S3へ外部からアクセスするにはAPIキーを発行する必要があるので、今度は「IAM」の設定画面を表示します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いて、左欄の「Users」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

「Add user」ボタンをクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

User nameには任意のユーザー名を入力し、Access Typeの「Programmatic access」にチェックを入れて次へ進みます。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

権限を設定する画面が表示されるので、「Attach exiting policies directly」をクリックし、検索欄に「S3」と入力した後に表示される「AmazonS3FullAccess」にチェックを入れて次へ進みます。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

確認画面が表示されるので、問題無ければユーザーの作成を実行します。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ユーザーの作成が完了すると、Access key IDとSecret access key(Showをクリックすると表示されます)をそれぞれメモしておきます。

なお、このAccess key IDとSecret access keyは「絶対に」外部に漏らさないようにしてください。

StaticPressの設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

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」を指定して一旦「下部」の「変更を保存」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

すると、「S3 Bucket」欄が表示されるようになるので、先ほど作成したS3 Bucketをドロップダウンメニューから選択して「下部」の「変更を保存」をクリックします。

CloudFrontの設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いてCloudFrontの設定を行うため、再度AWSコンソールに移り「CloudFront」の設定画面に移ります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

CloudFrontの設定画面が表示されるので、「Create Distribution」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

デリバリーメソッドを選択する画面が表示されるので、「Web」の「Get Started」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ひとまず「Origin Settings」は飛ばして、「Distribution Settings」に移りSSL Certificate欄の「Request or Import a Certificate with ACM」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Add domain names画面が表示されるので、Domain name欄に「*.<独自ドメイン>」と入力して「Next」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いてドメインの検証方法を選択する画面が表示されるので、「DNS validation」を選択して「Next」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

確認画面が表示されるので、問題無ければ「Confirm and request」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

すると、Validation画面が表示されるので、独自ドメイン左にある矢印をクリックしてメニューを展開し、「Create record in Route 53」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

するとレコード作成の確認画面が表示されるので、「Create」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

問題無く作成できれば上図の通り、Successと表示されます。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

しばらくすると証明書のStatusが「Issued」に変わります。StatusがIssuedになったら、再度CloudFrontの設定画面に移ります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Origin Domain Nameのテキストエリアをクリックすると、作成したS3のBucketが自動で出てくるので選択します。

Origin IDはS3のBucketを選択すると自動的に入力されます。

続いて「Viewer Protocol Policy」を「Redirect HTTP to HTTPS」を選択します。

そうすることで、HTTPでアクセスしても自動的にHTTPSへリダイレクトされるようになります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

続いて「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」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

するとDistributionのDeployが始まります。これには30~1時間ほどかかるのでしばらく待ちます。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

しばらくするとStatusが「In Progress」から「Deployed」に変わります。

Route53のレコード設定

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

ここまで完了したら、先ほどRoute53で作成したHosted Zoneを開き、「Create Record Set」をクリックします。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

Created Record Setメニューが表示されるので、「Name」に「www」を、Aliasを「Yes」と選択します。

Alias Targetというテキストエリアが表示されるのでクリックすると、先ほど作成したCloudFront distributionが表示されるのでクリックし、「Create」をクリックします。

これで設定は全て完了です。

WordPressの静的サイト化

WordPressで記事を作成しただけではもちろんローカルからしかアクセスできないため、外部から閲覧することはできません。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

WordPressを静的サイトとして運用する場合、記事作成やプラグイン追加、本体やプラグインのアップデート、テーマの追加、変更を行ったあとは必ず、ダッシュボード左ペインの「StaticPress」をクリックして、

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

「再構築」をクリックする必要があります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

無事に再構築を終え、「https://www.<独自ドメイン>」にアクセスすると、ページが表示されるようになります。

格安で爆速なSSL静的サイトをWordPressでサクッと構築する方法

証明書も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

コメント