Welcome to my blog

Although the world is full of suffering,
it is full of the overcoming of it.
- Helen Keller

15

クソ素人がサイトSSL化してみた【備忘録兼】

この間の日曜日、父に手伝ってもらってようやくYukiyanagiサイトのSSL化が出来ました。ずっと前からサイトのSSL化はしようと思っていたのですが、いかんせんサーバーやドメインの仕組みがわからず、サーバーの契約元のロリポップとその姉妹サービスのムームードメインとの関係がわからなくて放置していました。

SSL化した新しいURLはhttps://yukiyanagi.art/です。

SSL化されたサイトのイメージ

SSLとは、「Secure Sockets Layer」の略で、インターネット上におけるWEBブラウザとWEBサーバ間でのデータの通信を暗号化し、送受信させる仕組みのことです。ネットで買い物をするときやサービスを利用する時、クレジット番号や住所などの個人情報を入力すると思いますが、そういったデータを悪意ある第三者から盗まれたり、改ざんされたりするのを防ぐ役割があります。SSL化されたサイトは、URLの先頭が「https」になっています。
SSLとは?httpsとは?簡単説明|GMOグローバルサイン【公式】

ただ私のサイトはHTMLとCSS、簡単なJavaScript(jQuery)でできた静的サイトで、個人情報の送受信をするようなものではないのでSSL化しないとまずい理由はありません。ただ、最近はGoogleのほうでSSL化されていないサイトは信頼性が低いと認識され検索順位も下がるらしく、SEO対策としても、そしてサイトのイメージアップとしてもSSL化しておいて損はないと思いました。

「oops.jp」なんてダサいドメインとはおさらばだ!

ロリポップ使ってる人ならこれがロリポップのドメインだというのは一目でわかるでしょう。消去法で選んだのがこれだったの(笑) 最初はちょっとギャグめいてて良いかなと思ったけど、即ダサいと思った。独自ドメインを入手できると聞いていたけれど、サービスが分かれてて別料金っていうのがなんか理不尽な気がして(私が無知なだけ)、面倒になったので長いこと買わずにいました。

