【図解】さくらで静的サイトを無料SSL化。設定方法やhttps・www有無の301リダイレクト方法をまとめました。

【図解】さくらで静的サイトを無料SSL化。設定方法やhttps・www有無の301リダイレクト方法をまとめました。

休日を利用して、さくらレンタルサーバーで運用している静的サイトの無料SSL化を行いました。

ビビリな私は、事前に公式サイトのマニュアルや、実際に設定された方々のブログ記事などを丸一日かけて読み漁り、情報収集。💻

いろいろ調べていくと、SSL設定は簡単だけど、その後の.htaccessを使ったリダイレクト設定に皆さん苦労されてる感じで・・・うーん、ハマりたくない(*´・ω・`)

なんて不安に思っていましたが、実際にやってみたら 「案ずるより産むが易し」 で、懸念していた事象は発生せずスムーズにSSL化できました。ふぅよかった。

そんなわけで今回はさくらレンタルサーバーで無料SSL化したお話です。(自分用の備忘録兼ねてます😅)

さくらレンタルサーバーで静的サイトをSSL化したい!

今回の目的はこの2つ。

【1】静的サイトを無料SSL化

さくらレンタルサーバーで独自ドメインサイトを無料SSL化

まずは、現在さくらで運営している静的サイトを無料SSL化したい。

現在のサイト構成

現在のサイト構成は、静的サイトCGIで動くお問い合わせフォームを設置しているだけという、ごくごくシンプルなものです。ざっくりですがサイト構成をイメージ図にするとこんな感じ↓

静的サイトの構成イメージ図

ちなみに独自ドメインはさくらインターネットで取得・設定済みで、レンタルサーバーはスタンダードを契約しています。

【2】 URLの正規化 (.htaccessで301リダイレクト)

URLの正規化(301リダイレクト)

そしてSSL設定後は httpはhttpsへ、wwwなしはwwwありへ、最終的に https://www.sample.com にアクセスを統一しURLの正規化を行いたい。

※ この記事で使用している独自ドメイン「sample.com」はあくまで一例です。

Advertisement

さくらレンタルサーバーで無料のSSLを設定する手順

私が実践した無料SSL化の大まかな手順は以下のとおり。

【0】<準備編> 手順確認・バックアップ
【1】さくらのコンパネから無料SSLを有効にする
【2】サイトコンテンツの動作確認・リンク修正
【3】URLの正規化 (httpをhttpsへ301リダイレクト)

設定のタイミングですが、時間に余裕がある&アクセスの少ない曜日や時間帯を選んで行うのが良いと思います。

0.<準備編> 無料SSL化の手順確認とバックアップ

まずは無料SSL化の手順確認やバックアップを行いました。あと、URL変更後のデータの用意や、登録メールアドレスの確認も。

◎ 手順を確認

設定マニュアルを印刷

さくらの公式サポートにあるマニュアルや、よくあるご質問をじっくり読みこみました。

【1】[無料SSL] サーバーコントロールパネルからの導入手順
【2】[無料SSL] よくあるご質問
【3】.htaccessによるアクセス制御

実際にパソコン上で設定していると、ウインドウをいくつも立ち上げての作業となり、煩雑になりやすいので、わたしはいつもマニュアル類は印刷して手元においています。メモしながら進めていきたい派です。

◎ サーバー上のデータをバックアップ

念のため、サーバー上にあるデータはローカルへバックアップしておくと後で何かあっても安心です。データはFTPクライアントソフト(FFFTPやFileZillaなど)やさくらのファイルマネージャーを使ってダウンロードできます。

参考URL:さくらファイルマネージャーでのダウンロード方法

◎ URL変更後のサイトコンテンツを用意

サイト内に記載された絶対パスは、httpからhttpsへ変更する必要があります。(相対パスならそのままでOK)

私は事前にバックアップしたデータをコピーして、絶対パスの記載箇所をhttpsへ変更したデータを用意しておきました。

◎ さくらインターネットの登録メールアドレスを確認

SSL設定後、さくらインターネットに登録済みのメールアドレスに「[さくらインターネット]SSLサーバ証明書発行のお知らせ」というタイトルで完了メールが届きます。そのため、登録済みのアドレスに間違いがないか、念のため確認しておきました。

もし、メールアドレスを変更したい場合は、さくら公式サイト「登録メールアドレスの確認・変更する場合」を参考に設定しましょう。

Advertisement

1. さくらコントロールパネルから無料SSLを有効にする

さて、準備が整ったら作業開始です! さくら公式サイト「【無料SSL】サーバコントロールパネルからの導入手順」に従って無料SSLを設定していきます。

① サーバーコントロールパネルへログイン

さくらサーバーコントロールパネルのログイン画面

さくらの「サーバーコントロールパネル」へアクセスし、ログインします。

② ドメイン設定画面へ移動

ドメイン SSL設定画面へ

ログイン後、コンパネの左カラムにある「ドメイン/SSL設定」をクリックします。

③ SSL化したいドメインを選択

SSL化したいドメインを選択

ドメイン一覧から、SSL化したいドメインのSSL証明書欄にある「登録」をクリックします。私の場合、さくらでは独自ドメインをひとつしか設定していないのですが、複数の独自ドメインを設定している場合は、この画面にダダーっと表示されてるはずです。

📝補足

◎ マルチドメインについて

さくらレンタルサーバーのマルチドメイン設定
▲ コンパネの「ドメイン設定/SSL設定」から、該当ドメインの「変更」ボタンで確認できます。

さくらでは独自ドメインを追加する際に ”マルチドメインとして使用する (推奨)” がデフォルトで設定され、自動的に「www」つきも同時に使用できる仕様となっています。例えば、sample.com という独自ドメインを設定した場合は、「http://sample.com」と「http://www.sample.com」が同時に利用可能となります。

参考URL:【ドメイン設定】さくらインターネットで取得・管理中のドメインを利用

この仕様に伴い、例えば sample.com に無料SSLを設定すると、「https://sample.com」と「https://www.sample.com」の両方でアクセスできるようになります。

◎ www.をサブドメインとして登録している場合は?

wwwサブドメインを登録している場合

私は該当しませんが、wwwありをあえてドメイン設定している場合は、両方にSSL設定を行う必要があるそうです。もし片方にしか設定していない場合は自動更新が出来ないそう。お気をつけ下さい。

参考URL:さくら SSL利用時の注意点

④ 無料SSL設定へ進む

無料SSL設定へ進む画面

SSLサーバー証明書概要が表示されたら「無料SSLの設定へ進む」ボタンをクリックします。

⑤ 利用規約を確認、無料SSLを設定

無料SSL設定画面

無料SSL証明書についての画面が表示されたら、「Let’s Encryptの利用ポリシー」をクリックし、内容を確認します。その後、画面に表示されている「設定の流れ」と「サイトの転送(リダイレクト)方法について」を確認します。上記内容を確認できたら、「無料SSLを設定する」ボタンをクリックします。

⑥ 設定完了!反映を待とう。

さくらSSL設定

これでコンパネ側での設定は完了。httpsでアクセスできるようになるまで数十分から数時間かかるそうですが、私のサイトの場合、「無料SSLを設定する」ボタンをクリックしてから7分後に表示され、13分後に証明書発行完了メールが届きました。

Advertisement

2.サイトコンテンツの動作確認・リンク修正

◎ コンテンツの動作確認

ブラウザでhttpsを入力

ChromeやEdge、Firefoxなどのブラウザに「https://sample.com」を入力してサイトが表示されるか確認します。※sample.comはご自身のドメインに置き換えて下さい。

SSL化後のブラウザ表示(Google Chrome)

無事にSSL化されていればhttpsでもアクセスが可能となり、サイトが表示されます。この段階で上記画像の「SSL不完全」の状態でも大丈夫です。

ChromeのSSLアクセスエラー画面

ちなみに、まだ反映されていない場合は、上記のようなエラー画面(Google Chromeの場合)が表示されます。

httpsでの接続が確認できたら、サイト内の画像など表示されているかどうかチェックしていきます。私はお問い合わせフォーム(CGI)も設置しているので、実際にhttpsでアクセスしてフォームが機能するかも確認しました。

◎ URLの修正

サイト内にhttpのURLがないかどうかHTMLやCSS内をチェックしていき、あればhttpsへ修正します。修正したファイルをFTPクライアントソフト(FFFTPやFileZillaなど)やさくらのファイルマネージャーを使ってアップロード(更新)します。

参考URL:さくら公式サイト「ファイルマネージャーについて

準備段階で修正したファイルを用意していた場合は、そのファイルをアップロードすればOKです。

更新後、ブラウザのアドレスバーに鍵マークが表示されれば修正は完了です。

Advertisement

3.URLの正規化 (.htaccessでリダイレクト設定)

次に、URLの正規化を行います。

URLの正規化については、下記のサイトがとても参考になります。

参考URL:URLの正規化とは?正規化が必要な理由と実践方法

SSLを設定しただけでは、まだ http://~、http://www.~、https://~ 、https://www.~ のURLにそれぞれアクセスできる状態です。今回はこれを httpからhttpsへ、そしてwwwありのURLへ統一していきます。

SSL後、URLを正規化する理由

.htaccessで301リダイレクト設定を順番に行っていきます。

◎ 新規に.htaccessファイルを作成する方法

.htaccessはFTPクライアントソフト(FFFTPやFileZillaなど)でも設定できますが、今回はさくらのファイルマネージャーを使って設定してみました。初心者さんの場合は、こちらのほうがミスしにくいのでオススメです。

すでに.htaccessファイルを作成済みの場合は、事前にバックアップをとってから記述しましょうね。

◎ さくらファイルマネージャーでの.htaccess設定手順

さくら公式サイト「.htaccessによるアクセス制御」ページの.htaccessファイルの作成手順を参考に設定していきます。

さくらサーバーコントロールパネルのログイン画面

まずは、「サーバーコントロールパネル」へアクセスし、ログインします。

コンパネ左カラムファイルマネージャー

左カラムに表示されている「ファイルマネージャー」をクリックします。

さくらインターネットのファイルマネージャー

ファイルマネージャーの画面が表示されたら「表示アドレスの操作」から「ファイル作成」をクリックします。

さくらのファイルマネージャー新規ファイル画面

新規ファイル作成画面が表示されたら、ここにリダイレクト内容を記述していきます。

記述内容は、正規化したいURLによって変わってきます。以下は今回私が行った301リダイレクト設定例になります。

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

httpからhttpsへ301リダイレクト

せっかくSSL設定したのに、http側へアクセスされちゃったら意味がありません。まずは、httpからhttpsへの301リダイレクトを設定します。

さくらのファイルマネージャーでhtaccessを作成

httpからhttpsへの301リダイレクトの記述については、さくら公式サイト「暗号化(SSL)を有効としている場合、暗号化しているページへ誘導したい」を参考にしました。ここに記載されているソースをコピーして、そのままペタッと貼り付ければOK。そして、最後に改行を入れるのを忘れずに。(改行を入れないと動かない場合があります。)

【設定例】

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

入力が終わったら「保存」ボタンをクリックします。

ファイル名を入力

ファイル名は「.htaccess」と入力し「OK」ボタンをクリックします。

ブラウザにhttpから始まるURL(例:http://sample.com や http://www.sample.com )を入力し、httpsへ転送されることを確認します。

② wwwなしをwwwありへリダイレクト

wwwなしからwwwありへリダイレクト

私はさらにwwwありのURLに統一したかったので、wwwなしからwwwありへのリダイレクト設定を記述しました。

【設定例】

RewriteEngine on
RewriteCond %{HTTP_HOST} ^sample\.com$
RewriteRule ^(.*)$ https://www.sample.com/$1 [R=301,L]

ここでハマるかも…と心配していたのですが、2018年3月にさくらのレンタルサーバーの仕様が変更されたことにより、スムーズにリダイレクト出来ました。それ以前にSSL設定にトライした方々は結構面倒な作業に巻き込まれていたようです。😅

参考URL:レンタルサーバーの仕様変更について

他にも.htaccessを使って、例えば「https://sample.com/index.html」のindex.htmlをなしにしたり、URL末尾の「/」を ありor なし にしたりなど細かく設定できます。

リダイレクトの記述に関しては、bemeemoさんの「URL正規化とは?www有り無しhtaccessリダイレクト設定方法まとめ」がとてもわかりやすくまとめられていて、参考になりますよ。😃

さて、これでとりあえずSSL化が完了しました✨

あとは、GoogleのSearch ConsoleやAnalyticsなどの管理側の設定をし直せばOKです。

Advertisement