概要

AWS amplify を使用してSPAのプロトタイピングを行う場合の覚書。
尚、今回はクライアントには vue.js を使用した。

所感

ログイン認証から簡単なAPIを叩く所までをサラッと触ってみたが、簡単なコマンドベースで一通り構築から公開できる為、最初のプロトタイピングで使用する分には有用であると感じた。
尚、本記事にはログイン機能は記載していないが、「amplify add auth」及び「amplify push」して、提供されている認証用コンポーネント(※)を使用するだけで Cognito 周りも簡単に利用できる。
※1 ... https://aws-amplify.github.io/docs/js/vue#amplifyplugin

ただ、本開発では CloudFormationテンプレートが必要になる等、CICD等の諸々の考慮が必要になる為、そのまま本開発でも使用するかどうかは要検討。
( amplify-cli で構築すると一通りのリソースがネストされたスタックとして作成される為、スタックからのテンプレート取得等はある程度可能)

目次

クライアントの実装

クライアント側の実装を行っておく。

vueプロジェクトの作成

以下の通り作成

vue create amplify-project1

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No     ※1
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

クライアント側の実装

一覧取得を行う簡単な画面を作成する。

まずは作成したプロジェクトディレクトリに移動。

cd amplify-project1

App.js

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/sample1">Sample1</router-link>   // 追加
    </div>
    <router-view/>
  </div>
</template>
:

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [ 
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: () => import('../views/About.vue') },
  { path: '/sample1', name: 'sample1', component: () => import('../views/Sample1.vue') }  // 追加
]

const router = new VueRouter({
  routes
})

export default router

一覧画面のデータ取得部分は、いったん空で以下の通り実装しておく。

src/views/Sample1.vue

<template>
  <div class="sample1">
    <h1>This is sample page</h1>
    <table id="sample1_table" v-if="items.length > 0">
     <thead>
      <tr>
          <th>Name</th><th>Price</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in items" v-bind:key="item.name">
        <td>{{ item.name }}</td><td>{{ item.price }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'sample1',
  data: function(){
    return {
      items: []
    }
  },
  created: function(){
    this.getItems()
  },
  methods: {
    getItems: function(){
      console.log("getItems!")
      // TODO: 実装
    }
  }
}
</script>

amplifyの使用準備

CLIのインストール

npm install -g @aws-amplify/cli

amplify用のAWSユーザプロファイルのセットアップ

amplify configure

※ 表示された手順に従ってIAMユーザを作成する。

amplifyプロジェクトの作成

amplify-cli でプロジェクトを以下の通り初期化。(先程の作成した vue.js のプロジェクト直下でコマンドを実行)

amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplify-project1
? Enter a name for the environment dev
? 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
Using default provider  awscloudformation

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 amplify1
⠹ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket                    AWS::S3::Bucket            Tue Oct 22 2019 00:01:57 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                          AWS::IAM::Role             Tue Oct 22 2019 00:01:57 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                            AWS::IAM::Role             Tue Oct 22 2019 00:01:57 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket                    AWS::S3::Bucket            Tue Oct 22 2019 00:01:55 GMT+0900 (日本標準時)                            
CREATE_IN_PROGRESS AuthRole                            AWS::IAM::Role             Tue Oct 22 2019 00:01:55 GMT+0900 (日本標準時)                            
CREATE_IN_PROGRESS UnauthRole                          AWS::IAM::Role             Tue Oct 22 2019 00:01:55 GMT+0900 (日本標準時)                            
CREATE_IN_PROGRESS amplify-project1-dev-20191022000151 AWS::CloudFormation::Stack Tue Oct 22 2019 00:01:53 GMT+0900 (日本標準時) User Initiated             
⠦ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Tue Oct 22 2019 00:02:18 GMT+0900 (日本標準時) 
⠦ Initializing project in the cloud...

CREATE_COMPLETE amplify-project1-dev-20191022000151 AWS::CloudFormation::Stack Tue Oct 22 2019 00:02:22 GMT+0900 (日本標準時) 
CREATE_COMPLETE AuthRole                            AWS::IAM::Role             Tue Oct 22 2019 00:02:19 GMT+0900 (日本標準時) 
CREATE_COMPLETE UnauthRole                          AWS::IAM::Role             Tue Oct 22 2019 00:02:19 GMT+0900 (日本標準時) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify  add" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything


サーバ側の処理作成

Lambda関数の作成

