Amazon Web Services ブログ

AWS Mobile Hub で JavaScript 開発を改善する

はじめに

JavaScript エコシステムが成長していくなかで、私達はモバイルおよびハイブリットアプリを構築するお客様を支援する取り組みを続けています。本日、 AWS Mobile Hub に Hosting and Streaming 機能をリリースしました。この機能は、Amazon S3 と Amazon CloudFront を使用するモバイル Web サイトのテスト及びプロダクション環境へのデプロイを自動化します。また、標準設定ファイルと SDK を使用する際の設定ワークフローを簡略化します。

この新しい機能によって、 JavaScript 開発者は事前設定された AWS アーキテクチャを起動したり、 Mobile Hub プロジェクトをビルドできます。また、集中管理された設定と事前ダウンロードされた SDK を使用して、ワンクリックでグローバル Web サイトを作成できます。

概要

Mobile Hub コンソールを開いて、 Create a new Project を選択します。 User Sign-in, NoSQL Database, Cloud Logic など、いくつかの機能を有効にします。既存のプロジェクトをインポートすることもできます。

Hosting and Streaming を選択すると、モバイル Web アプリケーションの起動ページが表示されます。

サンプルアプリを起動するために、 Amazon S3 hosting から直接表示する View from S3 または Amazon CloudFront deployment から表示する View from CloudFront を選択します。サンプルは Amazon Cognito の呼び出しを行い、 ID と認証情報を取得する方法をデモする JavaScript アプリです。

Manage files を選択すると、 AWS Mobile Hub によって設定済みのリソースが格納された S3 バケットを表示します。このリソースには先ほど作成した Web ページと AWS SDK for JavaScript が含まれています。加えて、このディレクトリには 2 つの重要なファイルが含まれています。

  • aws-config.js
  • aws-exports.js

これらのファイルにはモバイル Web や ハイブリッドアプリの AWS リファレンスが含まれます。また、 JavaScript アプリが AWS の各種サービスと連携する際に、これらのリファレンスを使用することができます。 サンプルアプリは aws-config.js を使用して、 Amazon Cognito に対して認証されていない呼び出しを作成する方法を示しています。 User Sign-in 機能を使用してサインインを必要とする (推奨) 場合は、プロジェクトに対して認証済みのユーザーだけが他の機能 ( Amazon DynamoDB や Amazon API Gateway など ) にアクセスできる AWS Identity and Access Management ポリシーを Mobile Hub が設定します。良い例は、先月発表された AWS Ionic Starter project です。

aws-exports.js ファイルは新しい ECMAScript2015 に準拠しており、この標準に準拠するアプリを作成する方法を紹介します。

ウォークスルー: Babel と NodeJS と共に aws-exports.js を使用

aws-exports.js を使い始めるために、 Babel でコンパイルを行うプロジェクトを作成する方法を一つずつ説明します。 このウォークスルーはこれらの機能から AWS SDK for JavaScript を使用する方法を示します。

Babel は ES2015 で標準化された Import や Export ステートメントなど、 JavaScript の新しい言語機能に対応したコンパイラです。こちらから Babel についての詳細を確認できます。

はじめに、NodeJS と NPM がインストールされていることを確認してください。

つぎに、Babel がファイルの読み取りや書き込みを行うための ./src と ./dist ディレクトリを含むプロジェクトディレクトリを作成します。その後で、プロジェクトを初期化します:

$mkdir awsmobile
$cd awsmobile
$mkdir dist
$mkdir src
$npm init

デフォルト設定でディレクトリを初期化します。つぎに、 Babel で必要となるパッケージをインストールし、 コードと AWS SDK for JavaScript のためのエントリーポイントを作成します。

$npm install --save-dev babel-cli babel-preset-env aws-sdk
$touch .babelrc
$touch ./src/awstest.js

.babelrc ファイルを以下のコードに書き換えます:

{ "presets": ["env"] }

awstest.js は ./src ディレクトリに存在することに注意してください。 awstest.js ファイルを以下のコードに書き換えます:

'use strict';
import { awsmobile } from './aws-exports';
console.log(awsmobile);

Mobile Hub が生成した S3 バケットに存在する aws-exports.js を ./src ディレクトリに設置します。 awstest.js が Babel によってコンパイルされる際は、./dist ディレクトリに出力されます。 次のコマンドで実行できます:

$./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist
$node dist/awstest.js

全てが正しく動作した場合は、AWSと連携するための設定が画面に表示されます。

AWS SDK for JavaScript と aws-exports.js を使用して Amazon S3 からファイルをダウンロード

ビルドプロセスの基礎を理解し、これらの設定を使用できるようになりましたか ? Mobile Hub は AWS Cloud のリソースを設定する際に生じる全ての問題に対処します。あなたが作成済みの S3 バケットからファイルをダウンロードしたいと考えたとしましょう。 次のコードは aws-exports.js 設定ファイルを使用したシンプルなアプリの例です。GetObject 操作を行い、 index.html を mobilehub.html としてローカルディスクに保存します。 ./src/awstest.js を以下のコードに変更します:

'use strict';

import { awsmobile } from './aws-exports';
import AWS from 'aws-sdk';

//Filestream setup
var fs = require('fs');
var writeStream =  fs.createWriteStream('mobilehub.html');

var s3 = new AWS.S3();
var s3params = ({
    Bucket: awsmobile.aws_content_delivery_bucket,
    Key: 'index.html'
});

var res = s3.getObject(s3params, function(err, res){
    if (err){
        console.error(err);
    }else {
        writeStream.write(res.Body);
    }
});

以下のコマンドを実行すると、コードをコンパイルし実行します:

$./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist
$node dist/awstest.js

ルートディレクトリに、 mobilehub.html ファイルが現れます。このファイルは S3 バケットからダウンロードされたサンプルページです。

さらなる探求

以上はシンプルな例です。利用可能なものを見つけるために他の設定も確認し、いろいろなやり方で Mobile Hub プロジェクトを設定してみてください。 Amazon Cognito ユーザープールや AWS Lambda をバックエンドに利用する Amazon API Gateway エンドポイントを設定することもできます。私達に検討して欲しい将来の機能や事例をコメントで教えてください。

原文：Enhanced JavaScript development with AWS Mobile Hub
（翻訳：SA藤原）