SPA -> GraphQL -> 无服务器后端

使用Vue.js和Amplify，从头开始进行现代化的前端开发和无服务器后端构建。本次将从Vue.js创建的单页面应用向AppSync发送基于GraphQL的请求，并确认通过后端的DynamoDB进行数据的写入和读取。

通过使用Amplify Framework，您可以从命令行创建AWS后端资源。

在戏剧中亮相的角色

Vue.js 是一款流行的JavaScript 框架。

这个前端框架从小型应用到大规模应用都能很好地支持，我个人也经常使用它。本文章是作为Vue.js AdventCalendar的第十天发布的。

Buefy是一个选项。

Buefy是一个在Vue中使Bulma UI库更易用的工具。通常我会使用ElementUI，但这次我尝试使用Buefy。其特点是100%响应式。

增强框架

Amplify JavaScript为Vue提供了开发云原生Web应用程序的便利库。它支持Angular、React和Vue三个框架。你可以在官方网页上找到Vue.js的使用说明。

放大台

在AWS的活动re:Invent2018上，新增了一个功能，可以轻松地准备公开Web应用的环境。除了CI/CD功能外，还提供CDN功能。我们将在本文中详细介绍。

AppSync 同步应用

这是一个AWS的GraphQL托管服务。它可以接收Vue.js发来的GraphQL请求。介绍GraphQL (AWS AppSync)。

DynamoDB：亚马逊开发的一种可扩展的云数据库服务。

在AWS的NoSQL数据库服务中，我们将其放置在AppSync的背后，用作数据的存储位置。
[官方]DynamoDB是什么？

GitHub – GitHub仓库

本文中，将管理Vue.js的源代码。当源代码被推送到GitHub的主分支时，触发Web应用程序的发布。本文不涉及GitHub的处理。

准备

Apmlify CLI的安装（0.5分钟）

请执行以下命令来安装 Amplify CLI。

$ npm install -g @aws-amplify/cli

只要看到「AWS AMPLIFY」显示出来就可以了。

$ amplify

  █████╗  ██╗    ██╗ ███████╗      █████╗  ███╗   ███╗ ██████╗  ██╗      ██╗ ███████╗ ██╗   ██╗ 
 ██╔══██╗ ██║    ██║ ██╔════╝     ██╔══██╗ ████╗ ████║ ██╔══██╗ ██║      ██║ ██╔════╝ ╚██╗ ██╔╝ 
 ███████║ ██║ █╗ ██║ ███████╗     ███████║ ██╔████╔██║ ██████╔╝ ██║      ██║ █████╗    ╚████╔╝  
 ██╔══██║ ██║███╗██║ ╚════██║     ██╔══██║ ██║╚██╔╝██║ ██╔═══╝  ██║      ██║ ██╔══╝     ╚██╔╝   
 ██║  ██║ ╚███╔███╔╝ ███████║     ██║  ██║ ██║ ╚═╝ ██║ ██║      ███████╗ ██║ ██║         ██║    
 ╚═╝  ╚═╝  ╚══╝╚══╝  ╚══════╝     ╚═╝  ╚═╝ ╚═╝     ╚═╝ ╚═╝      ╚══════╝ ╚═╝ ╚═╝         ╚═╝    

amplify <command> <subcommand>

...

创建Vue项目（1分钟）

使用Vue CLI创建Vue项目。如果未安装Vue CLI，请执行以下命令。

$ npm install -g @vue/cli

※[参考] Vue.js项目创建指南
使用SpringBoot+Vue.js+ElementUI+Firebase创建主数据管理应用程序入门#创建Vue项目

让我们使用”vue create”来创建项目。这次我们将把项目命名为白羊座的”Aries”。

$ vue create aries

如果在 http://localhost:8080/ 上显示了示例画面，则表示成功。

安装图书馆 (0.5分钟)

请安装必要的模块。由于此应用程序只限定了功能，所以除了amplify系列和UI库buefy外，不需要其他特殊模块。

$ npm i --save aws-amplify
$ npm i --save aws-amplify-vue
$ npm i --save buefy

让我们将 vue-create 创建的文件推送到个人的 GitHub。

$ git add .
$ git commit -m "first commit"
$ git push origin master

如果没有特别的问题的话，到此为止准备工作已经完成了。总体而言，只需要大约2分钟就能结束。

构建后端

使用Amplify框架为AWS资源做准备（3分钟）。

从这里开始，我们将使用AWS来构建使用amplify的资源。首先，为了进行初始设置，执行以下命令。

$ amplify init

? Choose your default editor: Visual Studio Code
? 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

在选择时有几个是“是”或“否”的选项，但基本上默认设置是没有问题的。语言和框架一定选择JavaScript/Vue。

如果您还没有完成AWS-CLI的配置，您需要通过命令行进行区域和访问密钥的设置。以下也有步骤说明，请继续进行配置。

放大JavaScript # 放大配置

接下来，我们将创建API的终端点。请执行以下命令。

$ amplify add api

? Please select from one of the below mentioned services GraphQL
? Provide API name: aries
? Choose an authorization type for the API API key
? 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

这次我们将使用GraphQL作为基础进行创建。为了简化授权类型，我们选择API KEY。模式也不进行编辑，我们将直接使用默认的Todo。

