22
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 古里 武士/前川 昌幸

常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

Embed Size (px)

Citation preview

Page 1: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜

古 里 武 士 / 前 川 昌 幸

W o r d C a m p T o k y o 2 0 1 7

Page 2: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

自己紹介

古里 武士(ふるさと たけし) 前川 昌幸(まえかわ まさゆき)

WordBench倉敷 モデレーター 株式会社 イー・ネットワークス 所属

Page 3: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

宣伝

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像 出版社: エムディエヌコーポレーション 発売日: 2017/9/20 こもりまさあき,栄前田 勝太郎,坂上 北斗,塚口 祐司,前川 昌幸,松田 直樹

Page 4: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

アジェンダ

SSL化について

事前確認で必要なこと

サーバーで必要なこと

WordPressで必要なこと

無停止でSSL化のおすすめ手順

Page 5: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

SSL化について検索結果とか、Chromeの警告などGoogleの対応が話題に Apple/MicrosoftなどもSSLが前提のサービスを推進HTTP/2 は https が前提

『常時SSL』「メールフォームだけSSL」時代の終焉? メディア系サイトから対応がすすんでいく?WordPressで運用されているサイトも対象に!

Page 6: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

事前確認

サーバーの対応までの確認

→ 証明書を誰が取る?

→ 利用する証明書の種類は?

→ サーバーの設定は誰が? 

他サイトとの連携の有無

→ そのサイトはSSLに対応済か?

その他

→ ソーシャルボタンなどの確認

→ Analyt ics/Search Console など

Page 7: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

サーバー証明書の反映

https通信の有効化

httpからのリダイレクトの設定

それぞれ環境に応じて対応しましょう。

Page 8: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

このエラーは、 まずサーバーの設定の問題

Page 9: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

WordPress

WordPressの設定

テンプレート内のURLの修正 

post内のURLの修正 

Page 10: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

WordPressの設定

基本的な設定は、管理画面で行えますが‥

Page 11: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

WordPressの設定

Chomeでは「!」がついたり

OKNo Good

Page 12: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

WordPressの設定

Safar iでは鍵がつかなかったり

OKNo Good

Page 13: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

WordPressの設定src="http:// . . . . . . . . . "

が存在する限り、

完全にSSL対応として 扱われません。

Page 14: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

テンプレートの修正src="http:// . . . . . . . . . "

src="https:// . . . . . . . . . "

に書き換えます。

※src="// . . . . . . . . . "  は?

Page 15: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

投稿の修正・WP-CLI(利用できるなら一番おすすめ) ・Search Regex

※ DBのダンプでの一括置換はトラブルの可能性があります

Page 16: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

投稿の修正WP-CLI  でのコマンド例

$ wp search-replace 'http://example.dev' 'https://example.com' --skip-columns=guid

Page 17: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

投稿の修正参考 WordPress のドメイン名やURLを変える際の GUID 問題のちゃんとした話 - Capital P https://capitalp. jp/2017/01/25/do-not-change-the-guid/

Page 18: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

投稿の修正Search Regex Plugin

Page 19: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

投稿の修正参考 Search Regex — WordPress プラグイン https:// ja .wordpress.org/plugins/search-regex/

Page 20: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

あるある話

対象の外部サイトがhttpsに対応していない!

テンプレート書き換えたら実は‥‥

その場合は、「ありとあらゆる手」で解決!

Page 21: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

無停止でSSL化 の手順

0. バックアップを取る

1. httpsを並行稼動に

2. テンプレートの反映

3. エントリー内のhttpへのリンクをhttpsに変更

4. WordPressの設定を変更

5. httpsでの動作確認

6. http->httpsへのリダイレクト設定

Page 22: 常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo

thank you!