初期費用0円&月額500円未満で個人のWEBサイトを運営する為の環境構築作業メモ


通常、個人ブログやWEBサイトの構築には、開発・運用の容易性の観点から初期費用+月額利用料を支払いレンタルサーバを契約するのが一般的です。
今回は以下の観点から、あえてレンタルサーバではなくAWS環境を利用し、個人ブログ・WEBサイトを公開するまでの構築作業を作業メモがてら記載します。

- 自己学習の要素も含めたい為、個人ブログ・WEBサイト用のレンタルサーバではなく、あえてAWSのサービスを利用。
- 利用しているプラットフォームはAWSサービスであり従量課金の為、利用しなければ停止する事で利用料は抑えられる。(※)
- 通常レンタルサーバの契約時に必要な初期費用も不要。利用状況に応じた、サーバの起動停止により利用料のコントロールも可能。(※)

:::note warn 
注意事項
・以下手順は、「AWS　Lightsail」を利用する為、インスタンスを停止していても定額の月額利用料（3.5USD）が掛かります。
・完全に従量課金(起動・停止で利用料をコントロール)としたい場合は、EC2等で構築する必要があります。
・またLightsailのインスタンスが不要になったら削除（インスタンスの停止ではなく）しないと月額利用料がかかります。
:::

## 環境前提/環境構成 

- AWSアカウントは作成済みの前提。　　
- AWSの「Amazon Lightsail」を利用し、bitnamiのWordPressにてサイトを構築。


## 作業内容

