LoginSignup
7
5

More than 3 years have passed since last update.

【AWS】『SSL化』&『www統合,リダイレクト』させる方法

Last updated at Posted at 2019-04-17

私自身、この問題にぶち当たって、適当な記事を見つけ出すことができずに自力で解決しました。
私と同じことになっている人の目に留まれば良いなと思い、記事にします。
私ははlightsailですが、EC2の方がむしろ意味有る内容なのでAWS使う人達にはぜひ見てほしい内容です。
最初にlightsailの問題点から解決していくので、EC2では記事中盤から見てみると良いと思います。

前提・実現したいこと

AWS(今回はlightsail)で構築した、wordpressにおける『www』有り無し統合の実現を目指します。
(この問題は、レコードの問題なので別にwordpressじゃなくても大丈夫です。)

まず、私は下の記事を参考に、サブドメインwww付きの「www.sample.com」をssl化することに成功しました。
無料ssl化の方法;https://dev.classmethod.jp/cloud/aws/how-to-install-original-domain-ssl-wordpress-with-amazon-lightsail/

この方法ではlightsailで提供されている有料ロードバランサーでのssl化をしないで無料でssl化できます。
ただしドメインに関しては『www.sample.com』のようなサブドメイン付きになります。
(www無しで統一したい場合はlightsailの有料ssl化の方法が一番良いと思います。)

注意点

上の項目で紹介したリンクの方法のままでは「www.sample.com」からwordpressへログインすると、一部の条件下でリダイレクトループが起こります。
→下記の記事を参考に、「『Path Pattern』が【Default(*)】のもの」の『Forward Cookies』の設定を編集すべし!(記事の下の方にある表の一番右の列です。)
7つほどを設定する必要があるので、下記記事のものと全く同じ設定にすれば良い。
https://aws.amazon.com/jp/blogs/startups/how-to-accelerate-your-wordpress-site-with-amazon-cloudfront/

問題点

ここまでは良かったのですが、一つ問題がありました。
それは、lightsail内で「www無し」でのレコード登録ができない点です。
つまり、【www無し→www有り】のレコードが登録できません。

今回はこの問題を解決したいと思います。

(301リダイレクトで調べてしまうと、『.htaccess』ファイルでのリダイレクトがヒットするのですが、これは解決方法に全く関係ない内容ですので意味ないです。今回の内容ではそもそもレコードが登録されていないので、ファイル書き換えなどでは無意味だからです。また豆知識として、lightsailのwordpressには『.htaccess』のファイルは存在しないので、301リダイレクトは『htaccess.conf』ファイルにて行わせるらしいです。)

エラーメッセージ

lightsail内で「@.sample.com」をCNAMEでDNSレコード登録しようとした際の表示。

Invalid parameters: [RRSet of type CNAME with DNS name sample.com. is not permitted at apex in zone sample.com.]

サブドメインなしでCNAMEレコードを登録しようとすると、この様になると思います。

Route53へDNSを移行する

これが今回の根本的な解決方法です。
lightsailに限らず、DNSをRoute53に移行すれば同じことができます。

lightsailに関して、Route53にもlightsailにも、NSレコードが存在します。
lightsailで構築した人は、lightsailのNSレコード(4つ並んでいるやつ)をムームードメインなどのレジストラに書いたと思いますが、Route53のものに書き換えてください。そうすれば移行完了です。

(当たり前ですが、レジストラには両方書けないのでlightsailとRoute53のDNSの両立はできませんし、Route53にまとめて移行した方が楽です。)

lightsailとRoute53のDNSレコードの違い

lightsail内では、www無しのドメイン(Zone Apex)はCNAMEレコードを登録できないので、統合は実現不可能でした。

そこで、Route53で『ALIAS レコード』を用いることで統合させることができます。

ligthsailにはRoute53のALIASレコードのような、『Zone Apex をレコード登録出来る機能』が無いです。
Route53の方が上位互換ですね。

