まずはスマホからアクセスするWebサイトの作成から始めます
「スマホフレーフレー言語応援アプリ」はWebアプリですから、まずWebサーバーをAWS上に立てないといけないですね。
実は、もっと簡単な方法があります。池澤さん、AWSにはAmazon Simple Storage Service(Amazon S3)っていうサービスがありますよね。どんなサービスかご存じですか?
画像ファイルなどをアップロードできるサービスです。
そう、Amazon S3は安価でスケーラブルかつ信頼性の高いクラウドストレージサービスです。ただしそれだけじゃなくて、Amazon S3には、静的なWebサイトをホスティングする機能も備わってるんです。知ってました?
え、そうなんですか? S3は使ったことがありますけど、初めて知りました。アップした画像ファイルなどに簡単にアクセスできて、すごく便利だと思います!
HTMLとJavaScriptを利用して動的な処理を行えばAmazon S3を使って動的なサイトを配信することも可能です。今回のスマホフレーフレー言語応援アプリも動的な部分はJavaScriptで実装して、Amazon S3にファイルをアップしておくことにします。それだけでブラウザからアクセスし、アプリを楽しんでもらえますからね。
Amazon S3のバケットを作成する
Amazon S3を利用するには、まずバケット[1]を作成します。AWSのマネージメントコンソール[2]で「Storage & Content Delivery」の「S3」を選択し、[Create Bucket]をクリックしてください。
[Bucket Name]にグローバルで一意なバケット名を入れます。[Region]は「Tokyo」でいきましょう。[Create]をクリックしてください。
[1] Amazon S3のバケット(Bucket)とはデータ(写真、動画、ドキュメントなど)をアップロードするための入れ物のようなものです。なお、バケット名はリージョンに関係なくグローバルに一意である必要があります。
[2] 取材時には英語表示のみでしたが、4月22日より、AWSマネージメントコンソールは日本語表示も可能になりました。
Amazon S3で静的Webサイトのホスティングを有効にする
バケットが作成されたら[Properties]をクリックします。[Static Website Hosting]という項目があります。
これでWebサイトのホスティングを設定するんですね。
そうです。[Enable website hosting]を選択してください。
[Index Document]は特定のページではなく、フォルダにアクセスがあった場合に表示されるWebページのドキュメント名を指定します。今回はindex.htmlになります。
[Error Document]は、エラーが起きたときに表示されるページの指定です。今回は使いません。
[Edit Redirection Rules]も使いません。[Save]をクリックしてください。
Amazon S3のバケットにポリシーを設定する
AWSのリソースには、基本的にアクセス許可がなければアクセスできません。Amazon S3にアップロードしたファイルも同様です。でも、今回はAmazon S3をWebサイトとして利用しますよね。
はい、だから誰でもアクセスできるようにしないと。ポートを開放するんですか?
バケットとその配下のオブジェクトに対し、「誰でも読み取るのはいいけど、書き込んではだめ」という状態に設定します。
あ、パーミッションを設定するんですね。
正解です。そのためにバケットポリシーを設定します。[Properties]で[Permissions]を開いて、[Add bucket policy]をクリックしてください。
エディターが表示されました。
左下にある「AWS Policy Generator」のリンクをクリックしてください。
AWS Policy Generatorでは、[Select Type of Policy]で「S3 Bucket Policy」、[Effect]で「Allow」を選択し、[Principal]は誰でもアクセスできるように「*」を入力します。
[Actions]ではユーザーに許可するアクションを指定します。ここでは「GetObject」というアクションを許可します。
[Amazon Resouce Name(ARN)]には作成したバケットを一意に識別する名前(ARN)としてarn:aws:s3:::<バケット名>/*
を指定します。
[Add Statement]をクリックして、[Generate Policy]をクリックすると、ポリシーが生成されます。これをコピーして[Bucket Policy Editor]に貼り付け、[Save]をクリックしてください。
Amazon S3のバケットにHTMLファイルをアップロードし、ブラウザからアクセスする
これでAmazon S3の設定は完了です。では確認のためサンプルのHTMLファイルを、AWS CLI[3]を使ってバケットにアップロードします。以下のような内容のHTMLファイル(index.html)を用意してください。
<html> <body> Hello World </body> </html>
池澤さん、AWS CLIでこれらをAmazon S3にアップロードしてみてください。コマンドは次のとおりです。
aws s3 sync <ファイルが格納されたフォルダのパス> s3://<バケット名>
これで、今後ローカルでこのHTMLファイルを修正しても、aws sync
コマンドを実行するだけでAmazon S3のバケット上のファイルと同期してくれます。
ぽちぽちぽち……[Return]キーをぱちんっと。できました。
そうしたら、マネージメントコンソールで「S3」を選択して、バケットの内容を確認してみてください。
大丈夫、アップロードされてます。
さっそく、ブラウザでindex.htmlにアクセスしてみましょう。バケットの[Properties]で[Static Website Hosting]を開くと、[Endpoint]が表示されます。これがアクセス先のURLです。
OKです、ばっちり開けました!
[3] AWS コマンドラインインターフェイス(CLI)は、AWS サービスを管理するための統合ツールであり、コマンドラインから複数の AWS サービスを制御し、スクリプトを使用してこれらを自動化することができます。詳細は、本記事の最後のページにまとめてあります。
参加したい方、ご興味のある方はデベロッパーカンファレンスのWebサイトへ!