使用Nuxt、GraphQL和AWS（Amplify、appsync、dynamodb、cognito、s3等）进行Web应用程序教程 第1部分

1 年 ago
清, 扬
4 minutes

首先

我想使用GraphQL进行开发，因此我进行了调查，发现了一个叫作AWS Amplify的工具，感觉似乎很不错，于是我就尝试进行开发了。

如果是免费额度的话，个人基本上可以免费做大部分事情。（即使是不喜欢付费的人，因为项目删除很简单，只要做即可，不会有损失。顺便说一下，我绝对是免费派哈哈）

我們這次將製作一個簡易的博客。
由於可能會稍微冗長，所以我們將把文章分為3到4個部分寫作??‍♂️??‍♂️

AWS Amplify是什么

68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6177732d6d6f62696c652d6875622d696d616765732f6177732d616d706c6966792d6c6f676f2e706e67.png

AWS Amplify 是一套工具和服务的集合，可以将它们协同使用或单独使用。通过这些功能，前端网页和移动应用开发人员可以构建由AWS提供的可扩展的全栈应用程序。使用Amplify，客户可以在几分钟内配置后端并连接应用程序，同时在数次点击之内轻松部署静态网页应用程序。此外，您还可以方便地在AWS控制台之外管理应用程序内容。

Amplify支持常见的网页框架（JavaScript、React、Angular、Vue、Next.js）和移动平台（Android、iOS、React Native、Ionic、Flutter（预览版））。通过AWS Amplify，您可以实现快速的市场投放。

从上述公式中摘录

前提

    • awsのアカウントを持っている(初学者はできれば無料枠期間内が良い)

 

    *個人なら有料枠でも大して課金されない。(無料の可能性もある)

AWS Amplify价格表

    • npmコマンドが使える

 

    vueかnuxt触っているとやりやすいかも!!

这次要做的事情

    • プロジェクト作成

 

    • 実装(ほとんどフロントのみ)

 

    公開

因为后端由AWS Amplify处理，所以这次开发只需要构建前端部分。
原因是，AWS Amplify本身就在使用GraphQL，并且可以通过命令进行安装等操作。安装时以交互式对话形式进行，并且会几乎自动地实现后端部分。
这太厉害了，哈哈。

实施细节

スクリーンショット 2021-02-10 12.34.37.png

AWS Cognito 可以翻译为 “亚马逊 Web 服务身份认证系统”。

通过使用Amazon Cognito，您可以在网页应用和移动应用中快速简便地添加用户注册/登录和访问控制功能。Amazon Cognito可以扩展到数百万用户，并支持使用社交身份提供者（如Apple、Facebook、Google、Amazon）、SAML 2.0和OpenID Connect等企业身份提供者进行登录。

从公式中摘录出来的是说，实际上就是认证功能。

AWS AppSync 是由亚马逊提供的一种服务。

AWS AppSync是一项完全托管的服务，可简化GraphQL API的开发。该服务将自动处理与AWS DynamoDB、Lambda和其他数据源的安全连接所需的繁琐工作。您可以轻松使用缓存来提高性能，使用订阅来实现实时更新，并使用客户端数据存储轻松同步离线客户端。一旦部署完成，AWS AppSync将根据API请求的数量自动扩展和缩放GraphQL API执行引擎。

从公式中提取的部分

AWS S3是一种存储服务，本次将用于保存和获取图像。

AWS DynamoDB是一种数据库。

开始实施（项目创建篇）

鉴于通常按照文档进行创建，请有兴趣的方面参考文档。

AWS Amplify的初始設定

首先，您需要安装Amplify的命令行工具。

% npm install -g @aws-amplify/cli

通过这样做，您将能够使用amplify命令。

接下来，我们将进行amplify的设置。请执行以下命令。

% amplify configure

我认为AWS页面将会打开，请登录?
回到终端，在屏幕上看到提示按Enter键，按下它。

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

我们来回答问题吧。

Specify the AWS Region
? region:  ap-northeast-1     // ap-northeast-1(東京)を指定
Specify the username of the new IAM user:
? user name:  admin-app   // <-　ユーザ名なのでなんでも良いです
01.gif

当您进入IAM用户创建完成页面后，请下载CSV文件并打开它。
（出于安全考虑，绝对不能让其他人看到您的秘密密钥。）

当csv文件被打开后，返回到终端并按照指示进行输入。

Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************                          // <-csvファイル参照
? secretAccessKey:  ****************************************  // <-csvファイル参照
This would update/create the AWS Profile in your local machine
? Profile Name:  blog       // <-defaultでもいいですが、名前をつけました。

