Jan 30, 2019

SSL対応しました

Pocket

Hetemlの旧サーバから新サーバに移設して、無料SSL対応したときのまとめ(僕みたいなwebに詳しくないWordPress運営者向け)


GMOペパボが提供するレンタルサーバHeteml(ヘテムル)をここ10年弱使用している。こういった各種サービスやテンプレートのおかげで、僕みたいにwebのことがわかっておらず、スクリプトも書けないような人間でも、自分でwebサイトを作ったり出来るのだから非常にありがたい。とは言え、今回のSSL対応ではそれなりに苦労したので、ノウハウを少し記録してく。webについて詳しくないけど自分でHetemlを使って運営しているという、僕みたいな誰かの役に立てば幸いです。


僕が説明するのもおこがましいですが…

SSL対応とは、web上での見た目で言えば、URLがhttpではなくhttpsになっているサイトにするといった作業のことで、それをするとセキュリティが向上するし、そのようなサイトはユーザに安心感を与えることにもなる。詳しいことは僕も理解できてないので、各種サイトを参考にしてほしい。最近、google chromeが、この対応をしていないサイトに対しては「保護されていないサイト」として一律警告を出すようになったことは、結構話題になったように思う。ただURLが変わるだけではなくて、SSL証明証が発行されてそのwebサイトに紐づけられる。その代行作業を、各種サーバ会社などがサービスとして提供している格好だと、理解している。この流れは不可避で、早晩やらないわけにはいかなくなるので、この機に実行することにした。


旧サーバから新サーバへの移設

この1-2年弱で新規にHetemlでサーバ契約をした人なら、無料SSLはクリックひとつで対応できる。ので、Hetemlの各種ヘルプを見てほしい。問題は、それよりも前にサーバ契約をした人で、その様な場合は、使用しているサーバが旧環境のものなので、新サーバにサイトを移設する必要がある。有料SSLは、旧サーバでも(確か)契約出来るのだが、無料SSLを使うためには、Hetemlのサービス内であっても、新サーバへの移設作業が必須である。

Hetemlからのリリース
https://heteml.jp/info/detail/id/1990

Hetemlのコントロールパネルにログインすると、右下の方に新サーバ移設のためのメニューがあるので、そこをクリックして欲しい。そうすると、移設に関する説明が書いてある。あまり込み入ったことをしていなければ、webサイトのデータをPCに保存して、新サーバにアップするだけで大方の作業は完了。ただし、パスをいろいろいじっていたり、外部サイトと連携している場合などは、移設前の作業がいろいろあるぽい。が、僕はそういうことをしてなかったのでほとんどの説明は斜め読みしただけだった。「移設を開始」する前にやったのは、WordPressにログインして、各種プラグインを更新することと、使用中のサイトテンプレート(サイトのレイアウトやデザインを決めるもの)以外のテンプレートの削除。その後、各種ウェブサイトのバックアップデータをダウンロードした(有料で15日ごとに行われるHetemlバックアップオプションを使用しているので、最新のバックアップ作成前に各種更新して、バックアップ作成後にDLした)。

移設を開始」を押すと、コントロールパネル上で旧環境と新環境の画面を行ったり来たりできる様になる。移設完了はそこから30日以内にしなければならない。ここで注意したいのは、コントロールパネルは行ったり来たりできるが、Heteml FTPのサイトから閲覧・操作ができるウェブのファイルは、旧環境のものだけということ。Hetemlが提供するサービスでは移設完了前に新サーバのファイルをいじることができないので(ここに気付くのに時間がかかった)、Hetemlの移設案内でおすすめされている様に、FTPS接続可能なFTPソフトで、指定された新サーバにファイルをアップすることになる。ここまで行くと、概ねの作業は完了(ただし、ウェブの知識がないため、この先も結構長かった)。


移設完了ボタンを押した後、公開確認…

サイトを構築していファイルの上記アップロードが完了したら、Hetemlコントロールパネルで表示される移設の説明のページ(移設完了したので僕は見れなくなってしまった…)の最下部にある「移設完了」を押す。その後、再度、Hetemlコントロールパネルにログインして、Hetemlの説明にある通り無料SSLの設定を行なった。

僕の場合は、1つのサーバで3つのサイト(ドメイン)を運営しているので、各種サイトを開いてみたが、403 errorで閲覧ができない。また、WordPressの編集画面にもログインできない(サイトのデータとWordPressがインストールされてるフォルダがサーバ上で同じ場所にあるのだから、そこにアクセスできないのは当然なのだが)。いわゆる「DNSの浸透に時間がかかる」というやつかなと思い、しばらくまった。サーバの引っ越しをしたり、ドメインを取得したばかりだと、ドメインなどを管理運営してくれている世界のありがたい各種機関がそのドメインの存在確認とか本人確認みたいな作業するのに時間がある程度かかるために生じる現象と理解している。

だが、、、
3つのうち1つのサイトが閲覧できるようになったものの、2つのサイトで状況が変わらない。

そこで、Heteml FTPにログインしてみた。1つのサーバで複数のサイトを運営している場合、トップフォルダにある “web” というフォルダの中に、ドメイン名と同じフォルダあるはずである。なぜか、僕の場合は “web” と同じ階層に各種ドメイン名のフォルダがあったので(そんなアップの仕方はしてなかったのだが)、まずはそれを直した。この時点で、403 errorが出ていた2つのサイトのうちの1つは閲覧可能になった。

しかし、今度は最後の1つのサイトで500 error が表示されるようになった。HetemlのFAQを見ると「CGIの設定が悪いことが多い」旨が記載されていたが、もう、僕には訳がわからん。。
また、閲覧可能な2つのサイトでも、URLが “http” のままである。手で打って “s” を追記すれば、httpsのURLでサイトが閲覧できるようだ。

