AWS Amplify ハンズオン 基本ステップ

amplify configure 1

今回のハンズオンでは、AWSが提供するクラウドベースの統合開発環境 (IDE)であるAWS Cloud9上で開発を行っていただきます。 アプリケーションの開発にはSPA(シングルページアプリケーション)のフレームワークであるVueを用います。 本ステップでは、Cloud9のセットアップ、Vueプロジェクトの作成、Amplifyの初期セットアップを行います。


事前準備

Step 0: 開発環境の選択

本ハンズオンでは、環境の違いによる挙動の違いを除外するためクラウドベースの統合開発環境 (IDE)であるAWS Cloud9上で開発を行う手順になっています。
ご自身のローカルの環境で手順を実施したい場合は、「Step 3: 新規 Vue アプリケーションの作成」の手順から実施してください。

Step 1: Cloud9のセットアップ

Amplifyハンズオンではクラウドベースの統合開発環境 (IDE)であるAWS Cloud9上で開発を行います。AWSマネジメントコンソールにログインし、今回開発に使用するCloud9のインスタンスを起動します。

1.マネジメントコンソールからCloud9を選択 create iam user

2.「Create environment」ボタンを押下 create iam user

3. 「Name」に環境名を入力します。(例 amplify-handson-<日付> 等)
「Description」は任意項目です。わかりやすい説明文を入力してください。 create iam user

4.「Instance Type」にt2.smallを選択します。t1.microの場合、ビルド時にメモリが不足してしまう可能性があるため、t1.microより一つサイズが大きいインスタンスを選択します。他の項目はデフォルトのままで「Next step」を押下します。 create iam user

5.設定内容を確認し、「Create Environment」を押下します。 create iam user

6.しばらく待って以下のような画面が表示されれば成功です。 create iam user

Step 2: AWS 管理の一時認証情報 の無効化

Cloud9 では最初にコンソールを開いたときにAWS管理の一時認証情報が作成されます。
以降の手順では、Amplify CLIで発行するユーザの権限を使用するため、Cloud9の一時認証情報を無効化します。

AWS Cloud9 > Preferences > AWS SETTINGS > 「AWS managed temporary credentials:」 のトグルをOffにします。 create iam user


Step 3: 新規 Vue アプリケーションの作成

このステップからCloud9のターミナルにコマンドを発行していきます。コマンドは以下画像の赤枠のところに打ち込んでいきます。

Terminal

Vueアプリケーションの開発に必要なNode.js® および npm のバージョンを確認します。 以下のコマンドを発行し、Node.js のバージョンは 8.x 以上、npm のバージョンは 5.x 以上がインストールされていることを確認してください。

$ node -v
v10.16.3 <-- 8.x 以上
$ npm -v
6.9.0 <-- 5.x 以上

Amplifyハンズオンでは、SPA(Single Page Application)のフレームワークであるVue.jsを使って開発を行います。Vueプロジェクトを簡単に構築できるVue CLI をインストールし、新規 Vue アプリを作成します。

vue cli をインストールします。

npm install -g @vue/cli@4.0.5

いくつか警告が出ますが、赤文字でERRORが出ていなければ次に進みます。
次にvue createコマンドでVueプロジェクトを作成します。プロジェクト名はmyamplifyprojectとします。

vue create myamplifyproject

通信状態によっては「Your connection to the default npm registry seems to be slow」と表示されることがあります。このメッセージが表示された場合は「Y」を入力してエンターキーを押下します。

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

以下のように作成オプションを尋ねられるので十字キー「Manually」にカーソルを合わせてエンターキーで選択します。

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
 ❯ Manually select features

デフォルトの設定に加え「Router」を選択します。十字キーで「Router」にカーソルを合わせて、スペースキーで選択できます。
うまく選択ができると◯から◉に変化します。

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router  <--- Routerの追加を忘れない!!
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

以降の設定は全てデフォルトのままEnterを押下して下さい。 作成が完了したら、プロジェクトのルートディレクトリに移動してアプリケーションを起動させます。

cd myamplifyproject

このままではCloud9上でアプリケーションを起動することができないため、プロジェクトのルートディレクトリに設定ファイルを追加します。

echo "module.exports = {devServer: {disableHostCheck: true}}" > vue.config.js

アプリケーションを起動させます

npm run serve

Preview > Preview Running Applicationを選択すると、Cloud9で起動したアプリケーションの画面を表示させることができます。以下のような素の Vueアプリが表示されます。さらに、「Pop Out Into New Window」を選択することで別ウィンドウでアプリケーションを実行できます。

Vue App

アプリケーションを別ウィンドウで実行

Vue App

Vue.js 用の Amplify UI コンポーネントと Amplify Vue プラグインは、 aws-amplify-vue パッケージをインストールすると使えます。この手順については後ほど解説します。より詳しい説明と使い方は Amplify Vue Guide をご覧ください。

サーバを起動した状態ではターミナルを入力出来ません。Ctrl + Cでサーバを止めることができます。

Step 4: UIコンポーネントのインストール

アプリケーションの見栄えをよくするために、UIコンポーネントをインストールします。本ハンズオンではElement UIというコンポーネントライブラリを使用します。
以下コマンドでアプリケーションに必要なプラグインをインストールします。

npm install vue-material element-ui --save

Step 5: Amplify CLI@3.0.0 のインストール

※ バージョンによる挙動や表示の違いを除外するため、このハンズオンでは2019/9/1 現在で最新の amplify-cli 3.0.0 を前提にしています。

npm install -g @aws-amplify/cli@3.0.0