理解のための図

この図では、冒頭の項目「前提・実現したいこと」の項目で紹介したURLでのSSL化の方法と、自分で設定したリダイレクトの構造をあわせて説明しています。
今回はこれを実践します。
kkk.jpg
この矢印の経路を指定しているのがDNSですが、今回は右上の一個を追加してあげるということで解決しております。

リージョン設定を統一すること

冒頭で紹介した「無料SSL化の方法URL」にも書かれていますが、利用するシステムのリージョンがそれぞれ違うとできないので気をつけながらやってください。
私はバージニア北部のリージョンにしています。

S3の設定

「S3でのリダイレクトの方法」で検索すれば出てきます。
中身の要約
1. バケット名を【www無しのドメイン】で作成
2. 空のindex.htmlを入れる(bodyは空で良い)
3. バケットのプロパティにて『Static website hosting』の「このバケットを使用してウェブサイトをホストする」にチェック
4. インデックスドキュメント→index.html
5. リダイレクトルールに下記を記述

<RoutingRules>
<RoutingRule>
<Redirect>
<HostName>www.sample.com</HostName>
<ReplaceKeyWith/>
</Redirect>
</RoutingRule>
</RoutingRules>

(sample.comはお使いのドメイン)
6. 「Static website hosting」の上部にあるエンドポイントURLをクリックしてリダイレクトされているか確認。

S3は以上です。

Route53へDNSの移行後の処理

Route53に関しても調べればすぐに出て来ると思いますが、要約します。

  1. ホストゾーン作成時に設定するドメイン名を【www無しの正しいURL】で設定してください。(S3バケット名と同じ。)
    とりあえず、lightsailにレコード登録してあったものをRoute53に全部書き写しちゃってください。必要ないのであれば捨てても構いません。

  2. 次にRoute53で新規レコードを登録します。
    種類をAにして、エイリアス(Alias)にチェックしてください。
    サブドメイン入力欄には何も入力しないでください。(lightsail時代には「@」をいれていたが。)

  3. エイリアス先のところに、S3が候補として出てくると思うのでそれを選択。
    (【正しい同じドメイン名】じゃないと表示されないはず。)

これで完了です。

以上になりますが、不具合があったらリージョンの設定とドメイン名をよく確認してください。
最後にもう一度「理解のための図」を見て確認するのが良いと思います。

おまけ

私が上記の手順を実行した際に起こったトラブルと解決法を示します。
・ssl化したあとに、www.sample.comへアクセスすると、「安全でないコンテンツが含まれている」と表示される。
→ソースコードに「http」が混ざっていた。(混在コンテンツ) 修正すれば直る。ただし、混在コンテンツに関してはプラグインの設定やその他ファイルの編集の影響で起こったりなくなったりしますので、単純にURLを変更しようとするのではなく他の原因を模索するべきです。

ちなみに混在コンテンツに関しては下記二点をクリアすると直ることが大半だと思います。

・「www.sample.com/wp-login/」からログインできない。
→「wp-config.php」のファイル内に「http→https」の記述をしたと思うのだが、その記述位置がおかしい。
詳しくはコチラ、すぐに分かる。
https://lucklog.info/wp-ssl-error/

・「www.sample.com」からwordpressへログインすると、一部の条件下でリダイレクトループが起こる。
→下記の記事を参考に、『Path Pattern』が【Default(*)】のものの『Forward Cookies』の設定を確認すべし!
7つほどを設定する必要がある。
https://aws.amazon.com/jp/blogs/startups/how-to-accelerate-your-wordpress-site-with-amazon-cloudfront/

・Wordpressのビジュアルエディタとテキストエディタの表示をさせる。
Cloudfrontを通すとアーダコーダ...という問題があるので、(下記記事参考)
お使いのテーマの「functions.php」に追加で記入するものがあります。
https://jyo-to.okinawa/20170520/1092/

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5