このあとやらなければいけないのは、
・500 errorの解消
・http → https へのリダイレクト

であろうと、悩みながら思考をまとめていた。


PHPの設定(.htaccessファイルの書き換え)

どうしようか悩んでいた時、以下のサイトに助けられた。僕と同様の状況の方は、以下のサイトを見て欲しい(このサイトのおかげでその後の設定ができたので、僕も誰かの役に立てればと、この記事を書こうと思った)。

このサイトに示されているように、問題は “.htaccess” ファイルにある記載。このファイルはユーザがサイトにアクセスしたい際の挙動を指定するもののようで、後に説明するリダイレクトの設定にも使用する。ここに、近年webサイト構築に使用される言語のPHPに関する指定が書かれている場合がある。PHPのバージョンが、Heteml側のサーバで指定しているバージョンと合っていないと、うまくサイトが動かないようだ。サイトを作ったのが結構前だと、古いバージョンのPHPを指定している場合があるが、Hetemlはセキュリティの観点から古いバージョンのサポートをやめている。

上記サイトにあるように、サーバ側のPHPの設定をいじるなどのやり方もあるようだが、僕の結論からいうと、.htaccess のファイルの記載を変えてしまうのが良いだろうと思う。このファイルでPHPのバージョンが指定してあると、今後さらなるバージョンの更新が合った場合の不具合の原因にもなりそうだからだ。実際、HetemlもこのPHPに関する記載を削除することを勧めている。

実際の.htaccessファイルの書き換えは、Heteml FTPにログインして行った。”web” フォルダの下にある各種ドメインフォルダのtopにある.htaccessにアクセスすると、ブラウザ上で内容を書き換えることができる。スクリプトの最初に

AddHandler phpX.X-script .php
(X.Xはバージョン名)

という一文があるので、これを丸ごと消す。これだけでOK。
念の為、閲覧できていたサイトでもこの一文がある場合は削除した。
これで、500 errorが出ていたサイトを閲覧できるようになるか!?
と、思いきや、今度は…


データベースの設定

データベース接続エラー」という文字が、ブラウザ上に浮かぶようになった…
もう、どうすれば良いんだ… と、途方に暮れそうだったが、こちらは、Heteml公式のブログの説明で解決策がサクッと見つかった。すべて、HetemlコントロールパネルとHeteml FTPからの操作で可能だった。この不具合も、PHPに関するもので、PHPが古いバージョンだと、サイト構築のために必要なデータベース(MySQL5)への接続がうまくいかないらしい。Heteml FTPを用いて必要な情報確認し、その情報をもとにHetemlコントロールパネルで設定を直すだけでOK(以下サイトを参照)。


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

これで、やっと3つのサイトが閲覧可能になった。
しかし、このままだと、自身のサイト内や他のサイトとの間でこれまでに貼ってきたリンクがhttp表記なため、httpsの新しい環境にリンクされない状況が出てくる。そこで、http~のURLにアクセスしたらhttpsの方にリダイレクトされるように、先ほども出てきた”.htaccess” ファイルに簡単な追記を行った。

ここからの作業は、以下のサイトが非常に参考になった。

このページにある「.htaccessへのリダイレクト処理の追記」にある以下のスクリプトを、.htaccessの適当なところに記載することで、簡単に実行できた。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

https://crearc-design.com/2017/11/10/heteml-free-ssl-settings/

この追記作業は、Heteml FTPのブラウザ上で行ってしまってOKだ。
僕の3つのサイトのうち、割と初期から閲覧可能だったサイトには、.htaccessファイルがなかったため(このファイルがなくて、PHPの指定がされていなかったから不具合が起きなかったのかな?と解釈している)、Heteml FTPでドメイン名のフォルダ直下に、他のサイトと同様のものを作成した。この作業も、ブラウザ上でファイルを新規作成してスクリプトをコピペするだけでOK。

Hetemlにも「.htaccess利用法」というページがある
https://heteml.jp/support/manual/htaccess/


最後にWordPressでもSSL化

これで、無事、閲覧も可能になり、表示されるURLもhttpsになったの。のだが、しかし、safariのURLバーに鍵マークが表示されないし、google chromeで閲覧してもURLにiのマークがついている。まだ、人様に安全なサイトと認識してもらうには、何か足りないらしい。。
こちらのサイトを読んでみて、

Chromeのアドレスバーに「保護されていない通信」と表示される原因とその見つけ方
http://www.atmarkit.co.jp/ait/articles/1609/23/news023.html

WordPressで行った作業でのリンクなどに、不備が残っているのかなと思った。
そこで、先ほどの「独自SSLを無料で導入!hetemlサーバーで無料SSLをWordPressに設定する方法」でも紹介されていたプラグインをWordPressに入れることにした。

上記プラグインをWordPress編集画面上でインストールして「有効化」したら、左のメニューにある「設定」をクリック。この時点で一旦ログアウトさせられるので、もう1度ログイン。すると、「設定」メニューの画面になっていて、サイトのURLの欄が「https~」になっているので、これで保存。

その後、このブログでは「Search Regex」というプラグインを使って、サイト内のURLをhttpsに一斉変換するさらなる調整方法も紹介されていたが、僕の場合は「Really Simple SSL」を使った時点で、safariでもchromeでも「保護された通信」と表示されるようになったので、ここで作業を終了した。

非常に、長く苦しい戦いだったが、いつかはやらなければいけない作業。この記事が、同じ状況の誰かの作業時間を少しでも短縮できれば幸いです。

Posted in Blog NewsComments Closed 

関連記事