1. olaf_system

    Posted

    olaf_system
Changes in title
+AWSに構築したWordPressをhttps対応してみた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,109 @@
+# はじめに
+「[AWSにWordPressを構築してみた](https://qiita.com/olaf_system/items/e5e17cd8ead71ec9a096)」
+「[AWSに構築したWordPressに独自ドメインを割り当ててみた](https://qiita.com/olaf_system/items/46723a020456120ffd65)」
+の続き。
+WordPressを構築して独自ドメインを割り当ててSSL対応したところまで終わった。
+が、WordPress側がhttpsに対応してないのでデザイン崩れが発生しているのとhttpでのアクセスがまだできる状態なのでその2つを対応していく。
+
+# https対応設定
+現状、こんな感じ。
+<img width="1425" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3536333632352f65636663333433632d346563342d663334332d663032362d3735656331636436613133662e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/ec7dc549-31a6-e05c-3fe1-498a277747bd.png">
+
+httpsのページからhttpのコンテンツを参照しようとするとセキュリティレベルの問題でブラウザが読み込みを止めるのでこういう現象が起こる。
+
+```html
+<link rel='stylesheet' id='dashicons-css' href='http://olafblog.org/wp-includes/css/dashicons.min.css?ver=4.7.2' type='text/css' media='all' />
+```
+
+こういうの。ってことでコンテンツの読み込みもhttpsでするようにしていく。
+
+### WordPress側での設定
+ちょっと調べたらWordPressのプラグインで一発で対応できそうなのでそのプラグインを試してみる。
+
+http://xxx.xxx.xxx.xxx/wp-login.php
+
+で管理ツールにログイン。[プラグイン]>[新規追加]で画面を開いて
+「Really Simple SSL」
+を検索してインストールして、有効化!
+
+はい、完成。
+
+https://olafblog.org
+
+でログイン。・・・あれ崩れたまま?
+管理画面に入って原因ch・・・リダイレクトループ?
+
+ぐぐるとどうやらサーバー側での設定が必要みたい。
+
+### サーバー側での設定
+サーバー側にログインして設定を追加していく。
+
+```
+$ cd /var/www/html
+
+# 管理画面から設定が変えれるように権限変更しておく
+$ chmod 660 wp-config.php
+
+# 下記設定を
+# require_once(ABSPATH . 'wp-settings.php');
+# の上部に追加
+$ vi wp-config.php
+_/_/_/_/_/_/_/_/_/_/_/_/_/_/
+$_SERVER['HTTPS']='on';
+define('FORCE_SSL_LOGIN', true);
+define('FORCE_SSL_ADMIN', true);
+_/_/_/_/_/_/_/_/_/_/_/_/_/_/
+```
+
+再度アクセス。・・・うん。管理画面に入れるようになった。
+
+### 再度、WordPress側ので設定
+[設定]の「WordPressアドレス(URL)」と「サイトアドレス(URL)」をhttpsに変更。
+あとなんか上の方にボタンが出てたのでSSL有効ボタンをポチる。
+
+![スクリーンショット 2020-01-10 13.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/5cb24dd1-3914-8e66-765d-ff95ed699721.png)
+
+さて、トップページにアクセス。
+![スクリーンショット 2020-01-10 13.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/136c6f3f-5295-44e1-869d-659c0eac4ea5.png)
+
+お、できた。余裕ですねぇ。
+
+# http->httpsリダイレクト設定
+最後にhttpアクセスをhttpsリダイレクトするように設定していく。
+
+```
+# server_nameを正規ルートのみ許可するように不要な記述を削除
+# httpアクセスに対して301リダイレクトするよう設定を追加
+$ sudo vi /etc/nginx/conf.d/wordpres.conf
+_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
+server {
+ listen 80;
+ server_name olafblog.org;
+
+ location / {
+ if ($http_x_forwarded_proto = 'http'){
+ return 301 https://$host$request_uri;
+ }
+ root /var/www/html;
+ index index.php index.html;
+ }
+ location ~ \.php$ {
+ root /var/www/html;
+ fastcgi_pass 127.0.0.1:9000;
+ fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+ include fastcgi_params;
+ }
+}
+
+# 再起動だとうまく設定が反映されなかったので再起動
+$ sudo nginx -s stop
+$ sudo nginx
+_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
+```
+
+オッケー。設定完了したのでhttpでアクセス。
+
+http://olafblog.org
+
+httpsにリダイレクトされることを確認。
+簡単ですねぇ。お疲れ様でした。