ここでは GetItemsSample1 という名前で作成した。

amplify add function

Using service: Lambda, provided by: awscloudformation
? Provide a friendly name for your resource to be used as a label for this category in the project: GetItemsSample1
? Provide the AWS Lambda function name: GetItemsSample1
? Choose the function template that you want to use: Hello world function
? Do you want to access other resources created in this project from your Lambda function? Yes
? Select the category (Press <space> to select, <a> to toggle all, <i> to invert selection)

You can access the following resource attributes as environment variables from your Lambda function
var environment = process.env.ENV
var region = process.env.REGION

? Do you want to edit the local lambda function now? No
Successfully added resource GetItemsSample1 locally.

Next steps:
Check out sample function code generated in /amplify/backend/function/GetItemsSample1/src
"amplify function build" builds all of your functions currently in the project
"amplify function invoke GetItemsSample1" enables you to test a function locally
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

Lambda関数の編集

生成されているファイルを以下の通り編集する。

amplify/backend/function/GetItemsSample1/src/index.js

exports.handler = function (event, context) {
  const response = {
  	statusCode: 200,
  	headers: {
  		"Access-Control-Allow-Origin": "*",
  	},
  	body: JSON.stringify({
  		items: [
  			{name: "sample1", price: 1000},
  			{name: "sample2", price: 2000},
  			{name: "sample3", price: 3000},
  		]
  	})
  }
  console.log(response);
  context.done(null, response);
};

API gatewayの追加

作成したLambdaを呼び出す為のAPI Gatewayを追加する。

amplify add api

? Please select from one of the below mentioned services REST
? Provide a friendly name for your resource to be used as a label for this category in the project: GetItemsSample1Api
? Provide a path (e.g., /items) /items
? Choose a Lambda source Use a Lambda function already added in the current Amplify project
? Choose the Lambda function to invoke by this path GetItemsSample1
? Restrict API access Yes
? Who should have access? Authenticated and Guest users
? What kind of access do you want for Authenticated users? read
? What kind of access do you want for Guest users? read
Successfully added auth resource locally.
? Do you want to add another path? No
Successfully added resource GetItemsSample1Api locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud


クライアント処理の修正

ここからは実際にamplifyのモジュールを使用してAPIアクセスを行うようにクライアント側を修正していく。

amplify用のクライアントモジュールをインストール

npm i aws-amplify
npm i aws-amplify-vue

https://aws-amplify.github.io/docs/js/vue

main.js の修正

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 追加(ここから)
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
Vue.use(AmplifyPlugin, AmplifyModules)
// 追加(ここまで)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

https://aws-amplify.github.io/docs/js/vue

API通信部分の実装

各コンポーネント等では this.$Amplify.API を使用して amplify の API を利用する事ができる。
https://aws-amplify.github.io/docs/js/api#using-the-api-client

src/views/Sample1.vue

<template>
  <div class="sample1">
    <h1>This is sample page</h1>
    <table id="sample1_table" v-if="items.length > 0">
     <thead>
      <tr>
          <th>Name</th><th>Price</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in items" v-bind:key="item.name">
        <td>{{ item.name }}</td><td>{{ item.price }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'sample1',
  data: function(){
    return {
      items: []
    }
  },
  created: function(){
    this.getItems()
  },
  methods: {
    getItems: function(){
      const self = this;
      // this.$Amplify.API を使用して、作成したAPI にアクセス
      this.$Amplify.API.get("GetItemsSample1Api", "/items").then(response => {
        self.items = response.items;
      }).catch(error => {
        console.error(error.response)
      });

    }
  }
}
</script>

動作確認

普通にローカルで vue を起動して動作確認。

npm run serve


インターネットへの公開

S3ホスティングバケット/設定の追加

amplify add hosting
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name amplify-project1-20191022155632-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

You can now publish your app using the following command:
Command: amplify publish

公開

amplify publish

※ 他端末からも表示されたURLにブラウザからアクセス可能となる。


Amplifyのコンポーネント/API

ログイン画面用のコンポーネントや通信用のAPIなどが利用できる。
※詳細は割愛。

https://aws-amplify.github.io/docs/js/vue

amplify-cli メモ

コマンド説明
amplify configure
amplify init
amplify add <category>
amplify update <category>
amplify push
amplify publish
amplify serve
amplify delete
amplify status

https://github.com/aws-amplify/amplify-cli#commands-summary


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-10-30 (水) 09:53:40 (558d)