こんにちは。ヒサノアスカ(@AsukaHisano)です。
シンプル・イズ・ザ・ベストが信条なこともり、当ブログのURLはa-h.workのwwwを付けない形式を採用しています。
そんな中、ちょっとしたきっかけがありまして、www.a-h.work にアクセスがあった場合でもa-h.workに遷移できるように設定変更してみました。
ムームードメイン
のDNSや さくらのレンタルサーバ
の独自の設定仕様などもあってちょっとこうハマリかけたりもしたのですが、無事に思いどおり動作するようになったので、備忘録として残しておきます。
ざっくりとした全体の手順
さっさと結論出せよ!というせっかちな方のために、必要な手順をざっくりとまとめておきます。
- ムームードメイン
のムームーDNSでwwwをサブドメインとして登録する
- さくらのレンタルサーバ
のコントロールパネル上でwww付きドメインを追加する
- www付きドメインをSSL化
- www付き・なし両方のドメインで「wwwを付与せずマルチドメインとして使用する(上級者向け)」に設定する
- .htaccessに301リダイレクト設定をしてサーバーにアップロード
- 動作確認
以上です。
これで十分だという方はこの先は特に見る必要ありませんが、詳細な手順を知りたい方はこのまま読み進めてください。
どんな時にこの手順が必要なの?
実はこの面倒くさい手続き、すべての方がやらなければならないってわけじゃありません。
唯一にして最大の前提条件は、 さくらのレンタルサーバ
のサーバーコントロールパネル上でドメインを管理していること。
ムームードメイン
のDNS設定については別のドメイン管理システムで似たようなことをすればOKなので、あまり難しく考える必要はないと思います。
また、ドメインサイトのDNS等でDNS設定を完全にコントロールしている場合は、多分普通に.htaccessで制御するだけで何とでもできるはず。
また、 さくらのレンタルサーバ
は何かと独自の設定が多いため、ちょっとした設定が他のサーバーとは異なるケースが多いです。
なので さくらのレンタルサーバ
以外のレンタルサーバーを使用している方にはあまり役に立たない可能性があるのでご注意ください。
手順1 ムームDNSでwwwをサブドメインとして登録する
ムームードメイン
で独自ドメインを取得し、ムームーDNSでネームサーバー設定をしている場合、wwwもサブドメインとして登録する必要があります。
サブドメインの登録方法はそんなに難しいものではありません。
- ムームードメイン
のムームーDNSページを開く
- 対象ドメインの「処理」欄にある「変更」をクリック
- 「設定2」でサブドメインにwww、種別と内容にそれぞれ必要事項を入力し「セットアップ情報変更」をクリック
- 変更内容を確認して確定する
DNSの内容が有効になるまでしばらく時間がかかりますが、私の経験からすると10分~30分でwww付きドメインにアクセスできるようになります。
ただし場合によっては数時間かかるケースもあるようなので、時間に余裕を持って対応してください。
また、以前書いた記事では実際の画面を使っての図解などもしているので、よければご参照ください。
手順2 さくらのコントロールパネル上でwww付きドメインを追加する
前の手順と同じく以前書いた記事で図解していますが、一応手順をまとめておきます。
- さくらのレンタルサーバ
のサーバーコントロールパネル上でドメイン設定のドメイン/SSL設定を開く
- ドメイン一覧表の右上にある「新しいドメインの追加」ボタンをクリック
- 画面をスクロールして「5. 他社で取得したドメインを移管せずに使う」内の「>> ドメインの追加へ進む」リンクをクリック
- 「他社で取得した独自ドメインの追加」にwww.(ドメイン名)を入力し、「*送信する*」ボタンをクリックする
- 「ドメイン追加 完了」の画面が出てくるので、いったん「>> ドメイン一覧 <<」をクリックして一覧画面に戻ります。
ちなみに詳しい画面遷移も確認したい場合は以下のリンクからご確認ください。
手順3 www付きドメインをSSL化
手順4とは順番が逆でも問題ないかと思いますが、SSL化にはちょっと時間がかかるので、先にドメインをSSLしておきましょう。
「実際に使わないドメインなのになぜSSL化する必要があるの?」と思われるかもしれませんが、一度www付きのURLで着地してからの移動となるため、きちんとSSL対応されてない場合はプライバシーポリシーエラーになります。
ちなみに元のドメインを常時SSL化してない場合はこの手順は省いていいですが、SEO的にもセキュリティ的にもサイトの常時SSL化はほぼ必須とされているため、この機会にやっちゃっておくといいかと。
SSL化の手順も、そう難しいものではありません。
- wwwつきドメインのSSL証明書欄にある「登録」リンクをクリック
- 今回は無料SSLを使用するので、「無料SSLの設定へ進む」をクリック
- 無料SSL証明書についての説明に目を通して一番下の「無料SSLを設定する」をクリック
- 無料SSL適用の手続きが開始されるので、SSLが適用されましたというメールが届くのを待つ
この手順も以前の記事にて図解しているので、以下のリンクからご確認ください。
手順4 www付き・なし両方のドメインで「wwwを付与せずマルチドメインとして使用する(上級者向け)」に設定する
この手順4はwwwありドメインとwwwなしドメイン両方で設定をします。
さくらのレンタルサーバ
では独自ドメインを新規に設定すると、
- 設定したドメイン&ドメインにwww.を付与したマルチドメインとして登録
- wwwを付与せずマルチドメインとして使用する(上級者向け)
- さくらのブログで使用する
のいずれかを選択しなければなりません。
元々wwwありのURLとなしのURLどちらでもアクセスできていた場合は一番上の設定を選択していたことになります。
けれど今回はwwwなしのURLに統合する形になるため、このままではちょっと都合が悪いのです。
というわけで、以下の手順をwwwなしのドメインとwwwありのドメイン両方で行います。
- 該当ドメインの右端にある「変更」ボタンをクリック
- 1. 設定をお選びくださいで上から2番目の「wwwを付与せずマルチドメインとして使用する(上級者向け)」を選択する
基本的にはこれだけです。
ただし新規で作ったwwwつきドメイン設定の際に、「2. マルチドメインの対象のフォルダをご指定ください」で適当なフォルダ名(wwwとかwww.a-hなど)を指定しましょう。
この時点ではまだサーバー上にフォルダがなくても問題ありません。
(ちなみにもし設定が完了するまでにwww付きドメインにアクセスがあった場合は さくらのレンタルサーバ
のデフォルトページが表示されます)
コントロールパネル上での作業はこれでおしまいです。
手順5 .htaccessに301リダイレクト設定をしてサーバーにアップロード
www付きドメインの対象フォルダにアクセスがあった場合、wwwなしのドメイン301に転送するように.htaccessの設定をします。
もしWordPressを使用していない&.htaccessを作ってない場合は、メモ帳やエディタを開いて新規ファイルを作ります。
WordPressを使用している場合はすでにサーバー上に.htaccessファイルが存在するので、それをダウンロードしてエディタで開きます。
そして以下のコードをファイルの一番最後にコピペしましょう。
RewriteEngine on RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
[R=301,L]の後には必ず改行を入れること。じゃないとエラーになるようです。
ファイルを保存したら、FTPソフトでwwwつきドメインの対象フォルダにアップロードしましょう。
ファイルを新規作成した場合は、htaccess.txtとして一度保存し、FTPソフトでアップロードしたその後、ファイル名を.htaccessと変更してください。
(PC上で.htaccessに変更できるのならアップロード前に変更してもOKです)
手順6 動作確認
ここまでの手順が完了したら、最後にきちんと想定どおりにアクセスできるか試してみます。
www付きドメインをアドレスバーに入力して、wwwなしドメインに移動すれば大成功です!
上手くいかない場合はどこかで何かを間違えているので、これまでの手順や.htaccessの設定を再確認してください。
おまけ wwwなしからwwwありに統一したい場合
やることは手順5とほぼ同じですが、ドメインの対象フォルダの指定がちょっとトリッキーです。
- wwwつきドメインの対象フォルダはサイトデータのあるフォルダを指定
- wwwなしドメインの対象フォルダは別の空フォルダを指定
また.htaccessファイルに書き込むコードは以下のものになります。
RewriteEngine On RewriteCond %{HTTP_HOST} ^sample\.com$ [NC] RewriteRule ^(.*)$ https://www.sample.com%{REQUEST_URI} [R=301,L]
当然ですが、ドメインは実際のものに変更してくださいね!
おわりに
今回この設定のためにいくつかのサイトを見て回ったのですが、.htaccessのコードについて何種類かの記述方法があったため、最終的にちゃんと動作するもの(今回紹介したもの)を見つけるまでちょっと時間がかかりました……
また、もし上記のコードを使って上手くいかない場合は他のコードで試してみてくださいね!