WordPressのドメイン引っ越しとSSL化を同時にやってめげそうになったこと #wbtokyo

常時SSL、今年のWeb界でよくきく言葉だった。と同時にSSLサーバ証明書は無料の流れとなり、いっきにハードルが低くなった。さくらのレンタルサーバで対応するにあたって、少しつまずいたので書いておく。

引っ越しついでにSSL対応

課題は、WordPressマルチサイト(サブディレクトリ)で運営している趣味の写真サイト「BirdSITE」を 新規ドメインへ引っ越すこと、
と同時にSSL対応（https://〜）する。

新しいサイトは、

さくらインターネットのドメイン取得
さくらのレンタルサーバ・スタンダード

2017年6月
いまやるなら常時SSLしかない。さくらの「ラピッドSSL」は年額1620円。迷う値段ではないけど、対応するには 証明書や秘密鍵など難しい言葉ばかり。いまやりたくない気持ちだった。

無料SSLの時代

少しほったらかしているうちに、レンタルサーバで無料SSLがちらほら出てきた。
契約したばかりのさくらでも、少しまっていれば無料になるはず、と予想した。いまやるのはやめておこう。

2017年10月
さくらインターネットの「さくらのレンタルサーバ」、コントロールパネル上の簡単操作で無料SSL証明書「Let’s Encrypt」を設定可能に。

先のばしすることで、たまにはいいこともあるものだ。

新ドメインをSSL化

SSL化するには、さくらのコントロールパネル上で設定する。なんと「無料SSLを設定する」というボタンをクリックするだけ！

コンテンツを引っ越す

旧サイトのWordPressから、すべてのコンテンツをエクスポート
新しいドメインにWordPressをインストール
新サイトのWordPressへインポート

画面がくずれる問題

https:// でうまく設置されたかに見える新サイトのトップページだった。が、記事のページに遷移するとレイアウトが崩れる。

CSS, JSのパスがhttp:// のままで読み込まれていない様子だ。パーマリンクを基本以外に設定すると発生する。

wp-config.phpを編集

さくらのレンタルサーバ特有の問題らしく、wp-config.phpの先頭に追記することで解決した。 (※2018年8月以降の契約サーバーでは不要)

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {

$_SERVER['HTTPS'] = 'on';

$_ENV['HTTPS'] = 'on'; 

}

Google Maps APIのわな

Google Mapは2016年6月より APIキーが必須になっていた。以前に設置したサイトでは、そのまま使えるので気づかなかった。

Google Maps APIキー

Google Maps APIキーを取得
HTTP リファラー（ウェブサイト）設定
 Google Maps JavaScript API を有効にする

プラグイン修正

 Google Maps Photo Galleryを修正する。
（※公式ディレクトリへの反映はまだ）

設定画面を追加
ユーザーごとのAPIキーを入力できるようにする
Google Maps APIのURLにAPIキーを追加

1	//maps.googleapis.com/maps/api/js?key=APIキー

Google Mapが表示されるようになった。

リダイレクトは必須

サイトを引っ越しするにも、 SSL化するにもリダイレクトが肝心だ。

HTTPSへのリダレクト

新サイトへのアクセスが常にhttps:// になるよう、301リダイレクトさせる。

http://birdsite.jp/*
↓
https://birdsite.jp/*

新サイトの.htaccess を編集する。(※2019/5/26修正)

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

新サイトへのリダイレクト

旧サイト（サブディレクトリ）から 、新サイトの同じディレクトリへ301リダイレクトさせる

https://sysbird.jp/birdsite/*
↓
https://birdsite.jp/*

旧サイトの.htaccess を編集 する。

RewriteEngine On

RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$

RewriteRule ^birdsite/(.*)$ https://birdsite.jp/$1 [R=301,L]

なかなかできなかった。リダイレクトされることもあれば、されないこともあるような、不安定な動きだった。しばらくして急に気づいた。

リダイレクトは.htaccessの先頭に書く。

古い名刺のQRコードから 、新サイトのお問い合わせフォームへ リダイレクトされればOK。

この名刺は、いままでに路上で写真を撮らせていただいた方に渡している。1年以上遅れて連絡をくれる方もいるので、このリダイレクトは重要なのだ。

プラグインもある

さくらのレンタルサーバ簡単SSL化プラグイン
私よりもめんどくさがりやのさくらユーザーは利用するとよいかも。

WordBench東京 12月勉強会

2017年12月17日新宿のハートビーツで行われたWordBench東京 12月勉強会「年末LT忘年会」で発表しました。

WordPressのドメイン引っ越しとSSL化を同時にやってめげそうになったこと #wbtokyo