最后，我们将使用以下命令创建AWS资源。

$ amplify push

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

? 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

我认为您可以从终端中确认通过CloudFormation自动生成了AppSync和DynamoDB。基本上，所有选项都是默认的。

如果终端显示了GraphQL的端点和API密钥，那说明成功了。

在AWS控制台上确认创建的资源。(1分钟)

从AWS控制台中选择AppSync，然后确认所创建的项目。在API列表中，我们可以找到本次创建的”aries”。

点击右侧的“数据源”，您可以查看随之创建的DynamoDB。当然，目前数据库为空。

建立部署流程线

使用Amplify控制台创建应用环境（3分钟）

从AWS控制台中选择“Amplify Console”，然后通过“connect app”按钮来创建应用环境。在第一步中，选择管理源代码的代码库，本次选择已经提交了Vue.js源代码的GitHub。

在第二步中，需要指定存储库名称和分支名称。

由于第三步和第四步没有特殊的更改，所以按照屏幕上的指示继续进行。

请在完成创建后，通过左侧菜单查看构建配置的YAML文件。

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

在上述设置中，完成了一个Github源代码在每次更改时进行部署的流水线。

让我们从屏幕显示的URL确认一下。如果能够确认它通过HTTPS在网络上公开，那就是成功的。

向Vue.js中添加Amplify的设置（1分钟）。

目前的阶段，由于使用vue create创建的默认页面会显示，所以我们需要准备一个用于进行新增、读取、更新和删除操作的页面。首先，我们需要按照以下方式对Amplify进行修改，以便在Vue中可以使用它。

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 aws_exports from './aws-exports' // 追記
Amplify.configure(aws_exports) // 追記

Vue.use(AmplifyPlugin, AmplifyModules) // 追記

Vue.config.productionTip = false

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

增加新页面并更改路由（8分钟）

为了能够从屏幕上添加待办事项，我们将创建一个新页面。

首先，让我们更改路由。当通过“/”访问时，我们将对其进行修改，使其跳转到这次新增的TODO管理页面。

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // {
    //   path: '/',
    //   name: 'home',
    //   component: Home
    // },
    {
      path: '/',
      name: 'todo',
      component: () => import(/* webpackChunkName: "todo" */ './views/Todo.vue')
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

我们将对已经记录的对Home的访问进行注释处理。

接下来，我们将创建Todo.vue文件。

使用GraphQL进行数据的注册和列表获取。通过使用Amplify，查询已经自动在src/graphql下生成，因此不需要编写新的GraphQL查询。可以使用graphqlOperation来轻松进行API调用。

<template>
  <div>
    <nav class="level">
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">TODO</p>
          <b-field label="Name">
            <b-input v-model="input.name"></b-input>
          </b-field>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <b-field label="Description">
            <b-input v-model="input.description"></b-input>
          </b-field>
        </div>
      </div>
    </nav>
    <button class="button is-link" @click="createTodo">ADD</button>
    <ul id="todo">
      <li v-for="todo in todos">
        <span class="todo-wrapper">{{ todo.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {API, graphqlOperation} from 'aws-amplify'
import * as mutations from '@/graphql/mutations'
import * as queries from '@/graphql/queries'

export default {
  name: 'todo',
    data: function () {
    return {
      input: {
        name: '',
        description: ''
      },
      todos: []
    }
  },
  created: async function () {
    await this.listTodos()

  },
  methods: {
    createTodo: async function () {
      if (this.input.name !== '' || this.input.description !== '') {
        await API.graphql(graphqlOperation(mutations.createTodo, {input: this.input}))
         .catch(err => console.error(err))
        await this.listTodos()
      } else {
        console.info('input empty')
      }
    },
    listTodos: async function () {
      const res = await API.graphql(graphqlOperation(queries.listTodos))
        .catch(err => console.error(err))
      this.todos = res.data.listTodos.items
    }
  }
}
</script>
<style scoped>
.todo-wrapper {
  /* 適宜記述 */
}
</style>

当在输入表单中输入TODO名称和描述，并点击“添加”按钮时，将会执行createTodo方法。当需要使用GraphQL进行更新时，mutations用于向AppSync发送请求，并直接将数据写入DynamoDB。另外，当需要使用GraphQL进行检索时，queries用于向AppSync发送请求，并从DynamoDB中获取数据，然后将其渲染在屏幕上。

由于与本次目的不相关，所以不会在此次实现聪明的功能或布局。如果能参考一下查询和变更的调用方式，我会很高兴。由于正在使用Buefy，因此对于手机的网页显示也很容易。

将更改应用于公开的网页(2分钟)。

最后，会更新网页。修改后的代码会提交到GitHub，并推送到主分支，此时Amplify Console的流水线将自动开始构建过程。等待大约1分钟，即可完成部署，可以确认修正内容已经实施。

最后

• Amplify Frameworkを使用することで、バックエンドのロジックを一切記述することなくサーバレスで構築することができました。

 

• Amplify Consoleを使用することで、Vue.jsのCI/CDパイプラインを簡単に構築することができました。

 

GraphQLやサーバレスとったモダン要素を取り入れながら、20分でアプリを公開することができました。