LoginSignup
2

More than 3 years have passed since last update.

AWS で WordPress ブログを構築、ドメインを取得して公開するまで(Part 5)

Posted at

前回の続きです。
AWS で WordPress ブログを構築、ドメインを取得して公開するまで(Part 4)

今回は、
お問い合わせフォームを稼働させます。
SSL 化(https://)します。

早速参りましょう。

事前準備

AWS と WordPress の管理アカウントは持っている想定です。

料金

このセクションでは無料です。

お問い合わせフォームから自分宛にメールを送る

こちらを参考にさせてもらいました。ありがとうございます。

wordpress・SES経由でメールを送信できるようにする
https://qiita.com/gozuqi/items/099d064e8657f51f2b3e

Amazon SES と WordPress の WP Mail SMTP プラグインで実現します。

まずは、Amazon SES の設定から。
残念ながら、Amazon SES だけは東京リージョンでサポートされていなかったので、米国(バージニア州)からお届けします。
Screenshot_20190813[1].png

Email アドレスの検証を行う必要があるみたいです。
Email Addresses → Verify a New Email Addresss に受信するメールアドレスを入力します。
で、「Verify This Email Address」ボタンを押すと、確認メールが届くのでやたらと長い URL のリンクを踏むと承認されます。
Screenshot_20190813[2].png

承認されるとこんな感じになります。
Screenshot_20190813[3].png

次に SMTP 送信設定ですね。
Server Name と Port をメモしてから
SMTP Settings → Create My SMTP Credentials と進めます。
Screenshot_20190813[4].png

この画面では何も考えずに「作成」ボタンを押す、ということで良いみたいです。
Screenshot_20190813[5].png

次の画面で SMTP ユーザー名とパスワードが表示されます。
(ユーザーの SMTP セキュリティ認証情報を表示 というリンクに隠されていました)
この画面にある情報は後で使うので、このままにしておきましょう。
Screenshot_20190813[6].png

WordPress の設定に移ります。
参加サイト → サイトネットワーク管理 → プラグインより
WP Mail SMTP の「サイトネットワークで有効化」リンクをクリックします。
Screenshot_20190813[7].png

なんか、鳥がいますね。
ブログのサイドメニューに「WP Mail SMTP」が追加されています。
ここに先ほどメモした SMTP 情報を突っ込めば良いようです。
送信元アドレスには、受信したいメールアドレスを入力します。
Screenshot_20190813[8].png

下にスクロールすると、メーラーの設定があります。
メーラー:Other SMTP
SMTP ホスト:email-smtp.us-east-1.amazonaws.com
暗号化:TLS
SMTP ポート:587
認証:ON
SMTP Username:先ほど閉じないでそのままにしておいた AWS 画面の SMTP ユーザー名
SMTP Password:先ほど閉じないでそのままにしておいた AWS 画面の SMTP パスワード
入力し終えたら、さらに下にある「Save Settings」ボタンを押します。
Screenshot_20190813[9].png

送信テストが可能です。
Send To に受信したいメールアドレスを入力します。
HTML メール ON/OFF は完全に好みですね。
Screenshot_20190813[10].png

テストメールの受信に成功したら、お問い合わせフォームの設定に移りましょう。
送信先:受信したいメールアドレス
送信先:多分 IP になっているのでドメイン名に直します
メッセージ本文はお好みで変更可能です。
Screenshot_20190813[11].png

ではお問い合わせフォームから送信してみます。
ポチッと。

・・・送信完了ダイアログが出ないのは UI としてどうなんでしょうね。
よーく見ると、下の方に送信された旨のメッセージが表示されていました。
ともかくメールは送られたようです。
Screenshot_20190813[12].png

無事届きました。迷惑メール扱いされましたが。www
ちなみに Amazon SES は

Amazon EC2 でホストされているアプリケーションからの E メール送信
月に 62,000 件までは 0 USD。それ以上の E メール送信については 1,000 件ごとに 0.10 USD。

ということなので、6万2千通を超えなければ無料ですね。スパムでもこない限りは大丈夫そうです。
Screenshot_20190813[13].png

常時 SSL 化(SSL 証明書の発行)

せっかくここまで来たので、セキュアなブログを実現して SEO 対策しよう
という欲望にかられましたため、スクショ地獄ですみませんが、もう少しお付き合いください。

Amazon Certificate Manager は無料で SSL 証明書を発行してくれます。
ホントもう Amazon 様には足を向けて寝れませんね。

まずは
AWS Certificate Manager の画面で「証明書のプロビジョニング」を今すぐ始めます。
Screenshot_20190813[17].png

パブリック証明書のリクエストをしたいので、そのまま「証明書のリクエスト」ボタンを押します。
Screenshot_20190813[18].png

ドメイン名は接頭に何も付いていないものと、
ワイルドカード(*.)が付いているものを追加で指定しました。次に進みます。
Screenshot_20190813[19].png

多分、E メールの検証で合っていると思うので、
E メールの検証を選択して「確認」ボタンを押します。
Screenshot_20190813[20].png

「確定とリクエスト」ボタンを押して少し待つと、
どっさりメールが届きました。どれも同じようなものだったので 1 つ URL をクリックすると・・・
Screenshot_20190813[21].png

SSL 証明書についての確認画面が表示されます。
内容について問題がなければ「I Approve(賛成する)」ボタンを押すと、Success! と表示されるはずです。とりあえず、問題なく成功しました。
Screenshot_20190813[22].png

常時 SSL 化(ELB の作成)

証明書は無事発行されましたが、なんでも ELB(Elastic Load Balancing)などの AWS サービスでしか利用できないらしいです。
なので ELB を作成して、それをドメインと関連づける必要があるとのこと。

では行きましょう。
EC2 のロードバランサー画面から「ロードバランサーの作成」ボタンを押します。
Screenshot_20190813[23].png

Application Load Balancer を作成します。
Screenshot_20190813[24].png

手順1:ロードバランサーの設定です。
名前:WordPress(好きな名前で良いらしいのでコレ)
スキーム:インターネット向け
IP アドレスタイプ:IPv4
リスナー:HTTP 80, HTTPS(セキュア HTTP)443
続きます。
Screenshot_20190813[25].png

アベイラビリティーゾーン:
2つ以上のサブネットを選択する必要があるそうなので、上から2つを選択しました。次の手順に進みます。
Screenshot_20190813[26].png

手順2:セキュリティ設定です。
証明書タイプ:ACM から証明書を選択する(推奨)
証明書の名前:1 つしかなく、すでに選択済み
セキュリティポリシー:ELBSecurityPolicy-2016-08
設定できたら次の手順に進みます。
Screenshot_20190813[27].png

手順3:セキュリティグループの設定です。
セキュリティグループの割り当て:既存のセキュリティグループを選択する
WordPress のインスタンスを作成したときに、自動的に作成されていたものを選択しました。
次の手順に進みます。
Screenshot_20190813[28].png

手順4:ルーティングの設定です。
ターゲットグループ:新しいターゲットグループ
名前:WordPress(好きな名前で良いらしいのでコレ)
ターゲットの種類:インスタンス
プロトコル:HTTP
ポート:80
ヘルスチェックはそのまま、というか名前しか変更してませんでした。次の手順に進みます。
Screenshot_20190813[29].png

手順5:ターゲットの登録です。
インスタンスは 1 つしかないので選択して、ポートは 80 で「登録済みに追加」ボタンを押すと
登録済みターゲットに追加されます。確認できたら最後の確認手順に進みます。
Screenshot_20190813[30].png

手順6:確認です。
いろんなサイトを見て多分、これで合っていると思いました。「作成」ボタンを押します。
Screenshot_20190813[31].png

作成されました!
名前はコレで良かったのかしら、と一瞬思いましたが、まあ大丈夫でしょう。
Screenshot_20190813[32].png

常時 SSL 化(ELB とドメインの関連付け)

気が付いたら、デスクトップはスクショのファイルたちで埋め尽くされ、
山ほどのメールが受信トレイに溜まっていました。一旦整理して、さて再開。

ELB とドメインの関連付けは(今までと比べれば)難しくはないです。
パブリックホストゾーンの A レコードを編集し、
エイリアスを有効にします。エイリアス名は先ほど ELB の作成で名前を付けた WordPress ... を指定します。
折角なので、ドメイン名の接頭に blog. を付けることにしました。
「レコードセットの保存」ボタンを押すと設定が反映されます。
Screenshot_20190813[33].png

WordPress 側の SSL 対応

こちらのページを参考にさせていただきました。ありがとうございます。

AWSを使って、無料でサイトを常時SSL化 全手順(EC2+Word Press+ELB+Certificate Manager+Route 53) | 株式会社レオンテクノロジー
https://www.leon-tec.co.jp/blog/yoshida/7570/

使用したコマンドたちを下記に残しておきます。
$ cd apps/wordpress/conf
$ sudo vi htaccess.conf

htaccess.conf の末尾に追記してください。

<Directory "/opt/bitnami/apps/wordpress/htdocs">
        <IfModule mod_rewrite.c>
                RewriteEngine On
                RewriteCond %{HTTPS} !=on
                RewriteCond %{HTTP:X-Forwarded-Proto} !=https
                RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R,L]
        </IfModule>
        <IfModule mod_rewrite.c>
                RewriteEngine On
                RewriteBase /
                RewriteRule ^index\.php$ - [L]
                RewriteCond %{REQUEST_FILENAME} !-f
                RewriteCond %{REQUEST_FILENAME} !-d
                RewriteRule . /index.php [L]
        </IfModule>
