CloudFrontとRoute53で作るグローバル対応Webサイト

横田あかり

2014.05.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

グロバール対応Webサイトを作ろう

前回は、グローバル対応Webサイトがどんなものであるかご紹介しました。今回は、AWSのサービスを組合せて、実際にグローバル対応Webサイトを構築してみたいと思います。

トップドメインへのアクセス

今回はテスト用にakari7.netを用いたいと思います。必要に応じて皆さんが管理したいドメインと置き換えて考えてください。

akari7.netからwww1.akari7.netへ転送する方法はいくつかありますが、今回は、S3を使ってみたいと思います。

まず始めに、オリジンとなるS3バケットを作成します。このバケットは特に何もファイルを起きません。アクセスがあった際にはリダイレクトをする設定を記述します。名前はドメイン名と同じにしましょう。

screenshot 2014-05-19 0.48.58

Route53の設定はこんな感じです。

screenshot 2014-05-18 22.06.37

動作を確認したところ、たしかにakari7.netからwww1.akari7.netに転送されていることが分かりました！

$ curl -D head akari7.net
$ cat head
HTTP/1.1 301 Moved Permanently
x-amz-id-2: sz9oblSrFCUnfzeh9mCBTxJXlKXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
x-amz-request-id: 18F479191D25CE07
Date: Sun, 18 May 2014 12:29:49 GMT
Location: http://www1.akari7.net/
Content-Length: 0
Server: AmazonS3

レイテンシベースのルーティング

Route53には、レイテンシ（地理）ベースのルーティングに対応しています。言い換えれば、アクセス元の地域に最も近いリソースセットを返す仕組みです。同じドメインに対して、日本からのアクセスであれば日本向けのリソース、アメリカからであればアメリカ向けのリソースといった具合です。サーバー側で処理が要らないですしお手軽ですね。

実際にやってみましょう！まず、バージニアと日本にそれぞれEc2のサーバを立ててEIPを振ります。この部分は各リージョンのELBでも構いません。そして、Route53でレイテンシベースのルーティング設定を行います。

screenshot 2014-05-18 22.07.52

バージニア側も同じように設定しました。

screenshot 2014-05-19 0.51.05

これで基本的な設定は完了しています。実際にアクセス元から近いリソースを見てくれるか確認してみましょう。

日本のサーバにアクセスすると、「JAPAN homepage top」と表示するようにindex.htmlを置きました。イイ感じですね。

$ curl -D head www1.akari7.net
JAPAN homepage top

$ cat head
HTTP/1.1 200 OK
Date: Sun, 18 May 2014 13:10:48 GMT
Server: Apache/2.2.27 (Amazon)
Last-Modified: Sat, 17 May 2014 13:28:43 GMT
ETag: "20fdb-13-4fXXXXXXXXXXXX"
Accept-Ranges: bytes
Content-Length: 19
Connection: close
Content-Type: text/html; charset=UTF-8

続いてバージニアに置いたサーバにアクセスすると、「US homepage top」と表示されるようにしました。実際にアメリカのサーバからアクセスしてみます。こちらもイイ感じですね。

$ curl -D head www1.akari7.net
US homepage top
$ cat head
HTTP/1.1 200 OK
Date: Sun, 18 May 2014 13:13:02 GMT
Server: Apache/2.2.27 (Amazon)
Last-Modified: Sat, 17 May 2014 13:39:30 GMT
ETag: "20e7d-10-4f998XXXXXXXX"
Accept-Ranges: bytes
Content-Length: 16
Connection: close
Content-Type: text/html; charset=UTF-8

各地域用のホームページ配下のディレクトリに転送する

レイテンシベースのルーティングによって、ひとつのドメインにアクセスするだけで、自分が住んでいる地域のページの表示ができることが分かりました。しかし、ここでひとつ問題が発生します。便利になったのですが、あえて違う地域のページを見たいときに見れません。日本からアクセスしているんだけど、アメリカのページが見たいといった場合です。国ごとに表示されるコンテンツが違う場合には見たいこともあります。そこで、ここでは、改めて各国のページのディレクトリを切って転送したいと思います。

