[AWS] Lightsailを使ってWordPressブログを作ってみた〜②独自ドメイン設定編〜

# 前回の記事
https://qiita.com/Dev-kenta/items/e175c8960cf32624e28d

# 参考にした記事(Special Thanks)
https://jyn.jp/compare-domain-registrar/#i-15
https://qiita.com/Hikery/items/8933e1969c971eaa649d
https://qiita.com/fk_2000/items/545a835ba2f2a1d0a974
https://qiita.com/s-tyd/items/2b40fc88b78b49b84b35
https://tokoaruga.com/google-domains-registration/

# 前提
- AWS Lightsailでwordpressのインスタンスを作り終わっている
- ターミナルでviの操作をある程度できる

# 手順

## 1. 独自ドメインを取得する
ドメインレジストラサービスは有名なところだと「お名前.com」だったり、Lightsailと同じくAWSのサービスで Route53から取得するという手もあります。
今回は今まで使ったこと無かったので、Google Domainsを使って取得して進めていきます。
<img width="1362" alt="スクリーンショット 2020-05-06 14.21.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/fb64ff09-26e3-ddd6-ab39-d77ade7d12d1.png">
Google Domainsのサイトにアクセスするとこんな画面が表示されるので、取得したいdomainを入力して取得を押します。
<img width="1366" alt="スクリーンショット 2020-05-06 14.23.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/990e8756-a32f-768c-ca27-257d633a6701.png">
<img width="1362" alt="スクリーンショット 2020-05-06 14.23.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/eda3faf6-b775-a89b-f540-a630a4bcf862.png">
取得できるドメインがずらっと表示されます。UIがわかりやすいですね。さすがGoogleさん。
<img width="1364" alt="スクリーンショット 2020-05-06 14.24.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/b31d65e2-7c48-43a6-1724-dd2f83e3f1f0.png">
取得するドメインを選択したら、カートのアイコンをクリックします。今回は「.com」を選択しました。
そしてドメイン長いって心配されている。。がこのまま進めます。
<img width="1367" alt="スクリーンショット 2020-05-06 14.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/70a6868d-6d66-d3c4-3d26-b06ebcf0f941.png">
カートに入れるとあとは購入者情報を入力して支払いを完了させるだけになります。簡単！

## 2. LightsailでDNSゾーンを作成する
ドメインの取得が終わったら、LightsailのDNSゾーンを作成します。
<img width="1361" alt="スクリーンショット 2020-05-06 14.33.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/5d880b17-8a48-a1e1-dd22-eaf274970865.png">
Networkingタブを開いて、Create DNS zoonをクリックします。
<img width="1359" alt="スクリーンショット 2020-05-06 14.35.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/69167912-cba2-738e-d4fb-86d9d9185d01.png">
DNSゾーン作成画面に遷移したら、先ほど取得したドメインを入力してCreate DNS zoonをクリックすれば作成が完了します。
DNSゾーンを作成後はDMSゾーンのレコード設定を行います。
<img width="1355" alt="スクリーンショット 2020-05-06 14.50.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/a441d512-04a2-418f-bd32-65d993d3f7e5.png">
Add recordを押してA recordを選択、Subdomainの入力欄は@を入れてください。空では完了できなかったです。
A recordを設定したあとは、CNAME recordも設定します。
<img width="1355" alt="スクリーンショット 2020-05-06 14.54.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/4884341f-7dc5-5b8e-de3e-17309b06819f.png">
二つの設定後はこんな感じ。

## 3. 独自ドメインにネームサーバーの設定をする
次はGoogle Domainsの管理画面に戻ってネームサーバーの設定を行います。
<img width="1368" alt="スクリーンショット 2020-05-06 14.56.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/a4926e97-b04b-58a2-bd9e-d5c010693add.png">
左のサイドバーのDNSをクリックするとDNS設定画面に遷移するので、カスタムネームサーバーに切り替えてLightsailのName serversに表示されているものを全て登録していきます。
<img width="1356" alt="スクリーンショット 2020-05-06 14.57.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/563d11d7-6d22-ee57-8ad3-d5771dc6e807.png">
全て入力したら保存をクリック、48時間ほどかかります。みたいに表示されますが、僕の場合は5分かからずに終わりました。
登録が完了するのを待って、登録完了後に取得したドメインでLightsailで作成したWordPressの環境が表示されていればOKです。

## 4. Let's Encryptを導入する
このままだとhttps対応がされていないので、Let's Encryptでssl証明書を入れます。
Lightsailのssh接続を使うか、クライアントからsshで接続してください。
そして以下のコマンドを打つ。

```
cd /tmp
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto
./letsencrypt-auto certonly --webroot -w /opt/bitnami/apps/wordpress/htdocs/ -d [取得したドメイン]
sudo cp /etc/letsencrypt/live/[取得したドメイン]/fullchain.pem /opt/bitnami/apache2/conf/server.crt
sudo cp /etc/letsencrypt/live/[取得したドメイン]/privkey.pem /opt/bitnami/apache2/conf/server.key
sudo /opt/bitnami/ctlscript.sh restart apache
```
httpsでWordPress環境にアクセスしてみて、URLの左端に鍵マークが付いていれば成功です。

## 5. httpsへのリダイレクト設定をする
お次はhttpでアクセスされた時にhttpsにリダイレクトしてあげる設定も追加していきましょう。
以下のコマンドを打ちます。

```
vi /opt/bitnami/apps/wordpress/conf/httpd-prefix.conf
```

開いたファイルを以下のように変更

```
RewriteCond %{HTTPS} !=on
RewriteRule ^/(.*) https://example.com/$1 [R,L]
```
<img width="1281" alt="スクリーンショット 2020-05-06 15.55.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/973a83a9-b5d5-6515-9f9b-54d40ee04f1b.png">

次はWordPressのファイルにも設定を変更していきます。

```
vi /opt/bitnami/apps/wordpress/htdocs/wp-config.php
```
こちらも該当の箇所を以下のように変更

```
define('WP_SITEURL', 'https://[取得したドメイン]/');
define('WP_HOME', 'https://[取得したドメイン]/');
```

<img width="1244" alt="スクリーンショット 2020-05-06 15.54.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402204/edf5c79c-d3db-dfcf-c03b-a22baf8c36e2.png">

変更後httpでアクセスして、httpsにリダイレクトされればOKです。
キャッシュがの残っている場合があるので、一度サーバーをrestartしてから確認するといいかもしれません。

```
sudo /opt/bitnami/ctlscript.sh restart apache
```

# 6. お問い合わせフォームを設置する場合
Lightsailのインスタンスでメールを送ろうとすると、Eメールが有効になっていないため送れません。そのためSMTPサーバーを用意する必要があります。
今回は勉強も兼ねてAWS SESを使ってみました。
https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-enabling-email-on-wordpress
AWS公式に詳しくリファレンス載っているのでこの手順通りにやればできました。
後はWordPressのContactForm7なり別のプラグインを導入してお問い合わせフォームを設置すれば完了です。

# 出来上がったブログはこちら
https://remowork-engineer.com/
まだHello Worldしか記事ありませんw
これから書いてかなきゃなー。
今回は有料テーマ購入してみました。有料テーマは機能がいっぱいあって勉強になります。