LoginSignup
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@nouernet

2019年12月版 AWS Amplify + AppSync + Cloud9 + Vue.js でとりあえず動くまでの手順

Last updated at Posted at 2019-12-20

目的

  1. Cloud9上での aws amplify, aws appsync を利用する開発環境の構築
  2. vue上での subscription による リアルタイムデータ配信アプリの構築
  3. amplify の機能による S3+CloudFlont でのアプリのデプロイ
React.js バージョンはこちら

前提

  1. 利用するリージョンは ap-northeast-1
  2. CodeCommitのリポジトリ名は amplify_test_vue
  3. amplifyで利用するiamユーザは amplify-test-user
  4. アプリ名はmyapp
  5. api名はmyappapi

注意

この投稿は @aws_amplify/api, @aws_amplify/pubsub パッケージを利用しています。
2019年12月では、aws_amplify, aws_amplify_vue パッケージと同時に利用することはできません。
AWSKinesisFirehoseProvider.js あたりでエラーが発生する場合はパッケージの混同を疑ってみてください。

構築手順

  1. CodeCommitへのGitリポジトリ作成 * 'amplify_test_vue'を使用
  2. Cloud9の開発環境作成 * aws consoleで作成
  3. Cloud9の一時認証の利用を解除
    1. ツールバーのAWS Cloud9でメニューを開く
    2. Preferencesを開く
    3. AWS SETTINGSを開く
    4. Credentialsを開く
    5. AWS managed temporary credentials をオフにする
  4. 開発環境とGitリポジトリの連携 
    $ git clone ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/amplify_test_vue
  5. nodeのインストール 最新、または、好みのバージョンを確認 
    $ nvm ls-remote

    指定したバージョンでインストールを実行

    $ nvm install 指定のバージョン
  6. aws amplify cli のインストール 
    $ npm install -g @aws-amplify/cli
  7. amplify の初期設定
    1. configureを実行 
      $ amplify configure
    2. 管理者アカウントでaws consoleをブラウザで開く 
      Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
    3. 利用するリージョンを選択、ユーザ名を入力 出力されたurlをaws cosoleを開けたブラウザで開いてユーザを作成 デフォルトの値は入っているので作成を完了するだけ 
      Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-test-user
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-test-user&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
    4. ユーザ作成で得ることのできた accessKeyId と secretAccessKey を入力 
      Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.
  8. vue cli / vue cli init のインストール 
    $ npm install -g @vue/cli
$ npm install -g @vue/cli-init
  9. vue project の作成 
    $ mkdir myapp
$ cd myapp
$ vue init webpack .

? Generate project in current directory? Yes
? Project name myapp
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

$ cd myapp
  10. Cloud9でブラウザ表示できるように設定を修正
    build/webpack.dev.conf.js
    - host: HOST || config.dev.host,
- port: PORT || config.dev.port,
+ host: '0.0.0.0',
+ port: '8080',
+ disableHostCheck: true,
  11. アプリケーションを実行して確認 
    $ npm run dev

    メニューの Preview -> Preview Running Application を実行
    Cloud9内のブラウザでVueのセットアップが完了していることを確認

  12. aws-amplify をインストール 
    $ npm install @aws-amplify/api
$ npm install @aws-amplify/pubsub
  13. amplify の初期設定 
    $ amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myapp
? 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
  14. amplify の初期設定確認 
    $ amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |
  15. api の追加準備 
    $ amplify add api

? Please select from one of the below mentioned services: GraphQL
? Provide API name: myappapi
? Choose the default authorization type for the API API key
? Enter a description for the API key: 
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)


? Do you want to edit the schema now? No
  16. api の追加内容確認 
    $ amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | myappapi      | Create    | awscloudformation |
  17. バックエンドに api の追加内容を反映 
    $ amplify push

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | myappapi      | Create    | awscloudformation |

? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions
 Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
  18. myapp を修正
    1. main.js を修正
      main.js
      import Vue from 'vue'
import App from './App'
import API from '@aws-amplify/api'
import PubSub from '@aws-amplify/pubsub'
import awsconfig from './aws-exports'
import router from './router'