akari7.netにアクセスしたら、www1.akari7.netに転送されて、アクセス元の場所が日本ならwww.akari7.net/jp/に転送します。

違うパスに転送するのはApacheのRedirectを使ってみます。httpd.confのを修正します。

<Directory "/var/www/html">
・・・
AllowOverride FileInfo
・・・
</Directory>

.htaccessを修正します。

$ sudo vi /var/www/html/.htaccess
RedirectMatch 301 .* http://www.akari7.net/jp/

同じようにアメリカ用のサーバも修正してください。それでは、動作確認をしてみましょう。

$ curl -D head www1.akari7.net
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://www.akari7.net/jp/">here</a>.</p>
<hr>
<address>Apache/2.2.27 (Amazon) Server at www1.akari7.net Port 80</address>
</body></html>

$ cat head
HTTP/1.1 301 Moved Permanently
Date: Sun, 18 May 2014 15:57:37 GMT
Server: Apache/2.2.27 (Amazon)
Location: http://www.akari7.net/jp/
Content-Length: 314
Connection: close
Content-Type: text/html; charset=iso-8859-1

いい感じに日本のパスに転送されてましたね。続いてアメリカからも接続テストします。

$ curl -D head www1.akari7.net
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://www.akari7.net/us/">here</a>.</p>
<hr>
<address>Apache/2.2.27 (Amazon) Server at www1.akari7.net Port 80</address>
</body></html>

$ cat head
HTTP/1.1 301 Moved Permanently
Date: Sun, 18 May 2014 15:58:53 GMT
Server: Apache/2.2.27 (Amazon)
Location: http://www.akari7.net/us/
Content-Length: 314
Connection: close
Content-Type: text/html; charset=iso-8859-1

よし出来た！

全世界にコンテンツを配信する

さて、ひと通りの仕組みが出来上がりました。しかし、まだ安心しては行けません。リダイレクトがうまく行っただけです。次は、静的コンテンツへのリクエストをCloudFrontに回し、動的コンテンツへのリクエストをテイレンシベースで各リージョンに振り分ける工夫をしてみましょう。

静的コンテンツの配信であれば、ディレクトリを切ってCMSからパブリッシュし、カスタムオリジン設定にしてCloudFrontでキャッシュすればOKです。そして、CloudFrontのURLビヘイビアで*.phpなどの動的コンテンツリクエストの場合のみwww2.akari7.netなどをカスタムオリジンとしてリクエストを転送します。

Cloudfront-Diagram_Website_Updated

表示言語を切り替える

最後に、表示言語の切り替えについてです。利用者の言語設定を判定する方法はいくつかあります。最も簡単なのはブラウザの表示設定です。次に、登録済みのユーザであれば会員情報から調べる方法もあります。後はCookieを調べるなどもありますね。何にせよ、JavaScriptや動的プログラムでの判定となります。

表示するページを記憶する

一度、表示するべき地域のページを選択したのであれば、2回目以降は同じ地域のページを見たいかもしれません。そういった場合には、一度地域を切り替えたタイミングでCookieに保存しておき、2回目以降に地域を指定しないでアクセスがあった場合には、Cookieから地域情報を読み込んでリダイレクトするという方法も考えられますね。

おさらい

今回実現したことをまとめます。ユニクロと同じことできちゃったｗ

ドメイン/パス	説明
akari7.net	トップドメイン
www1.akari7.net	地域判定用
www.akari7.net	CloudFrontでキャッシュ
www.akari7.net/jp/	地域のコンテンツ
www.akari7.net/jp/hoge.php	動的コンテンツ

まとめ

ホームページは企業の顔です。世界で統一されたブランドであり、かつ、閲覧する地域によってコンテンツを変え、使用する言語に応じて表示を変える。きめ細かな対応がブランド力を高め、商品やサービスの価値を更に上げることができそうです。一昔前までは、非常に高価な製品やサービスを組合せなければ実現できなかった世界対応のホームページ運用ですが、AWSによって、安価で身近になりました。世界展開されている企業の皆様、シングルドメインでマルチサイ/マルチ言語のホームページを是非ご検討ください。