Successfully set up the new user.

现在，amplify的设置已完成。

Nuxt的引入和Amplify的合作

Nuxt的前提条件是什么？

建议安装 node 的最新 LTS 版本，版本应为 v10.13 或以上。
对于文本编辑器，建议安装带有 Vetur 扩展功能的 VS Code 或者 WebStorm。
对于终端，建议使用 VS Code 的集成终端或者 WebStorm 终端。

从公式中提取

让我们创建一个Nuxt应用吧。

% npm init nuxt-app <project-name>

无论什么项目名称都可以。我已经做如下处理。

% npm init nuxt-app blog

执行

✨  Generating Nuxt.js project in blog
? Project name: blog
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

在安装完成后，我认为会显示如下内容。

  To get started:

    cd blog
    npm run dev

在执行cd blog之后，运行nom run dev命令将启动项目。

スクリーンショット 2021-02-10 14.19.07.png

引入amplify

执行以下命令。

% amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project blog
? Enter a name for the environment dev
? 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:  .
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve

接下来会问你要使用哪个配置文件。

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use blog

这样就完成了初始化。

接下来，在Nuxt的前端中安装所需的Amplify库。

如果使用Vue3的话：

% npm install aws-amplify @aws-amplify/ui-components

如果使用Vue2：

% npm install aws-amplify @aws-amplify/ui-vue

你可以通过运行npm list vue来查看版本。

安装完成后，打开在vscode中创建的博客项目。
在/plugins文件夹中创建amplify.js文件，并粘贴以下代码。

import Vue from 'vue'
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import awsExports from '../aws-exports'

Amplify.configure(awsExports)
Vue.use(Amplify)

接下来，将在nuxt.config.js文件中进行记录。

// 略
plugins: [{ src: '~/plugins/amplify.js', ssr: false }],
// 略

请在这里试着再运行一次 “npm run dev”。
如果没有报错，那就没问题了。

使用amplify创建和部署API。

请使用命令提示符，按照以下方式运行来创建amplify API。

% amplify add api

// APIが聞かれる
? Please select from one of the below mentioned services: GraphQL
// apiの名前
? Provide API name: blog
// 認証方法
? Choose the default authorization type for the API API key
? Enter a description for the API key: blog

? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
// スキーマファイルが存在するか
? Do you have an annotated GraphQL schema? No
// スキーマファイルのテンプレートです。どちらでも良いです。
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
// 今すぐスキーマファイルを編集するのか。どっちでもいいです。vscord手動で開くか、自動で開くかなので
? Do you want to edit the schema now? No

好的，现在API已经添加好了。让我们继续编辑它。

type Blog @model {
  id: ID!
  title: String!
  image_url: String
  content: String
}

参考：
– GraphQL的模式和类型定义

将前端API的设置应用到服务器端并创建实际的API。

amplify push

.....
Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | blog          | Create    | awscloudformation |
// 続けますか
? Are you sure you want to continue? Yes
.....
新しく作成したGraphQL APIのコードを生成しますか？
? Do you want to generate code for your newly created GraphQL API Yes
コード生成言語のターゲットを選択します。
? Choose the code generation language target javascript
GraphQLクエリ、ミューテーション、サブスクリプションのファイル名パターンを入力します。
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
クエリ、ミューテーション、サブスクリプションなど、すべての可能な GraphQL 操作を生成/更新しますか？
? 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

其实，仅需这样，API的创建就完成了。现在可以通过当前的操作进行增删改查操作。

确认是否实际推送

% amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | blog          | No Change | awscloudformation |
GraphQL endpoint: *********************************
GraphQL API KEY: **************

做到了?

引进身份验证功能

% amplify add auth

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. # 以下の設定は設定後の変更不可
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.

% amplify push
? Are you sure you want to continue? Y

我們已經添加了認證功能。

第一部分到此为止！

在第二部分和第三部分中会进行前端的实现工作。

继续的网址 de

    • Part2

 

    • Part3

 

    Part4

请提供以下内容的中文表述。

“参考”

    • amplify公式

 

    • AWS Amplify料金表

 

    • appsync公式

 

    • cognito公式

 

    • amplifyドキュメント

 

    • nuxtjs公式

 

    • GraphQLのスキーマと型定義

 

    • AWS AppSync + Cognito + Amplify + ApolloでSPAを作ってみた話&同じ構成で簡易版Todoアプリをホストするまでの手順

 

    https://qiita.com/TakahiRoyte/items/26dab7929e752a6aa5c6
✖
广告
将在 10 秒后关闭
bannerAds