CloudFrontとRoute53で作るグローバル対応Webサイト
グロバール対応Webサイトを作ろう
前回は、グローバル対応Webサイトがどんなものであるかご紹介しました。今回は、AWSのサービスを組合せて、実際にグローバル対応Webサイトを構築してみたいと思います。
トップドメインへのアクセス
今回はテスト用にakari7.netを用いたいと思います。必要に応じて皆さんが管理したいドメインと置き換えて考えてください。
akari7.netからwww1.akari7.netへ転送する方法はいくつかありますが、今回は、S3を使ってみたいと思います。
まず始めに、オリジンとなるS3バケットを作成します。このバケットは特に何もファイルを起きません。アクセスがあった際にはリダイレクトをする設定を記述します。名前はドメイン名と同じにしましょう。
Route53の設定はこんな感じです。
動作を確認したところ、たしかに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でレイテンシベースのルーティング設定を行います。
バージニア側も同じように設定しました。
これで基本的な設定は完了しています。実際にアクセス元から近いリソースを見てくれるか確認してみましょう。
日本のサーバにアクセスすると、「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などをカスタムオリジンとしてリクエストを転送します。
表示言語を切り替える
最後に、表示言語の切り替えについてです。利用者の言語設定を判定する方法はいくつかあります。最も簡単なのはブラウザの表示設定です。次に、登録済みのユーザであれば会員情報から調べる方法もあります。後は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によって、安価で身近になりました。世界展開されている企業の皆様、シングルドメインでマルチサイ/マルチ言語のホームページを是非ご検討ください。
