今回はAWS Mobile Hubに含まれるサービスの一つ、ファイルストレージとMonacaアプリを連携します。AWS Mobile HubのファイルストレージにはS3が使われています。

プロジェクトの準備

第一回目の記事 で作成したプロジェクトにファイルストレージ機能を追加していきます。

ファイルストレージの有効化

AWS Mobile Hubのコンソール で、プロジェクトにUser File Storage を追加します。

「Store files」を選択して、保存します。

設定をローカルのMonacaプロジェクトに反映します。wwwディレクトリ内で、awsmobile pull コマンドを実行するとファイルストレージ機能が使えるようになります。

これでAWS Mobile Hubの設定は完了です。

S3の設定を変更する

Monacaアプリからファイルをアップロードするには、S3の設定変更が必要です。
S3のコンソール にアクセスすると、xxxxx-userfiles-mobilehub-99999 といった名前のバケットが作成されています。
それを開き、アクセス権限設定の中にある「CORSの設定」を開きます。

例えば以下のように記述すると任意のホストからGET/POST/PUTアクセスが許可されます。

さらに「バケットポリシー」を変更してGETアクセス可能にします。

リソース名はご自身の環境に合わせて変更する必要がありますので注意してください。

この二つの設定を行うことでファイルのアップロードと表示が可能になります。

Monacaアプリの実装

src/app.js

AWS Amplifyから「Storage」モジュールを取得しておきます。

save-data.html

Onsen UIでファイルをアップロードする画面を作ります。アップロード後、ons-cardの中に画像を表示します。

次に <script> タグ内に処理を記述します。<input type="file"> でファイルを選択したタイミングでアップロード処理を行います。 S3への保存は Storage.put メソッドで実行します。

なお、保存が完了した際の返り値の中にファイルの保存先URLはなかったため、若干複雑なURL生成処理を行っています。

実行結果の確認

選択されたファイルがアップロードされ、画面上に表示されます。

アップロードされたファイルは S3のコンソールpublicフォルダの中に格納されています。

配信を高速化する

Amazon S3はCloudfrontに対応していますので、設定を行うことでCDN配信が可能になります。その場合には表示用のURLが上記のコードとは異なりますのでご注意ください。

まとめ

S3の設定などが必要といった面倒さはありますが、たった数行のJavaScriptのコードでファイルアップロードが実装できるので、便利に使えそうです。
今回はストレージに対してパブリックアクセス可能としましたが、認証を行って、S3上のアクセス権限によってファイルに対する操作の可否を設定することもできます。

今回のコードはgoofmint/Monaca_AWS_Mobile_Hub_Demoにアップロードしてありますので実装時の参考にしてください。

Add User File Storage – AWS Mobile