【Wordpress】リバースプロキシを利用し、自宅のラズパイでWordpress環境を構築してみた④

### はじめに
　みなさん、こんにちは。某通信キャリアでネットワークエンジニアとして働いている「**だいまる**」です。
本日は、**リバースプロキシとWordpressを搭載しているラズパイのSSL化**について、説明していきたいと思います。
　その前に、前回までの記事についてリストとして載せておきますね。

**（前回までの振り返り）**
　１：[**Wordpressを構築した構成と経緯**](https://qiita.com/daimaru_engineer/items/60cc2008fb7a91fb41f9)
　２：[**1ドメインで複数のサイトを立ち上げる方法**](https://qiita.com/daimaru_engineer/items/880e610a1c55aab67a0e)
　３：[**独自ドメインの取得方法とAWSへの適用方法**](https://note.com/lively_jacana308/n/n1f0a682ee1bf)

### SSL/TLS化とは？
　**「そもそもSSL/TLS化って何するの？」** や **「SSL/TLS化って何？」** と思われた方もいるかと思います。
SSL/TLS化というのは、一言でいうのであれば、「**データの暗号化**」です。
みなさんがネットを介して様々なサイトにアクセスする時に**httpなのかhttpsなのかで暗号化の有無**が変わってきます。
どう判断するかというと、**サイトのURL左側に鍵マークがある場合**は「**https**」であり、**暗号化されております**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/d06c6869-5acf-3367-c586-381f22552acc.png)

逆に**鍵マークがない場合**は、「**http**」であり、**暗号化はされていません**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/b755eb20-05b5-2b82-9054-a11e41db462f.png)

　この違いがどの程度大きいのかというと、**アマゾンなどのECサイトで決済のためにクレジットカード情報やセキュリティコードを入力した場合、情報がとられる可能性が天と地の差程生まれてきます。**
具体的なイメージでいくと、手紙で例えるとわかりやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/55581018-4802-34e1-46b0-28dd26452a74.png)

**これが手紙ではなく、重要な情報であった場合、どうなるでしょう？**
**これがhttpとhttpsの違いになります。**

## SSL/TLSの仕組み（エンジニア・勉強したい方向け）
次に、**SSL/TLSの仕組み**については、こちらの記事（**後日投稿予定**）を読んでいただけると幸いです。

## 証明書の取得方法
　ここからは、今回の構成で実際に取り組んだ**SSLの証明書取得方法**について説明します。
今回利用したのは、「**Let's Encrypt**」です。
　この「**Let's Encrypt**」とは、世界のウェブサイトを全てHTTPS化することを目的として作られた機関で、今では世界の名だたる企業がスポンサーとなり運営されております。
　このサービスを利用した理由は、ただひとつ！、「**無料**」だからです。
前置きはこのぐらいにしておいて、ここからは、実際にやったことを書いていきます。

### **1：Certbotのインストール**
　まずはじめに、**Certbot**というソフトウェアをインストールします。
```
・gitによるインストール：git clone https://github.com/certbot/certbot
・yumによるインストール：sudo yum install certbot-nginx
```
### **2：証明書の発行**
　上記で**Certbot**をインストールしたら**以下コマンドで証明書を発行**します。
```
・証明書発行コマンド：sudo certbot --nginx
```
　上記コマンドで証明書発行を行い、nginx.confに以下の設定が入った後は、リバースプロキシにある設定を行います。

```
（自動で入る設定）
 listen 443 ssl default_server; # managed by Certbot
 ssl_certificate /etc/letsencrypt/live/***/fullchain.pem; # managed by Certbot
 ssl_certificate_key /etc/letsencrypt/live/****/privkey.pem; # managed by Certbot
 include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

server {
 if ($host = ****) {
   return 301 https://$host$request_uri;
  } # managed by Certbot


   listen  80;
   server_name ****;
   return 404; # managed by Certbot
}
```
　上記の設定だけでは、**ユーザからEC2（Nginx）までのHTTPS化**はできてますが、**リバースプロキシとして利用しているNginxからラズパイまでの通信はHTTP**となり、矛盾が生じるため、**アクセス不可やJavascriptやCSSの読込が不可**となります。
　その解決のためには、以下の対応が必要となります。

### **3:リバースプロキシへの適用方法**
　SSL/TLS証明書の取得後、**アクセス不可やJavascript、CSSの読込が不可となった場合**、**/etc/nginx/nginx.conf**に以下の設定が必要となります。
```
・Server配下に以下設定を追加
　add_header Content-Security-Policy upgrade-insecure-requests;
　proxy_set_header X-Forwarded-Proto $scheme;
　proxy_set_header X-Real-IP $remote_addr;
　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　proxy_set_header Host $host;
　proxy_redirect off;
　proxy_max_temp_file_size 0;
```
　この設定をserver配下に追加すると無事にJavascript、CSSが読み込まれるようになります。
理由については、後日投稿予定の記事で説明させていただきます。

## WordpressのSSL/TLSの設定方法
　最後に、**WordpressのSSL/TLSの設定方法**について説明します。
やることは、全部で３つです。

### **1：プラグインのインストール**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/93608f69-432b-5c1a-5a8b-247aa872c7bc.png)

「**プラグイン**」のボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/c465bbc0-69fc-d9e8-3bca-2f131f213f2b.png)
「**新規追加**」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/f8b5c0c7-a0fe-7b91-fbf3-60c7bb6e09f0.png)
キーワード欄に「**Velvet Blues Update URLs**」と検索し、それをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/1060d216-ef16-4a26-4c78-f4726818ad97.png)
インストール後、メニューバーの「**ツール**」をクリックし、「**Update URLs**」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/08bffa74-3f27-3f2f-3648-c45f1266cf41.png)
　上記の画像が出てきたら、「**Old URL**」に「**http://**」と入力し、「**New URL**」に「**https://**」と入力します。
そして、Step2のチェック欄にチェックをつけ、「**Update URLs Now**」をクリックします。

### 2：一般設定の変更

メニューバーの「**一般設定**」をクリックし、一般設定の下の我慢が出てきたら、「**Wordpressアドレス**」と「**サイトアドレス**」の２つの「**http**」を「**https**」に変更したら完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/26601f47-79fa-ccfd-1df8-67844a55bb4d.png)

## **まとめ**
　ここまで環境構築を行い、サイト周りの対応は完了しました。
あとは、サーバの信頼性・可用性の向上、性能の向上、セキュリティの強化を実施する必要があります。
　仮にアクセス数が増えた場合、この環境では膨大なアクセス数を捌くことは難しくなるため、自宅にオンプレミスのサーバを購入し、環境を移すことも考えております。