WordPressサイトをHTTPS化する手順|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。CONTACTTOPインフラWordPressサイトをHTTPS化する手順インフラ開発2016.10.14WordPressサイトをHTTPS化する手順ikaシェアツイートブックマークLINEこんにちは、BPSのikaです。久々の執筆となりましたが、今回は私が直近で行ってきた仕事のご紹介も兼ねた記事をお送りいたします。morimorihogeさんによる『HTTPS化に伴うはてブ移行問題』もご覧ください。弊社Webサービス「TechRacho」をご覧の皆様は既にお気づきかもしれません。techracho.bpsinc.jpをブラウザで開くと、サイト内のどのページでもアドレスバーに鍵マークが表示されています。2016年10月6日(木)より、TechRachoは全体HTTPS化を完了いたしました。昨今、銀行やECサイトなど多くのWebサイトでは、クレジットカード番号登録やパスワード等の個人情報の入力を要求するWebページやフォームだけにとどまらず、Webサイト全体をHTTPS化することが増えてきました。Secure(安全でない)事を示すマークを表示する事を宣言しました。した流れから、Webサイトの全体HTTPS化は今後更に増加することになるでしょう。この流れを踏まえ、弊社でも以前からTechRachoの全体HTTPS化計画を進めてまいりましたが、このたび10月6日(木)に全体HTTPS化を完了しました。今回はTechRachoで実際に行った更新手順をなるべく一般化し、WordPressで開発されたWebサイト全体をHTTPS化するときに応用できる形で記事にまとめました。全体HTTPS化のための更新手順まとめTechRachoを全体HTTP化するために今回私が行った更新手順は以下のとおりです。更新前にデータベースとWordPressのデータをバックアップするカスタマイズしたテーマに含まれているHTTPのURLを、プロトコル相対URLに変更するWordPressのURL設定をHTTPSに変更する投稿記事や固定ページに含まれているHTTPのURLを、プロトコル相対URLに変更するHTTPアクセスをHTTPSにリダイレクトするように設定するその他、各種プラグインの設定を行う以下、番号順に詳細手順を記載します。1.更新前にデータベースとWordPressのデータをバックアップする全体HTTPS化の更新前の状態にいつでも復元できるように、WordPress関連のデータは事前にすべてバックアップしておきます。WordPressのデータは大きく分けて、データベースに保存されている投稿記事やユーザ等のデータと、WordPress本体のデータとなります。TechRachoの更新作業ではこれらの作業をCUI上で行いました。実際に実行したコマンドは次のとおりです。database.dumpWordPressのデータベースのバックアップにはmysqldumpコマンドを使います。-uオプションや-pオプションに続く引数やデータベース名には、WordPressでサイトを構築する際に設定したwp-config.phpの設定を指定します。-uや-pの後ろにはスペースを置きません。WordPress本体のバックアップWordPressには多数のファイルが含まれているため、rsyncコマンドで一気にバックアップします。rsyncでは、リモートバックアップでのネットワークトラフィックを制御することも、最初だけ全てのデータを取得して以後は差分だけを取得することもできます。コピー先のディレクトリ2.カスタマイズしたテーマに含まれているHTTPのURLを、プロトコル相対URLに変更する「//techracho.bpsinc.jp」のように、httpやhttpsといったプロトコル名とコロンを含まず、「//」で始まるのがプロトコル相対URLです。URLをプロトコル相対URL「//」にすると、今開いているページのURLスキームに合わせたプロトコルでリンク先にアクセスします。現在のページがHTTPS化されていればリンク先に「https://」でアクセスし、現在のページがHTTPであればリンク先に「http://」でアクセスします。HTTPS化で置き換えるリンクTechRachoサイトにも多数のサイト内リンクやサイト外リンクが含まれています。その中で、以下に該当するリンクのURLはすべてプロトコル相対リンクに変更します。TechRachoサイトドメインへのURL(サイト内リンク)ブラウザでレンダリングするときにサイトドメインの外部へのリクエストを自動送信する部分のURL(styleタグ、scriptタグ、imgタグなど)サイト内リンクに「http://」と「https://」の2種類が使われていると、HTTPS化してもアドレスバーに鍵マークが表示されず、ブラウザのデベロッパーツールでHTTPとHTTPSが混在しているという警告が表示されます(警告の表示はブラウザの種類やバージョンで異なります)。この警告は完全HTTPS化において致命的なため、修正が必要です。HTTPS化で置き換えないリンク逆に、以下に該当するURLはプロトコル相対リンクに変更してはいけません。<a>タグに含まれる外部サイトへのURL(サイト外リンク)<a>タグのサイト外ドメインへのリンクがプロトコル相対リンクになってしまうと、HTTPSで待ち受けしていないサイトを表示したときにエラーになってしまいます(補足を参照)。以上を踏まえて、サイトのテーマに含まれているURLをプロトコル相対リンクに変更します。ここでは正規表現によるコマンドラインでの置き換えを例として掲載しますが、お好みの方法でよいと思います。サイトのテーマファイルに含まれるHTTPリンクを洗い出すには、次のようなコマンドをWordPressのディレクトリで実行します。-PオプションはLinuxでは使えますがMacでは使えません。見つかったリンクの中に、リクエストの自動送信に関連しない外部リンクがあるかどうかをチェックしてメモし、それを置き換えないように注意して、他を置き換えます。置き換えてよいドメイン名を個別に指定してプロトコル相対URL「//」に置き換えてもよいのですが、<a>タグの外部リンクが少ないのであれば、以下のようなコマンドで一括で置き換えてから、置き換えたくない外部リンクだけ手動で元に戻すのが早いと思います。"除外するファイル名"オプションを指定します。<a>タグのサイト外へのリンクを誤って「//」に置き換えた場合の問題HTTPS化されたサイトからプロトコル相対URL「//」サイト外リンクへのアクセスには、前述のようにHTTPSのみが使われます。そのため、<a>タグのサイト外リンクを誤ってプロトコル相対URL「//」に変えてしまうと、HTTPS化されていない外部サイトのリンクをユーザーがクリックしたときに以下の警告画面が表示されてしまいます。この警告は、HTTP化されていないサイトにHTTPSでアクセスしようとしたことによるものであり、リンク元がHTTPSであるかどうか、リンク先のサイトが本当に危険であるかどうかにかかわらず一律で表示されます。<a>タグの外部リンクは「http://」のままでも混在とはみなされず、警告は表示されません。次のパラグラフにあるリンク先の外部サイトはHTTPS化されていませんが、クリックすると正常に表示されます。試しにこのリンクを開いてアドレスバーの「http」を「https」に変更すると上の図と同じエラーを表示できます。外部のJavaScriptやCSSなど(外部リソース)を読み込むURLがHTTPS化されていない場合は、アドレスバーの右に別の警告が表示されてリソースがブロックされます。この場合、アドレスバーに外部リソースを内部サイトに移行したり別のHTTPS化されたサイトに切り替えたりするなどの対応が別途必要です。3.WordPressのURL設定をHTTPSに変更するWordPressの管理画面で、TechRachoサイトをHTTPSに切り替えます。サイドバーの設定をクリックし、一般設定の画面を表示します。以下の画像にある「WordPressアドレス」と「サイトアドレス」のURLのプロトコル部分をそれぞれ「https」に変更します。変更後は、「変更を保存」ボタンを押し変更を適用させましょう。4.投稿記事や固定ページに含まれているHTTPのURLを、プロトコル相対URLに変更するWordPress側で作成した固定ページや投稿記事に含まれるリンクもプロトコル相対URL「//」に修正します。外部リンクの修正については2.と同様の注意が必要です。固定ページや投稿記事はデータベースに含まれるので、2.とは違う方法で修正します。Regexというプラグインを利用して一括で変換します。Regex」の順にクリックして、以下の検索画面を表示します。pattern」で、検索対象とする文字列を入力します。pattern」に入力した文字列に置き換えます。Save」をクリックすると置き換えた結果が保存されますが、保存後はUndoできませんのでご注意ください。置き換えするURLや置き換え後のURLは正しいか、置き換え後の結果は正しいかなどをチェックする必要があります。「Replace」なら保存せずに置き換えの結果だけを表示してくれるため、これを利用してチェックしてから保存するとよいでしょう。5.HTTPアクセスをHTTPSにリダイレクトするように設定する1から4までの作業手順で、固定ページやテーマのリンクは修正できました。3の設定により、WebサイトにアクセスするとデフォルトでHTTPS接続になっているはずです。WebサイトにはまだHTTPでアクセスできるため、完全HTTPS化の状態ではありません。そこで、HTTPでアクセスしてきた場合は、HTTPSで再度アクセスするようにリダイレクトをかけます。WordPressのTOPディレクトリにある.htaccessファイルに以下の設定を反映します。[R=301,L]</IfModule>RewriteCondは条件式です。WebサイトにHTTPでアクセスしてきた場合に、直下のRewriteRuleを実行します。RewriteRuleはHTTPSプロトコルから始まり、ホストとリクエストURLをそのまま置き換えるため、HTTPアクセスがHTTPSにリダイレクトされます。一つ注意点があります。END」行はWordPressによって自動更新されます。END」をよけてその前か後に追記する必要があります。[R=301,L]</IfModule>6.その他、各種プラグインの設定を行う固定ページやテーマの修正後にも混在エラーが発生する場合は、ページにリンクを追記するプラグインの設定を見直しましょう。3.の作業でWordPress本体がHTTPSのURLで設定されているため、個別にプラグインの設定を行うことはほぼないはずです。更新作業はいきなり本番環境で行わず、テスト環境で確認してから行うようにしましょう。以上で作業は完了です。※この節だけmorimorihogeが書いてます。いうわけで、昔からやろうやろうと思っていたHTTPS化が無事終わったのですが、一部課題を残すことになってしまいました。はてなブックマークの記事ブックマークの移行問題です。移行」とかで検索すると同じようなことで悩んでいるサイト管理者の方が見つかりますが、はてなブックマークのブックマークを引き継げないという問題が残ります。URLに付くため実質0からの仕切り直しになります。TechRachoには過去にはてブで良い感じにBuzzった記事も多くあるため、それらの積み上げ資産が再スタートになってしまうのは残念な所です。BlogでURL移行時にはてブ数を移行した話が見つかりました。Blog引用:はてなブックマークの移行」は株式会社はてなさんに対応いただきました。今後「はてなブックマークの移行」を企業向けサービスとして有償提供予定とのことです。いうことなので、はてなさんに問い合わせて見たところ、確かに有償でご対応頂けるとのことでした。ここまで調べた所で今回はコストと効果面からはてブの移行は断念することにしました。決定に至った要素は以下の通りです。思ったよりもコスト高だったこと(と言っても営業窓口経由で人力対応されているということを考えれば妥当で、そこまで高いわけではないと思います)これまでのTechRacho記事の状況的に、はてブは公開直後に一気に付いて、1月後くらいにはたまに思い出したようにブックマークされる程度という傾向だったため、過去記事のブックマークが残っていれば特に問題ないと思われたことブックマーク移行それ自体が直接TechRachoの記事の品質を上げるわけではなく、アクセスが増えるわけでもない「過去記事のメンテナンス」に相当すると判断したこと基本的に旧HTTPのURLにアクセスされても301リダイレクトで正しい記事にはアクセスできる状態ですので、TechRachoを読みに来て頂ける方に対するメリットは薄いということで、今回はてブ数の移行については見送りました。そのうちコストをかけても移行する理由が出てくれば移行をお願いするかと思いますが、今はそのリソースがあれば記事の品質向上や広告など、次に繋がることに投資したいという判断になります。TechRachoははてブの他Twitterやエンジニア間の口コミでシェアしてもらえるような記事を目指しておりますので、お読みの方はぜひ気軽に知り合いにシェアして頂ければと思います。今後ともよろしくお願いいたします。XML-RPCライブラリシェアツイートブックマークLINEこの記事を書いた人ika1990年滋賀県生まれ。以前は某大学の学内SE。Web業界に行きたかった希望があり、2015年10月にBPSへ入社。元々の専門はネットワークなので、ネットワークの話をすることもしばしば。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。