個人ブログを世に晒す 設定編 EP.2

[前回](https://qiita.com/s-tyd/items/29ff35daef58a52173ad)の続きです。

前回はクリックのみでWordpress付のサーバーを立てました。

今回はブログを運営していく上で必要とされる

- 独自ドメインの設定
- サイトのSSL化
- パーマリンクの設定

を設定していきたいと思います。

## 独自ドメインの取得
私はGoogleが大好きなのでGoogle Dmainsで取得しました。
（そもそも~~某ドメイン業者サイト~~のチープ感があまり好きじゃない）

適当に欲しいドメインを検索します。
Google Dmains
https://domains.google/

お名前ドットコム
https://www.onamae.com/

MuuMuuDomain
https://muumuu-domain.com/domain/price

特にこだわりがない人は一番安いところで取得しましょう。
※二年目から値段が変わるとかよくあるのでお気をつけて。

**※Whois情報が公開される場合があるので注意してください。**
[お名前.comのwhois情報公開代行に注意しろッ！ - インターネット漂流記](https://castawaystory.net/%E3%81%8A%E5%90%8D%E5%89%8D-com-who-is/)


## 独自ドメインの設定
私はGoogle Domainsでドメインを取得しているのでここから**Google Domains**での解説になります。

ログイン後に取得しているドメインの一覧が見れます。
ドメインをクリックして詳細画面に遷移します。
![bandicam 2019-04-19 22-51-38-283.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/af8c1bef-332f-5e26-9b59-c85a13b93e2a.jpeg)



左バーのDNSをクリック後、カスタムリソースレコードを編集します。
![bandicam 2019-04-19 22-54-06-392.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/21c2ca1c-f321-d542-1bd8-9ffdab7550ea.jpeg)

一列目のレコードに前回デプロイした**サーバーのアドレス**を入力します。
**GCP→左メニューのComputeEngine→VMインスタンス**よりIPアドレスを確認できます。
![bandicam 2019-04-19 22-59-28-587.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/5e94fe1d-0e0e-adc8-c7de-0513f086bab1.jpeg)


二列目は先ほど**自分で取得したドメイン**を入力します。

以上でドメインの設定は終了です。


**五分～十五分**ほどで反映されるので次の作業を進めます。


## サイトのSSL化 とは
SSL化とは簡単に言うとWebサイトのアドレスを「**http**」から「**https**」にすることです。

あなたが今見ている記事のアドレスも「**https**」になっていると思います。
https://qiita.com/

**https**に変更することによってサイトのセキュリティ性が向上します。
ちなみにGoogle Chromeでhttpのサイトに接続すると「保護されていない通信」と表示されます。

詳しい情報はここでは説明しませんので、気になる方は下記サイトの閲覧をお勧めします。
[常時SSL化で押さえておきたいメリットとデメリット【Webサイト運営者向け】](https://jpdirect.jp/ssl/aossl.html)


## サイトのSSL化
下記サイトを参考にSSL化していきます。
[Free SSL Certificate Setup for WordPress on Google Cloud (Click-to-Deploy)](https://www.onepagezen.com/free-ssl-certificate-wordpress-google-cloud-click-to-deploy/)

先ほどIPアドレスを確認した画面より、SSHのボタンをクリックします。
![bandicam 2019-04-19 23-18-02-693.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/a1cfcf35-eb79-1a07-d024-25de1f891c13.jpeg)

別画面でこのようなページが開かれます。
![bandicam 2019-04-19 23-19-20-868.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/bd88ec5b-1d75-2d27-511c-64ad8cfee831.jpeg)

なんとVMに接続できました。すごいです。
![bandicam 2019-04-19 23-20-18-302.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/4beb2f70-669b-7848-49b7-2d2723fd8b7c.jpeg)

### Certbotをインストール
接続したVMにLet's Encryptが提供するCertbotをインストールします。
[Let's Encryptとは？](https://qiita.com/daiki_44/items/a3616390f277722b97e0#1lets-encrypt%E3%81%A8%E3%81%AF)

Certbotをインストールするためのコマンドを実行します。
`wget https://dl.eff.org/certbot-auto && chmod a+x certbot-auto`
![bandicam 2019-04-19 23-47-43-326.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/882cf75c-ba23-67d2-b234-d6847fc1391a.jpeg)

インストールが完了しました。
![bandicam 2019-04-19 23-46-21-352.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/7068b6e3-abcf-43b6-8aab-03896b6c295a.jpeg)


### 証明書を作成
hoge.com を 先ほど取得したドメイン名を入れてください。
www も入れておきます。

`./certbot-auto certonly --webroot -w /var/www/html/ -d hoge.com -d www.hoge.com`

![bandicam 2019-04-19 23-49-22-476.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/4fa12e36-35cc-ecf0-fa59-61b841f6a0a9.jpeg)


証明書の適応を行います。
行いたいところですが同じ記事を参考にしている記事を発見したので続きはこちらでお願いします。
[GCPで作成したWordpressのSSL対応](https://qiita.com/Yuya_Nishizaki/items/4a2413fc2c07aca5d193)


## パーマリンクとは
私もパーマリンクは何なのか知りませんでした、URLにこだわりがある人は重要なのでちゃんと設定しておきましょう

[パーマリンクの使い方 - WordPress Codex 日本語版](https://wpdocs.osdn.jp/%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
>パーマリンクとは、ブログの個々の投稿、カテゴリーなどの投稿一覧ページへの恒久的（半永久的）な URL です。
>パーマリンクは、他のブロガーがあなたの投稿やセクションにリンクを張るときや、投稿へのリンクを Eメールで送ったりするときに使います。
>個別の投稿への URL は常に存在して決して変らないようにすべきです。そういう訳で、「perma」リンクといいます。

## パーマリンクを設定する
下記アドレスからWordpressにログインします。
`http://あなたのアドレス/wp-admin/`
![bandicam 2019-04-21 22-29-09-497.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/250e52a2-4add-b955-c66d-6abed77bb29f.jpeg)


パーマリンクを設定する前に言語設定を英語に変更します。
**Settings→General→Site Language**を`日本語`にします。
（`TimeZone`もついでに`+9`に変更しておきましょう）
![bandicam 2019-04-21 22-33-26-465.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/59321626-4cfb-cdec-e6e5-6b6226085250.jpeg)

下部に`SaveSetting`があるので押下してください。

左メニューの設定より、パーマリンク設定を開きます。
![bandicam 2019-04-21 22-38-37-098.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/c16e461a-9ef2-83bb-8dd7-e1589da2bf1d.jpeg)

各自好みの設定を行ってください。

変更を保存してから最初から配置されている`Hello World`の記事を見に行くと`Not Found`が表示されてしまいます。
![bandicam 2019-04-21 22-50-53-244.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/a164da23-04a8-8713-3cbb-64c0026cbc3b.jpeg)

`Not Found`が表示されないように設定を行います。

もう一度SSH接続を行います。
`var/www/html`へ移動して、`.htaccess`ファイルを編集します。
![bandicam 2019-04-22 00-59-11-20ｄ7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/df89b95e-bf40-b54b-fb6f-a8973b536a6c.jpeg)

赤枠で囲っている一文を削除します。
![bandicam 2019-04-22 00-59-51-371.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/dc3d6334-5498-726f-7be5-8bcb934bb699.jpeg)

`wq`コマンドで保存して終了します。
![bandicam 2019-04-22 01-14-01-216.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/e0e3b521-b6b3-1d7e-9189-0e98d9a7c4de.jpeg)

次は`apache2.conf`ファイルを編集します。
![bandicam 2019-04-22 01-21-59-201.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/31a75e48-1511-ec84-3791-dbf01b0bc988.jpeg)

170行目ぐらいを見ると赤枠で囲まれている一文があります。（右下に行数が表示されています。）
![bandicam 2019-04-22 01-23-19-885.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/5f79f3b9-3e94-c119-897c-5283ff7aa4a9.jpeg)

`<Directory /var/www>`の`AllowOverride None`を`ALL`に書き換えます。
![bandicam 2019-04-22 01-23-47-980.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/0c1c6f88-6cd1-ffef-efde-ab0c642610f5.jpeg)

保存後、下記コマンドでApacheを再起動します。
`sudo service apache2 restart`
![bandicam 2019-04-22 01-31-14-971.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/4f95cf79-71e6-956a-59a9-e248fb8a3e40.jpeg)


先ほどNot Fooundが表示されたページを確認するとちゃんとページがされています。
![bandicam 2019-04-22 01-32-03-654.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/81ec783b-d4d7-3972-15b1-0671b56e0ae7.jpeg)

お疲れさまでした、以上で設定は終了です。

後は自分の好きなようにテンプレートやらなんやらを設定すれば個人ブログ出来上がりです。


## 参考記事
[Free SSL Certificate Setup for WordPress on Google Cloud (Click-to-Deploy)](https://www.onepagezen.com/free-ssl-certificate-wordpress-google-cloud-click-to-deploy/)
[GCPで作成したWordpressのSSL対応](https://qiita.com/Yuya_Nishizaki/items/4a2413fc2c07aca5d193)
[お名前.comのwhois情報公開代行に注意しろッ！ - インターネット漂流記](https://castawaystory.net/%E3%81%8A%E5%90%8D%E5%89%8D-com-who-is/)
[常時SSL化で押さえておきたいメリットとデメリット【Webサイト運営者向け】](https://jpdirect.jp/ssl/aossl.html)
[無料でHTTPS化できる「Let's Encrypt」をやってみた ※install.sh付き](https://qiita.com/daiki_44/items/a3616390f277722b97e0)