途中、いくつか警告やERRORが出る可能性がありますが、以下コマンドを発行し、バージョン(3.0.0)が表示されればAmplify CLIのインストールは成功です!

amplify --version

Step 6: Amplify CLIからバックエンドにアクセスするための設定

本ハンズオンではAmplify CLIを使ってバックエンドの構築を行います。Amplify CLIがバックエンドに接続できるようにするためのIAMユーザの作成と認証情報の設定を行います。

amplify configure

amplify configure コマンドを実行すると、「Sign in to your AWS administrator account:」が表示されます。
Enter キーを押すと使用するリージョンや IAM ユーザー名を訊かれます。リージョンにはus-east-1を選択し、他は全てデフォルトを指定します。

https://console.aws.amazon.com/iam/~~から始まるURLが発行されるので、別のブラウザでこのURLにアクセスします。 confirmation

※もしURLが発行されない場合は ここ にアクセスして、任意のユーザ名を入力してください。

画面に沿って IAM ユーザーを作成します。特に選択肢や設定を変更する必要はなく、次に進めていきます。

  1. ユーザー作成 create iam user
  2. IAM ポリシーのアタッチ attach policy
  3. タグの追加 adding tags
  4. 作成内容の確認 confirmation
  5. ユーザー作成完了しましたが、この画面を閉じないでください! confirmation

ターミナルに戻り、Enter キーを押します。アクセスキーID、シークレットアクセスキーID を訊かれるので、ブラウザの IAM ユーザー作成完了画面に表示されているものをコピーしてください。
Profile Name はデフォルト(default)のままでもよいですが、後からわかりやすくするためにここでは amplify-handson とします。

inputcredentials

コンソール上に「Successfully set up the new user.」と表示されることを確認してください。
これで、作成したIAMユーザの権限でAmplify CLIからコマンドを発行できるようになりました。


Step 7: バックエンドのセットアップ

プロジェクトディレクトリ(myamplifyproject)のトップで amplify init コマンドを実行します。

amplify init

途中いくつか質問をされます。以下の選択肢に注意して他はデフォルトでOKです。
* environment name : 'test'
* Choose your default editor: Vim (via Terminal, Mac OS only)

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myamplifyproject
? Enter a name for the environment test
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command:  npm run-script serve 
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-handson
⠋ Initializing project in the cloud...
(しばらく待つ)

事前準備で amplify configure を正しく完了していない場合、途中で ? Setup new user と出て新しいユーザーをセットアップするか聞かれます。 その場合、Y と答えると、ブラウザで AWS マネジメントコンソールが立ち上がるので、マネジメントコンソールにログインしてください。 その後は、「Step 5: Amplify CLI@3.0.0 のインストール」のamplify configureと同様の手順に従い、Profile の作成を進めててください。

? Setup new user でなく ? Do you want to use an AWS profile? と訊かれている場合は、 Enter を押し、利用する Profile (amplify-handson など) を選択してください。

Profile の選択が済むと、バックエンドの初期化を開始します。AWS CloudFormation によって、アプリケーションのバックエンドに必要な基礎的な AWS リソース(IAM Role、Amazon S3 バケットなど)が自動的に作成されます。

このとき何が起きているか: Amplify は、各 AWS サービスをそれぞれ個別に設定するのでなく、amplify init コマンドによって生成された src/aws-exports.js で設定を集中的、自動的に管理することをサポートしています。このファイルには、アプリケーションで利用する全てのリージョン情報やサービスのエンドポイント情報が含まれますが、amplify add コマンド等によって追加・更新された情報は amplify push コマンド実行時に自動的に反映されるため、開発者はファイルの中身を強く意識する必要はありません。

Amplify CLI が正しく設定されていることを確認するために、 amplify status コマンドを実行します。 何も値がない表が表示されれば正常です。

amplify status
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

この後の手順で、amplify add によってアプリケーションに機能を追加し、 amplify push を実行すると、作成されたバックエンドリソースがこの表にリストされるようになります。

  • 機能を編集するには、以下のコマンドがあります。
    • amplify add <category-name>: アプリケーションに機能を追加する
    • amplify update <category-name>: 機能の設定を更新する
    • amplify remove <category-name>: 機能を削除する
  • プロジェクト全体を削除するには、amplify delete コマンドがあります。

    注意: amplify delete は、ローカルとクラウド上の全てのプロジェクトリソースを削除し、amplify init 実行前の状態に戻してしまいます。 amplify remove <category-name> と間違えないように注意してください。


Step 8: アプリケーション全体で使用するスタイルの作成

アプリケーション全体で使用するスタイルのファイルを作成します。

touch src/assets/style.css

作成したファイルを以下で上書きます。 src/assets/style.css

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

.amplify-sign-out {
  float: right;
}

.welcome {
  text-align: right;
}

.container {
  padding: 20px;
}

.auth_container {
  text-align: center;
  margin: 30px;
}

.dark {
  background-color: #4D6584;
  color: white;
}

.dark * a {
  color: white !important;
}

.header_mode {
  float: left;
}

.translate-input {
  width: 500px !important;
}

p {
  padding: 24px;
  color: gray;
}

.speech-input {
  width: 500px !important;
}

.interpretation-input {
  width: 500px !important;
}

.result-content {
  padding: 20px;
}

.title {
  float: left;
}

.main-contents {
  float: left;
  width: 100%;
}

.error {
  color: red;
}

ここまでくれば、アプリケーション実装のための初期セットアップは完了です!
次のステップではVueアプリケーションを実装していくための雛形を作成して行きます。