![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
概要 †AWS amplify を使用してSPAのプロトタイピングを行う場合の覚書。 所感 †ログイン認証から簡単なAPIを叩く所までをサラッと触ってみたが、簡単なコマンドベースで一通り構築から公開できる為、最初のプロトタイピングで使用する分には有用であると感じた。 ただ、本開発では CloudFormationテンプレートが必要になる等、CICD等の諸々の考慮が必要になる為、そのまま本開発でも使用するかどうかは要検討。 目次 †
クライアントの実装 †クライアント側の実装を行っておく。 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 サーバ側の処理作成 †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 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 を利用する事ができる。 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などが利用できる。 amplify-cli メモ †
※ https://github.com/aws-amplify/amplify-cli#commands-summary |