</Directory>

変更を反映するために、Apache を再起動します。

$ sudo /opt/bitnami/ctlscript.sh restart apache
Unmonitored apache
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd stopped
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd started at port 80
Monitored apache
$ cd ~/apps/wordpress/htdocs
$ vi wp-config.php

wp-config.php の任意の箇所に追記してください。

define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('FORCE_SSL_ADMIN', true);
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
        $_SERVER['HTTPS'] = 'on';
}

最後に、
Part 4 で実践した「ドメイン名から IP にリダイレクトしてしまうのを防ぐ方法(解決編)」
に書いてある通り、URL が変更されたらデータベースと wp-config.php を書き換える必要があります。

変更前:http://murakamikoumuten.net/
変更後:https://blog.murakamikoumuten.net/

やり方は同じことをしているだけなので、割愛します。

まとめ

なんとか無事、ブログを立ち上げてドメイン取得、SSL 化まで出来ました。

10 年前は
レンタルサーバーを借りて
Web アプリをインストールして
ドメイン名を申請し、
SSL 化なんてコマーシャルサイトがやるものだと思ってましたが
今は AWS だけで半日もあれば完成するんですね。

いやあ、いろいろ勉強になりました。
AWS は機械学習、ロボット工学、IoT など、知らないことがまだまだたくさんあるので、時間ができたらツマミ食いしていきたいと思います。

最後までお読みくださり、ありがとうございました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2