[1. AWS LightsailよりWordPress用インスタンスの構築](#1-aws-lightsailよりwordpress用インスタンスの構築)
[2. WEBサイト用ドメインの取得とDNS設定](#2-webサイト用ドメインの取得とdns設定)
[3. WEBサイトのSSL対応（HTTPS化）](#3-webサイトのssl対応https化)


## 1. AWS LightsailよりWordPress用インスタンスの構築 

- AWSマネジメントコンソールにログイン後、サービスメニューから[コンピューティング]->[Lightsail]を選択
![スクリーンショット 2021-12-11 16.04.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/43249d84-7422-8a1e-8aa8-287cfe0515e9.png)

- Lightsailのコンソール画面から、[インスタンスの作成]を押下
![スクリーンショット 2021-12-11 16.07.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/64636ffa-b0b4-1c2d-140a-235afe21fa79.png)

- インスタンスイメージの選択にて、今回は[Linux/Unix]を選択し、設計図の選択にて[WordPress]を選択
![スクリーンショット 2021-12-11 16.07.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/625ab099-4bb6-19ef-765d-e6f4bb23a5fe.png)

- インスタンスプランの選択にて、最小スペックの[$3.5(メモリ：512MB、CPU：1vCPU、ストレージ：20GB)] を選択
- インスタンスを確認については、任意のインスタンス名（今回は、「WordPress-2」）を入力
- [インスタンスの作成]ボタンを押下し、インスタンスを起動

![スクリーンショット 2021-12-11 16.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/c3ca62d2-a3f8-4648-2d26-06623608a751.png)

- 以下の通りインスタンスが起動
![スクリーンショット 2021-12-11 16.13.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/cccaf951-9120-2d6f-fb75-681952ddcda8.png)

- 後ほど、MacのTerminalからSSHでインスタンスにログインする為、キーペアをダウンロード
- [アカウントページ]を押下
![スクリーンショット 2021-12-11 16.14.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/1a35be2e-b471-950f-3000-2529bddbaa09.png)

- アカウントページの「SSHキー」タブから、[ダウンロード]を押下
![スクリーンショット 2021-12-11 16.15.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/ab621d9c-73f5-655f-d14d-5fce0e8bbeb6.png)

- 静的IPアドレスの設定のため、[ネットワーキング]から[静的IPの作成]を押下
![スクリーンショット 2021-12-11 16.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/3e4c3fac-0f2a-5fd1-2493-2752c8d50e58.png)

- 静的IPの指定欄にて任意の名前を設定し[作成]を押下
![スクリーンショット 2021-12-11 16.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/7021f492-31ac-36b4-627a-50c1eaafa159.png)



- まずはLightsailのコンソールページからブラウザにてSSH接続確認
- [接続]タブの[SSHを使用して接続]を押下
![スクリーンショット 2021-12-11 16.14.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/d8ebaade-5cb6-0f78-f535-235e3e774a2f.png)


- ブラウザからSSH接続できることを確認
![スクリーンショット 2021-12-11 16.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/631487a7-5878-cf98-d36b-3733f1a36f07.png)

- MacのTerminalからインスタンスにSSH接続する為、「ネットワーキング」タブから、インスタンスのパブリックIPアドレスを確認
![スクリーンショット 2021-12-11 16.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/5a36471a-d2e8-a4bb-b2d7-5f447c2b1b70.png)


- 先ほどダウンロードしたインスタンスの鍵、上記で確認したインスタンスのパブリックIPアドレスを指定しインスタンスにSSH接続
`ssh -i [ダウンロードした鍵] bitnami@インスタンスのグローバルIPアドレス`

```console:MacのTerminalからのSSH接続
[root@localhost lightsail]# ssh -i LightsailDefaultKey-ap-northeast-1_2.pem bitnami@111.222.333.444
Linux ip-172-26-3-107 4.19.0-18-cloud-amd64 #1 SMP Debian 4.19.208-1 (2021-09-29) x86_64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
       ___ _ _                   _
      | _ |_) |_ _ _  __ _ _ __ (_)
      | _ \ |  _| ' \/ _` | '  \| |
      |___/_|\__|_|_|\__,_|_|_|_|_|
  
  *** Welcome to the WordPress packaged by Bitnami 5.8.2-4         ***
  *** Documentation:  https://docs.bitnami.com/aws/apps/wordpress/ ***
  ***                 https://docs.bitnami.com/aws/                ***
  *** Bitnami Forums: https://community.bitnami.com/               ***
Last login: Sat Dec 11 07:20:22 2021 from 123.123.123.123
bitnami@ip-172-26-3-107:~$ 
```

- WordPressにログインする為の、管理者用パスワードを以下の通り確認

```console:WordPressの管理者パスワードの確認
bitnami@ip-172-26-3-107:~$ cat bitnami_application_password 
aGxxxxxxxxt6
bitnami@ip-172-26-3-107:~$ 
```

- ブラウザから、以下のURLを指定しWordPressの管理者画面にアクセス
`http://インスタンスのパブリックIPアドレス/wp-admin`
![スクリーンショット 2021-12-11 16.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/41e79265-ded2-76dd-5926-1228cd697854.png)


- WordPressの管理者のログイン画面が表示される為、Username：`admin`、Password：`先ほど確認したPW`を入力
![スクリーンショット 2021-12-11 16.30.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/4ab5e55f-2ef8-af0f-4b6c-ebf2d4cb7f07.png)

- WordPressの管理者画面にログイン完了
![スクリーンショット 2021-12-11 16.31.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/788a6978-19df-54e2-955f-11a89f007166.png)

- デフォルトは英語設定のため、[Settings]->[Site Language]を[日本語]に変更
![スクリーンショット 2021-12-11 16.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/e16e648c-ae16-37d3-4285-52a62ca6cdd6.png)

- 日本語への設定変更後、[外観]タブから外観を選択
![スクリーンショット 2021-12-11 16.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/2896dde1-f8ca-f43f-7efe-71da1a9e282c.png)

- 今回は、[lightning]というテーマを利用するため、[新規追加]の[検索フィルター]にテンプレート名を入力
- 検索後表示された、[Lightning]のテンプレートの[インストール]を押下
![スクリーンショット 2021-12-11 16.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/9171f1e0-a072-5e23-ee79-4a773cad0d98.png)

- 対象のテンプレート（Lightning）の[有効化]を押下
![スクリーンショット 2021-12-11 16.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/60b51edb-f88f-b08d-1ba3-6911112e41a4.png)

- 以上でWordPressのサイトのテンプレートが選択できた
![スクリーンショット 2021-12-11 16.37.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/71226b79-6a0e-1ae3-d26a-a63dfbf5b3e1.png)


## 2. WEBサイト用ドメインの取得とDNS設定

- サイトにアクセスする際、インスタンスのパブリックIPアドレスではなく、ドメイン名でアクセスできるようドメインを取得する 
- 今回は、GMOグループが提供する「お名前.com」にてドメインを取得する　`https://www.onamae.com/`
- まずは、上記アクセスしアカウントを作成。その後、[ドメイン]タブから[ドメイン登録]を押下
![スクリーンショット 2021-12-11 16.41.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/dd726025-8040-8200-4c1b-f4978923746c.png)

- 今回構築するサイトに利用したいドメイン名を検索欄に入力
![スクリーンショット 2021-12-11 16.51.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/d3187420-523b-a26b-8035-09213aeae970.png)

- 選択可能なドメイン名の中から好みのものを選択
![スクリーンショット 2021-12-11 16.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/95889c57-cd0f-de9e-cd5a-932ae9160c8f.png)

- ドメインを利用する為のサーバは、Lightsailにて個別に構築しており、オプションは特に不要であるため、[利用しない]を選択
![スクリーンショット 2021-12-11 16.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/559035a5-33d4-8a5a-9f31-fc036f9d05af.png)

- 申し込み内容を確認（ドメイン利用料はクレジットカード決済）
- 1年目は、1年間でドメイン利用料1円。なお2年目以降は1年で、1100円程度かかる。（ドメインにより異なる）
![スクリーンショット 2021-12-11 16.53.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/60be9fdf-ff8f-a3ad-1764-d5a52ca64770.png)

- ドメインが取得できたら、取得したドメインをDNSサーバに登録
- [ネームサーバの設定]タブから、[ドメインのDNS設定]を選択
![スクリーンショット 2021-12-11 16.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/196c2a41-b658-550b-1af4-5b03e0a6c69b.png)

- 今回設定するドメイン名を選択し、[次へ]を押下
![スクリーンショット 2021-12-11 16.55.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/e2399afb-6530-33b1-ade9-35a10553c07c.png)

- 「DNSレコード設定を利用する」の[設定する]を押下
![スクリーンショット 2021-12-11 16.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/0f31448b-17c7-4c23-88bf-0ffc38c2898f.png)

- Aレコードとして登録する為、以下の通り入力後、[追加]を押下
ホスト名：`空欄`
TYPE：`A`
TTL：`3600 （デフォルトのまま）`
VALUE：`LightsailインスタンスのグローバルIPアドレス`
状態：`有効（デフォルトのまま）`
![スクリーンショット 2021-12-11 16.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/263e0c63-49b0-1e47-e26f-29b4dd4fdf7c.png)


- 数分〜数十分経過後、ドメイン名でアクセスできるようになることを確認 `http://設定したドメイン名`
![スクリーンショット 2021-12-11 17.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/0015f5fa-babd-d0b0-0866-e46d8d078cb0.png)


## 3. WEBサイトのSSL対応（HTTPS化）

- 現在のサイトはHTTPでのアクセスとなっており、通信が暗号化されておらず、アクセス時ブラウザに警告画面が表示される
- 通信の暗号化によりセキュリティレベルを向上させる為、HTTPS通信での接続設定を実施
- 今回はより低価格でサーバを運用する為、Lightsailで利用しているbitnamiのWordPressに含まれる「bncert-tool」を利用
- 以下手順によりサーバ証明書を生成し、HTTP通信はHTTPS通信にリダイレクトされるよう設定  
`入力する箇所については、「*****[コメント]*****」と記載`

```console:bitnami/bncert-toolを利用したSSL証明書の設定
bitnami@ip-172-26-3-107:~$ sudo su -
root@ip-172-26-3-107:~# 
root@ip-172-26-3-107:~# /opt/bitnami/bncert-tool
----------------------------------------------------------------------------
Welcome to the Bitnami HTTPS Configuration tool.

----------------------------------------------------------------------------
Domains

Please provide a valid space-separated list of domains for which you wish to 
configure your web server.

Domain list []: practice-blog.net ← *****先ほど取得したドメインを入力*****

The following domains were not included: www.practice-blog.net. Do you want to add them? [Y/n]: n ← *****[n]を入力*****

Warning: No www domains (e.g. www.example.com) or non-www domains (e.g. 
www.example.com) have been provided, so the following redirections will be 
disabled: non-www to www, www to non-www.
Press [Enter] to continue: ← *****[Enter]を入力*****
----------------------------------------------------------------------------
Enable/disable redirections

Please select the redirections you wish to enable or disable on your Bitnami 
installation.



Enable HTTP to HTTPS redirection [Y/n]: Y　← *****[Y]を入力*****


----------------------------------------------------------------------------
Changes to perform

The following changes will be performed to your Bitnami installation:

1. Stop web server
2. Configure web server to use a free Let's Encrypt certificate for the domains: 
practice-blog.net
3. Configure a cron job to automatically renew the certificate each month
4. Configure web server name to: practice-blog.net
5. Enable HTTP to HTTPS redirection (example: redirect http://practice-blog.net 
to https://practice-blog.net)
6. Start web server once all changes have been performed



Do you agree to these changes? [Y/n]: Y ← *****[Y]を入力*****


----------------------------------------------------------------------------
Create a free HTTPS certificate with Let's Encrypt

Please provide a valid e-mail address for which to associate your Let's Encrypt 
certificate.

Domain list: practice-blog.net

Server name: practice-blog.net

E-mail address []: sample-email@gmail.com ← *****[E-Mailアドレス]を入力*****

The Let's Encrypt Subscriber Agreement can be found at:

https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf

Do you agree to the Let's Encrypt Subscriber Agreement? [Y/n]: Y ← *****[Y]を入力*****


----------------------------------------------------------------------------
Performing changes to your installation

The Bitnami HTTPS Configuration Tool will perform any necessary actions to your 
Bitnami installation. This may take some time, please be patient.

----------------------------------------------------------------------------
Success

The Bitnami HTTPS Configuration Tool succeeded in modifying your installation.

The configuration report is shown below.

Backup files:
* /opt/bitnami/apache/conf/httpd.conf.back.202112110806
* /opt/bitnami/apache/conf/bitnami/bitnami.conf.back.202112110806
* /opt/bitnami/apache/conf/bitnami/bitnami-ssl.conf.back.202112110806
* /opt/bitnami/apache/conf/vhosts/wordpress-https-vhost.conf.back.202112110806
* /opt/bitnami/apache/conf/vhosts/wordpress-vhost.conf.back.202112110806

Find more details in the log file:

/tmp/bncert-202112110806.log

If you find any issues, please check Bitnami Support forums at:

https://community.bitnami.com

Press [Enter] to continue:

root@ip-172-26-3-107:~#
```

- 必要に応じてLightsailインスタンスの再起動後、HTTPSで先ほどのサーバにアクセスできるようになったことを確認（警告もなし）  
`https://設定したドメイン名` ← このURLが本WEBサイトのURLとなる
![スクリーンショット 2021-12-11 17.19.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142483/fbb5f908-bf25-edad-4d1f-ce8c7d9f5d2c.png)


以上で、WEBサイトをインターネットに公開可能な状態まで設定完了。
後は、WordPressの管理者画面にログインし、固定ページや投稿する記事作成したり、デザインをカスタマイズしたりする。