API.configure(awsconfig)
PubSub.configure(awsconfig)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
    2. App.vue を修正
      App.vue
      <template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>
    3. router/index.js を修正
      router/index.js
      import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/components/Test01'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Test01',
      component: Test01
    }
  ]
})
    4. components/Test01.vue を追加
      components/Test01.vue
      <template>
  <div>
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id"> {{todo.name}} - {{todo.description}} </li>
    </ul>
  </div>
</template>

<script>
import API, { graphqlOperation } from '@aws-amplify/api'
import { createTodo } from '../graphql/mutations'
import { listTodos } from '../graphql/queries'
window.LOG_LEVEL = 'VERBOSE'

export default {
  name: 'Test01',
  data () {
    return {
      todos: []
    }
  },
  methods :{
    async addTodo(){
      const todo = {
        name: "New Todo Title",
        description: "do something at " + Date()
      }
      await API.graphql(graphqlOperation(createTodo, { input: todo }))
      this.getData()
    },
    async getData() {
      const todoData = await API.graphql(graphqlOperation(listTodos))
      this.todos = []
      this.todos.push(...this.todos, ...todoData.data.listTodos.items);
    }
  },
  created(){
    this.getData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
    5. 実行してブラウザでTodoが追加されることを確認
  19. subscription を利用してみる
    1. Test01.vue を修正
      components/Test01.vue
      <template>
  <div>
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id"> {{todo.name}} - {{todo.description}} </li>
    </ul>
  </div>
</template>

<script>
import API, { graphqlOperation } from '@aws-amplify/api'
import { createTodo } from '../graphql/mutations'
import { listTodos } from '../graphql/queries'
import { onCreateTodo } from '../graphql/subscriptions';

window.LOG_LEVEL = 'VERBOSE'

export default {
  name: 'Test01',
  data () {
    return {
      todos: []
    }
  },
  methods :{
    async addTodo(){
      const todo = {
        name: "New Todo Title",
        description: "do something at " + Date()
      }
      await API.graphql(graphqlOperation(createTodo, { input: todo }))
      //this.getData()
    },
    async getData() {
      const todoData = await API.graphql(graphqlOperation(listTodos))
      this.todos.push(...this.todos, ...todoData.data.listTodos.items);
    },
    subscribe(){
      API.graphql(graphqlOperation(onCreateTodo)).subscribe({
        next: (eventData) => {
          const todo = eventData.value.data.onCreateTodo
          this.todos.push(todo)
        }
      })
    }
  },
  created(){
    this.getData()
    this.subscribe()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
    2. 実行して２つのブラウザで同期的にTodoが追加されることを確認
  20. Hosting の準備 
    $ amplify add hosting

? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name myapp-20191220055634-hostingbucket
? index doc for the website index.html
? error doc for the website index.html
  21. Hosting の追加内容の確認 
    $ amplify status

Current Environment: dev

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | myappapi        | No Change | awscloudformation |
  22. バックエンドに Hosting の追加内容を反映 
    $ amplify push

Current Environment: dev

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | myappapi        | No Change | awscloudformation |
? Are you sure you want to continue? Yes
  23. バックエンドの Hosting を公開 
    $ amplify publish
  24. PublishされたURLを２つのブラウザで開いて同期的にTodoが追加されることを確認
  25. 作成した amplify のリソースを削除 
    $ amplify delete

    amplify delete した後、再度 amplify init で作成し直す場合は、aws-exports.js ファイルを削除しておく。init や add で更新されない。

    amplify init したアプリを deleteせずに再度initする場合、CloudFormation上から削除できなくなるので、注意。

    26. 参考

    1. AWS Amplify + Vue.js + AppSync + Cognito +その他諸々でリアルタイム更新なサーバレスWebアプリをデプロイ

    2. 【お手軽ハンズオンで AWS を学ぶ】AWS Amplify で Todo アプリを作ろう！ AWS AppSync ＆ Amazon DynamoDB によるリアルタイムメッセージング

    3. AWS Amplify Getting Start

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?