SSL化は無料でやってくれるとのことなので今のロリポップドメインでできるのかと思いきや、私が契約しているエコノミープランではできませんでした。(ロリポップのプラン一覧
ならばということでこの冴えないロリポップドメインを変えることも考え、ムームードメインの検索フォームで好みの文字列を検索してみると、「取得できません」とグレーアウトした字がたくさん並び、良さそうな名前のドメインがなかなか手に入りません。それでもう嫌になり、SSL化も諦めていました。

しかし、今年リニューアルしたYukiyanagiサイトを会社の人にお披露目したらやっぱりURLがダサいと言われて、SSL化してないことも指摘されたので、WEBの勉強も兼ねてやってみることにしました

やっぱり順調にはいかなかったw

探した結果、安価で納得できるドメインを購入することが出来ました。此処まではOK。ところがいざ入手した独自ドメインをロリポップの方で設定しようとすると「既に使われています」とエラーが出る。せっかく買ったのに使えない!もう此処で躓きました。

サーバー関係を熟知している父に手伝ってもらったところ、私が何を設定したのか、ドメインを購入したと同時に自動で新しくロリポップのアカウントが生成されてしまい、そっちで使うように設定されていたのです。試行錯誤してロリポップのアカウントだけを消すことで、本来の自分のアカウントで独自ドメインを設定できました。こうなればもうSSL化も可能です。長年の願いがようやく実現できました!

古いURLにアクセスしても自動で切り替わるように!

でもこれで「yukiyanagi.oops.jp」が「yukiyanagi.art」に変わったわけではありません。ただドメインが増えただけです。また2年前に作った名刺やパンフレットには旧URLが記載してあるので、イベントで名刺やパンフレットを受け取った人が私のサイトを訪問しようとすると、ずっと旧URLの方にアクセスし続けることになります。

5年前にFC2からロリポップに引っ越した時のように、旧URLにアクセスすると「●秒後に新しいサイトに移動します」って出すのもあまりカッコよくないんですよね。結局サイトが2つあることに変わりはないし、毎回無駄なステップ踏むことになるのでスタイリッシュではありません。

そこで行ったのが「301リダイレクト」という方法。恒久的にサイトを移転したとき、よく行われる方法だそうです。つまり、古いURLにアクセスすると自動で新しいURLに切り替わり、最初から新しいサイトの方を開くことが出来るのです。

301リダイレクトは「.htaccess」というファイルで行うのが一般的です。実はこのファイル、404ページの設定やサイトのBasic認証の設定など、さまざまなところでよく使うファイルです。

当初、父がやっていた方法を真似て<IfModule>というタグで囲い、その中に必要な情報を書いていったのですが、するとなぜかサイトかチカチカして永遠に見れない状態に陥ったので、付けるのはやめました。そして下記の情報だけで良いことがわかりました。

  1. RewriteEngine On
  2. RewriteCond %{HTTPS} off
  3. RewriteRule ^(.*)$ https://yukiyanagi.art/ [R=301,L]

でもあとでこのブログを書くにあたって改めて調べてみたら、このサイトがまんまその通り書いてました(汗)
301リダイレクトとは〜htaccessを利用して転送を行う方法|ferret(このサイトの2-3.の項目)

【後日談】データ丸ごとフォルダ移動してもリダイレクトできるようにした

先の話で「ドメインが増えただけ」と書きましたように、ロリポップでは1つアカウントで複数の独自ドメインを持つことが出来ます。(エコノミープランで20個まで)
そして独自ドメインごとにファイルをアップロードするフォルダを設定することで、複数のサイトを管理できちゃうのです。

multidomain.gif
マルチドメインの設定 / ドメイン / マニュアル - レンタルサーバーならロリポップ!

ただ今まで私は、Yukiyanagiサイトのデータやドメインを特にフォルダ指定していませんでした
そのため、もし今後別のサイトを運営したいと思ってフォルダを用意しても、あくまで「yukiyanagi.art」の中のデータとして認識されてしまいます

なので今のサイトのデータを、ロリポップドメインで言うところの「yukiyanagi.oops.jp/公開フォルダ/」というディレクトリにする必要があります。そうなると、リダイレクトの方法も先のやり方では上手くいきません。
今までのリダイレクトはただドメインの移動だけで済みましたが、今度は階層とドメイン両方指定しないといけません

こちらも試行錯誤の上、一番外側のディレクトリに新たに.htaccessを用意し、yukiyanagiサイトのデータがあるフォルダに必ずアクセスするようリダイレクトの設定をすれば良いことがわかりました。

【保存版】.htaccessを利用したリダイレクト方法まとめ | 名古屋でホームページ制作するなら集客に強い株式会社エッコ

よく使う .htaccess を利用したリダイレクト方法をまとめました。コピペですぐに使えるコードと合わせて、暗号のような意味不明なコードを少し掘り下げて説明しています。少し意味がわかると応用がきくので、記述の意味について興味のある方も、ぜひご覧ください。

上記のサイトを参照し以下のように書いたら、上手くリダイレクトできるようになりました。

  1. RewriteEngine On
  2. RewriteRule ^(.*)$ /公開フォルダ/$1 [L,R=301]
  3. # 「$1 [L,R=301]」の前の/(スラッシュ)は必須です。ないとリダイレクトが上手くいきません

試しに別でフォルダを用意してコンテンツをぶち込み、そこに他のドメインを設定してみました。うん、ちゃんと反映されています。
https://nnpz.site/(※2019年のサイト内容。あくまで試験的にアップしているだけです)

ごちゃごちゃといろいろ書きましたけれど、なにか根本をちゃんと理解できていない気がするので、勘違いも多々あると思います。なんか言ってることがおかしいなと思ったら、コメント欄で教えていただけると嬉しいです。

0 Comments

Leave a comment