SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

池澤あやかさんにお願い! AWS Summit Tokyo 2015「デベロッパーカンファレンス」を盛り上げるアプリを一緒につくってください!

【制作1日目】 池澤あやかさん、イベント会場がヒートアップ間違いなしのアプリを制作、まずはクライアント側処理です ~ Amazon S3 / Cognito / Kinesis / DynamoDB 登場

池澤あやかさんにお願い! AWS Summit Tokyo 2015「デベロッパーカンファレンス」を盛り上げるアプリを一緒につくってください! 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

まずはスマホからアクセスする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]をクリックしてください。

バケット名の入力

 

池澤:

はい、バケットできました!

バケット作成完了

 

作業が順調に進み、よしよし顔です (^v^)
作業が順調に進み、よしよし顔です (^v^)

 

[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]をクリックしてください。

池澤:

できましたー。

静的Webサイトホスティングを有効化

 

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]をクリックしてください。

AWS Policy Generator

 

バケットポリシーの設定

 

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です。

エンドポイントの確認

 

ブラウザからindex.htmlにアクセスする

 

池澤:

OKです、ばっちり開けました!

[3] AWS コマンドラインインターフェイス(CLI)は、AWS サービスを管理するための統合ツールであり、コマンドラインから複数の AWS サービスを制御し、スクリプトを使用してこれらを自動化することができます。詳細は、本記事の最後のページにまとめてあります。

池澤さんも登場するデベロッパーカンファレンスに、ぜひご参加ください!

参加したい方、ご興味のある方はデベロッパーカンファレンスのWebサイトへ!

次のページ
アプリも安全第一! AWSにアクセスするための認証情報を保護

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
池澤あやかさんにお願い! AWS Summit Tokyo 2015「デベロッパーカンファレンス」を盛り上げるアプリを一緒につくってください!連載記事一覧

もっと読む

この記事の著者

坂井 直美(サカイ ナオミ)

SE、通信教育講座の編集、IT系出版社の書籍編集を経てフリーランスへ。IT分野で原稿を書いたり編集したり翻訳したり。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8642 2015/07/13 22:09

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング