AWS SDK for JavaScriptのGetting Startedを写経して静的HTMLからS3へファイルアップロードを試してみた

はじめに

こんにちは植木和樹＠上越妙高オフィスです。本日はAWSが公開しているAWS SDK for JavaScriptのGetting Startedページを写経しながら、Facebook認証できたユーザーにAWSのS3へファイルアップロードを許可するHTMLページを作成してみました。

− AWS SDK for JavaScript - Getting Started ブラウザの JavaScript

今回はS3バケットへのファイルアップロードを試しますがSDKからは多くのAWSリソース操作ができますので、Lambdaをキックする、EC2を再起動する、Code Pipelineの承認を行なう・・・などいろいろと応用ができそうです。夢が広がりますね。 :)

さっそく試してみましょう！

環境

Getting Startedで準備するものは大きく3つに分けられます。

1. Facebookアプリ
2. AWSのリソース（IAM Roleとファイルアップロード先のS3バケット）
3. AWS SDK for JavaScriptを組み込んだHTMLファイル

1. Facebookアプリ

• 表示名：cm-ueki.kazuki-aws-javascript-sample （任意の名前でOK）

2-1. Facebook からログインしたユーザーに割り当てるためのIAMロール

• Role名：js-sample-role
• Role Typeは Grant access to web identity providers です
• Facebookアプリ作成後に発行されるアプリIDを入力する必要があります。
• 後述のマネージドポリシー（AWS-JavaScriptSample）を割り当てます。

2-2. js-sample-role に割り当てるマネージドポリシー

• ポリシー名：AWS-JavaScriptSample
• ポリシーの内容はGetting Startedページで紹介されている内容

2-3. sample.htmlからアップロードされたファイルを置くS3バケット

• バケット名：js-sample-bucket
• CORS設定が必要です。 (Getting Startedページで紹介されています)

3-1. JavaScriptファイル

• ファイル名：sample.html − Getting Startedページで紹介されている内容を保存し、指示された箇所を修正しておく

3-2. sample.htmlを置く公開用S3バケット

• バケット名：my-public
• バケットにはStatic website hosting機能を有効にしてブラウザからアクセスできるようにしておきます。（ACLでEveryone Read権限付与でもOK）
• sample.htmlのURLは https://my-public.s3.amazonaws.com/sample.html になります。（後ほどFacebookアプリで入力する必要があります）
• 特別なCORS設定は不要です。

それではまずFacebookアプリケーションから作成していきましょう。

Facebookアプリケーションの作成

facebook にログインした状態で https://developers.facebook.com/apps/ を開きます。 最初はなにもアプリが登録されていないため「新しいアプリを作成」をクリックします。

「表示名」「連絡先メールアドレス」を入力して「アプリIDを作成してください」をクリックします。

Captcha を入力します。とても視認しずらいため、読みやすい画像がでるまで何度か「別の画像を表示」をクリックして再読込してみてください。

アプリが作成されるのでアプリID （数字16桁）をメモしておきます。

次にこのアプリに対してsample.htmlからのアクセスを許可します。「プラットフォームを追加」をクリックします。

プラットフォームは「ウェブサイト」を選択します。

サイトURLにsample.htmlのURLを入力します。バケット名がmy-publicなら https://my-public.s3.amazonaws.com/sample.html になります。

以上でFacebookアプリの設定は完了です。次にAWS SDK for JavaScriptを埋め込んだHTMLファイルを用意します。

JavaScriptの用意

Getting StartedページからHTML/JavaScriptをコピーしてエディターに貼り付け、sample.htmlというファイル名で保存します。

次に説明にあるように 'YOUR_APP_ID'、'YOUR_ROLE_ARN'、'YOUR_BUCKET_NAME'、'YOUR_BUCKET_REGION' を書き換えて保存します。

保存したsample.htmlは公開用S3バケット（今回は my-public）にアップロードしましょう。

ファイルをアップロードしてみる

ブラウザを開いてS3にアップロードした sample.html にアクセスします。ポップアップウィンドウが開いてFacebookの認証が表示されるので「ログイン」を選択しましょう。

ログインすると「Upload to S3」というボタンが有効になります。「ファイルを選択」して「Upload to S3」をクリックすると、S3バケットにファイルがアップロードされます。

成功です！ アップロードされたファイルがfacebook-<アプリID>/ファイル名というキーで、指定したS3バケットに保存されました。

トラブルシューティング

今回試してみた中で、いくつかエラーに遭遇したので原因と対処方法を掲載しておきます。

ファイルをアップロードした時に「NetworkingError」が表示される

ファイルアップロード先のS3バケットのCORS設定が正しくない可能性があります。 Getting Startedページで紹介されているCORS設定と一致しているか確認して試してみてください。

Facebookで「アプリが設定されていません」と表示される

sample.html内のJavaScriptでFacebookのアプリID（appId）が設定されていないか、誤っています。 FacebookアプリのベーシックページでアプリID（数字16桁）が確認できるので、その値を入力してください。

sample.htmlを開いたら「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。」と表示される。

Facebookアプリでsample.htmlのURLからのアクセスが許可されていません。 Facebookアプリのベーシックページで「プラットフォームを追加」からURLを設定してください。

ファイルをアップロードした時に「AccessDenied: Missing credentials in config」が表示される

IAM Roleの信頼関係に設定したFacebooｋのアプリIDが誤っています。 FacebookアプリのベーシックページでアプリID（数字16桁）が確認できるので、その値をIAM Roleの「信頼関係の編集」でgraph.facebook.com:app_idに指定してください。

まとめ

静的なHTMLからAWSのリソースを操作することができれば、S3でページをホスティングできるためサーバーの管理が不要になり運用が楽になります。またAWSに詳しくない作業者にある特定のAWSリソースへの作業を依頼したい場合にも、シンプルな操作画面を提供することでオペトレを簡単にすることができそうです。

Facebook側のアプリ設定とAWS側のIAM Roleの設定が正しく行われてさえいれば、後はAWS SDK for JavaScriptはクレデンシャルのやりとりは裏でやりとりしてくれます。仕組みさえわかえれば簡単に静的ページに組み込めそうですね。

昨今はサーバーレスというワードが人気で、静的HTML + S3 + LambdaのようなEC2いらずなシステムがどんどん広がっていきそうです。Facebookアカウントされあれば、Getting Startedによるお試しは1時間程度で行えますので、（私のような）フロントエンドに苦手意識がある方もぜひ一度試してみてはいかがでしょうか。