第12回 【WordPress】 http→https化した後、301リダイレクト正規化する方法

WordPress GCP

1. 第12回 【WordPress】 http→https化した後、301リダイレクト正規化する方法

環境:Debian 9 php 7.0 Apache 2.4.25 MySQL 5.7 Cocoon

目的:httpからhttpsへ301リダイレクト正規化

「http」経由でアクセスされても「https」へ恒久的にリダイレクトします。

歴史が長くなればなるほど「301リダイレクト正規化」が非常に重要なことと思います。また、Googleが公式に「https」で暗号化されたサイトは「http」に比べてランキングを上位に扱うと発表しています。

歴史が長い人は「画像などのメディア」も「https」に置換する必要があるそうです。「Search Regex」というプラグインが利用しやすいということですが、私は利用していないので調べてみてください。

第11回に「https」に対応するSSL/TLS証明書の取得設定を行いましたが、「http」にアクセスしても「保護されていない通信」と表示されます。導入している「セキュリティソフト」によっては、危険なアクセスとして扱い、先へ進むには危険を承知で行ってくださいねー。ってお知らせしてきます。

WordPressでインターネットに公開している以上は、少なからず人に見てほしいはずなので、301リダイレクトの処理設定を書いていきます。

ベストプラクティスは「apache2.conf」を編集

「apache2.conf」or「.htaccess」のどちらかのファイルを編集します。

ベストプラクティスは「apache2.conf」を編集することです。(「apacheサーバー」のバージョンによっては「httpd.conf」の場合もあり。)

Amazon Web Service「AWS」の公式に書いてあります。「Apache公式」へのリンクもあります。
ELB の Classic Load Balancer で HTTP トラフィックを HTTPS にリダイレクトする方法を教えてください。

これはロードバランサーを利用する時のソースコードですので、今回は利用しませんが「https://www.tokyo2020unofficial.com/」において、応用させてもらっています。

優先順位

  1. 「apache2.conf」または「httpd.conf」の存在する方のファイル。
  2. 「.htaccess」ファイル。

「Apache 2.4」の「Webサーバー」で動作しているので、一番最初に読み込まれるのは「apache2.conf」で、そのファイルに「.htaccess」を読み込みなさいと記載されています。

ということは、どのページにアクセスしても、その順番が毎回行われるので、サーバーに負荷もかかりますし、ユーザー側も表示速度が遅いなと感じます。

もう一つの問題

「.htaccess」ファイルを正しく編集してもリダイレクトされない場合、ほとんどが、権限設定の問題です。「第7回 GCP WordPressの「apache2.conf」を編集する」で書いています。

手順の流れ
  • WordPress
    http→httpsへ書き換え

  • WinSCP
    ファイルを編集して301リダイレクト

    「apache2.conf」or「.htaccess」を編集して、301リダイレクト正規化

  • ブラウザ
    6種類の「URL」でアクセス確認

1.1 「http→httpsへ書き換え」

第11回 WordPress Let’s Encryptを導入してhttp→https化する方法」で「https」でのアクセス確認まで行なっています。

この段階で「https」でのアクセスができることが前提です。

WordPress管理画面へログインし、一般設定を開くと下記の画面が表示されます。

  • WordPressアドレス(URL)の欄
  • サイトアドレス(URL)の欄

両方が「http」になっていると思います。次へ進みます。

1.2 「s」を書き加える

  • WordPressアドレス(URL)の欄
  • サイトアドレス(URL)の欄

両方とも「s」を書き加えて「https」に変更して、次へ進みます。

1.3 WPS Hide Login

「ログインURL変更」のプラグイン「WPS Hide Login」を利用していると一般設定の最下部に下記画面が表示されています。

変更を保存する前なので「http」になっていると思います。

「変更を保存」をクリックして、次へ進みます。

1.4 ちなみにですが

上記画面の赤枠下側「Redirection url」に「http://tohyo2020.org/wp-login.php」を指定しています。「https」でアクセスしても「404 not found」になりますが「鍵マーク」は確認できます。それが下記画面です。

1.5 正規のログインURL

今まで自分がログインしてきた「WordPressのログインURL」を「http」から「https」に変更してアクセスしてみます。

1.6 リダイレクト前に管理画面確認

301リダイレクトする前にWordPress管理画面にアクセスできることも確認します。一般設定で「http」→「https」へ書き換えを行った後だからです。

WordPress管理画面にログインできることが確認できたら、次へ進みます。

1.7 ファイルを編集して301リダイレクト

  • 「WinSCP」を起動します。
  • 「新しいセッション」をクリックして、ログイン画面を表示します。
  • 「該当のサイト」にログインして、次へ進みます。

1.8 「apache2.conf」と「.htaccess」

なぜ2種類の編集方法を書くかというと、

「はぁぁぁ~?どこどこ?どこにソースコード書くの?」素人バカ丸出しだったので。私が。

「apache2.conf」がベストプラクティスというのはAmazonの記載で分かってはいたものの、どこにソースコードを記載したら良いのか、ネット上どこを探してもなかったので、説明がたくさんある「.htaccess」の編集方法を選んだからです。

設定ファイルを編集する時は、バックアップを取ったり、ローカルに「編集前ファイル」を保存します。

まず、「apache2.conf」場合です。

なぜ先に「apache2.conf」の場合を書くの?

それは、時間が経過して「apache2.conf」での編集方法が分かったので、速度が早く、サーバーにも負担がかかりにくい、Amazonが言う「ベストプラクティス」から書こうと思ったからです。

「apache2.conf」または「httpd.conf」

第7回 GCP WordPressの「apache2.conf」を編集する」で「apache2.conf」を編集したことがある前提で書きます。

先頭、1行目から下記を記載します。

# httpからhttpsへ301リダイレクト正規化
<Directory /var/www/html>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R=301,L]
</Directory>

Apache再起動を忘れずに行います。

「GCP」へアクセス、「メニュー」「Compute Engine」「VMインスタンス」右側の「SSH」を起動します。下記コマンド入力して完了です。

「apache2.conf」ファイルを編集した場合:

$ sudo service apache2 restart

「httpd.conf」ファイルを編集した場合:

$ sudo service httpd restart

リダイレクト完了です。

次に「.htaccess」ファイルの場合です。

「WinSCP」においては「.htaccess」ファイルは隠しファイルになっています。下記画面で隠しファイルを表示できるように設定を変更します。

「オプション」「環境設定」の順番でクリックして、次へ進みます。

1.9 「.htaccess」ファイルを表示させる

パネルをクリックすると下記画面が表示されます。

「隠しファイルを表示する」に✔を入れ、「OK」をクリックして、次へ進みます。

1.10 「.htaccess」ファイルが表示された

「/var/www/html/」ディレクトリに「.htaccess」ファイルがあるはずです。なければ「ファイル検索」で「.htaccess」を検索してください。

「.htaccess」ファイルを編集する前にバックアップ、ローカルへ保存。忘れずに。

「.htaccess」を開いて次へ進みます。

1.11 「.htaccess」ファイルへコードを記載

下記画面のように1行目から記載します。8行目からは「WordPressで最初から記載されているコード」です。

実際の記載するコードです。「apache」じゃなくても、WordPressの「.htaccess」ならリダイレクトできそうです。

※「LiteSpeed」サーバーで、リダイレクトできています。

20行目にある「何にもない改行」とても重要。

この改行ないと動作しません。ほんとうんこ漏れそうなほどイライラしました。

# httpからhttpsへ301リダイレクト正規化
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
「何にもない改行を1行入れる」

と、ここまで書いたのはいいのですが「GCP」で「WordPress」を作成して、バシバシ設定編集作業を行なっていると(最初の頃、何度もアクセスできなくなって、何度も作り直したから)

「.htaccess」見当たりません。探してもありません。テキストエディターで新規ファイル作成で、上記のコードをまるっとコピペしてファイル保存して「/var/www/html/」ディレクトリに「.htaccess」ファイルを置きます。

「.htaccess」ファイル編集後

「.htaccess」ファイルを編集した後であっても、Apache再起動を忘れずに行います。2種類のうちどちらのファイルが存在するかわからない場合は、両方のコマンドを実行すると、どちらかが有効で再起動し、リダイレクト設定が完了できます。

「GCP」へアクセス、「メニュー」「Compute Engine」「VMインスタンス」右側の「SSH」を起動します。下記コマンド入力して完了です。

「apache2.conf」ファイルを編集した場合:

$ sudo service apache2 restart

「httpd.conf」ファイルを編集した場合:

$ sudo service httpd restart

リダイレクト完了です。

1.12 6種類の「URL」でアクセス確認

httpからhttpsへ301リダイレクト正規化後のアクセス確認

httpで確認:
http://tohyo2020.org
http://www.tohyo2020.org

httpsで確認:
https://tohyo2020.org
https://www.tohyo2020.org

WordPress管理画面ログインURLで確認:
例、http://tohyo2020.org/独自で設定したログイン文字列/
例、https://tohyo2020.org/独自で設定したログイン文字列/

1.13 絶対バックアップ

httpからhttpsへ301リダイレクト正規化後は、絶対バックアップを取っておいたほうが良いです。

1.14 さいごに

「httpからhttpsへ301リダイレクト正規化」は、

  • どこにソースコード記載したら良いの?
  • 「.htaccess」ファイルないけど。。。
  • 「.htaccess」ファイル、最後1行改行しないとなんで動かないんだよ。
  • 全部うまく設定したのにリダイレクトしない。「Apache再起動」し忘れてる。
  • 「apache2.conf」と「.htaccess」での記載方法が一緒ではない。

結構、イライラしますし、やらかします。

ちなみに「ロードバランサーでのhttpからhttpsへリダイレクト正規化」するコードは「apache2.conf」の1行目からこうやって記載しています。それと「wp-config.php」の編集もする必要があります。

# httpからhttpsへリダイレクト正規化、※先に読み込むのはapache2。
<VirtualHost *:80>
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} =http
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R=301,L]
</VirtualHost>

次は、第13回です。


【コメント】 ※「メールアドレス不要」


  1. RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R=301,L]
    #

    最後の行の # は不要ですね。

    • ご指摘ありがとうございます。
      ものすごい細かいところ、よく気づかれましたね。実際「#」は自分の本番環境のコードではないものですし。修正させて頂きます。他にもありましたらよろしくお願い致します。