尝试完成 AWS Amplify 的 React 教程

2 年 ago
科, 雅
8 minutes

首先/起初

我在AWS Amplify找到了一个简单的教程，所以我尝试做了一下。
我们将使用React + Amplify + AppSync + DynamoDB创建一个无服务器的ToDo应用程序。
链接：https://docs.amplify.aws/start/q/integration/react/

AWS Amplify是什么？

スクリーンショット 2021-11-30 8.33.06.png

用AWS Amplify尝试创建一个ToDo应用

前提条件

    • Node.js v12.x以降

 

    • NPM V5.x 以降

 

    git v2.14.1以降

安装并设置amplify/cli。

安装amplify/cli

$ sudo npm install -g @aws-amplify/cli

放大/amplify/cli工具的安装设置

$ amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
スクリーンショット 2021-11-29 20.45.30.png

在登录AWS控制台后，返回终端并输入区域和用户名，就会在浏览器中显示AWS控制台的IAM界面。

Press Enter to continue

Specify the AWS Region
? region:  us-east-1
Specify the username of the new IAM user:
? user name:  amplify-user
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=us-east-1#/users$new?step=final&accessKey&userNames=amplify-user&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
スクリーンショット 2021-11-29 20.42.29.png

回到终端，按下Enter键。
输入之前备份的“访问密钥ID”和“秘密访问密钥”。

Press Enter to continue

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.

2. 制作React应用程序

创建React应用程序。
*截至2021年11月29日，尝试安装@latest版本失败。这似乎与此错误报告有关。

$ npx create-react-app@latest react-amplified
~~~省略~~
We suggest that you begin by typing:

  cd react-amplified
  npm start

Happy hacking!

在本地检查屏幕。

$ cd react-amplified
$ npm start
~~省略~~
Compiled successfully!

You can now view react-amplified in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.11.6:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
スクリーンショット 2021-11-29 21.04.54.png

3. 初始化后端

初始化后端
按默认值按Enter确认

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reactamplified
The following configuration will be applied:

Project information
| Name: reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: dxleXXXX
~~省略~~
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" 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 console" to open the Amplify Console and view your project status
"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

安装Amplify库。

安装Amplify库

$ npm install aws-amplify @aws-amplify/ui-react@1.x.x

5. 设定前端界面

请在 src/index.js 文件的最后一个 import 语句下面添加以下内容。

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

src/index.js 追加记录后。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

6. 创建GraphQL API和数据库。

创建一个GraphQL API和数据库。保持默认设置并选择一个编辑器。

$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /XXXX/react-amplified/amplify/backend/api/reactamplified/schema.graphql or place .graphql files in a directory at /XXXX/react-amplified/amplify/backend/api/reactamplified/schema
✔ Do you want to edit the schema now? (Y/n) · yes
? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code
  Android Studio
  Xcode (Mac OS only)
  Atom Editor
  Sublime Text
  IntelliJ IDEA
  Vim (via Terminal, Mac OS only)
(Move up and down to reveal more choices)
スクリーンショット 2021-11-29 21.28.18.png

7. API的部署

部署API

$ amplify push
~~省略~~
GraphQL endpoint: https://dgsXXXX.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-vkaXXXX

确认API的状态

$ amplify status

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Api      │ reactamplified │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

GraphQL endpoint: https://dgsXXXX.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-vkaXXXX

8. 从前端连接到API处

将src/App.js替换为以下内容

/* src/App.js */
import React, { useEffect, useState } from 'react'
import Amplify, { API, graphqlOperation } from 'aws-amplify'
import { createTodo } from './graphql/mutations'
import { listTodos } from './graphql/queries'

import awsExports from "./aws-exports";
Amplify.configure(awsExports);

const initialState = { name: '', description: '' }

const App = () => {
  const [formState, setFormState] = useState(initialState)
  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetchTodos()
  }, [])

  function setInput(key, value) {
    setFormState({ ...formState, [key]: value })
  }

  async function fetchTodos() {
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos))
      const todos = todoData.data.listTodos.items
      setTodos(todos)
    } catch (err) { console.log('error fetching todos') }
  }

  async function addTodo() {
    try {
      if (!formState.name || !formState.description) return
      const todo = { ...formState }
      setTodos([...todos, todo])
      setFormState(initialState)
      await API.graphql(graphqlOperation(createTodo, {input: todo}))
    } catch (err) {
      console.log('error creating todo:', err)
    }
  }

  return (
    <div style={styles.container}>
      <h2>Amplify Todos</h2>
      <input
        onChange={event => setInput('name', event.target.value)}
        style={styles.input}
        value={formState.name}
        placeholder="Name"
      />
      <input
        onChange={event => setInput('description', event.target.value)}
        style={styles.input}
        value={formState.description}
        placeholder="Description"
      />
      <button style={styles.button} onClick={addTodo}>Create Todo</button>
      {
        todos.map((todo, index) => (
          <div key={todo.id ? todo.id : index} style={styles.todo}>
            <p style={styles.todoName}>{todo.name}</p>
            <p style={styles.todoDescription}>{todo.description}</p>
          </div>
        ))
      }
    </div>
  )
}

const styles = {
  container: { width: 400, margin: '0 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20 },
  todo: {  marginBottom: 15 },
  input: { border: 'none', backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 },
  todoName: { fontSize: 20, fontWeight: 'bold' },
  todoDescription: { marginBottom: 0 },
  button: { backgroundColor: 'black', color: 'white', outline: 'none', fontSize: 18, padding: '12px 0px' }
}

export default App

在本地进行确认

$ npm start
スクリーンショット 2021-11-29 21.45.31.png

9. 添加认证

默认情况下，添加认证
按Enter

$ amplify add auth
~~省略~~
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 push
~~省略~~
All resources are updated in the cloud

确认在amplify的状态中已添加了Auth。

$ amplify status
~~省略~~

    Current Environment: dev

┌──────────┬────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name          │ Operation │ Provider plugin   │
├──────────┼────────────────────────┼───────────┼───────────────────┤
│ Api      │ reactamplified         │ No Change │ awscloudformation │
├──────────┼────────────────────────┼───────────┼───────────────────┤
│ Auth     │ reactamplified91c68478 │ No Change │ awscloudformation │
└──────────┴────────────────────────┴───────────┴───────────────────┘

GraphQL endpoint: https://dgsXXXX.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-vkaXXXX

10. 创建登录页面

修改 src/App.js

10-1. 在import中添加以下内容

import { withAuthenticator } from '@aws-amplify/ui-react'

将默认导出项更改为withAuthenticator，并将其包装在主组件周围。

export default withAuthenticator(App)

10-3. 修正过后的src/App.js

/* src/App.js */
import React, { useEffect, useState } from 'react'
import Amplify, { API, graphqlOperation } from 'aws-amplify'
import { createTodo } from './graphql/mutations'
import { listTodos } from './graphql/queries'
import { withAuthenticator } from '@aws-amplify/ui-react'

import awsExports from "./aws-exports";
Amplify.configure(awsExports);

const initialState = { name: '', description: '' }

const App = () => {
  const [formState, setFormState] = useState(initialState)
  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetchTodos()
  }, [])

  function setInput(key, value) {
    setFormState({ ...formState, [key]: value })
  }

  async function fetchTodos() {
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos))
      const todos = todoData.data.listTodos.items
      setTodos(todos)
    } catch (err) { console.log('error fetching todos') }
  }

  async function addTodo() {
    try {
      if (!formState.name || !formState.description) return
      const todo = { ...formState }
      setTodos([...todos, todo])
      setFormState(initialState)
      await API.graphql(graphqlOperation(createTodo, {input: todo}))
    } catch (err) {
      console.log('error creating todo:', err)
    }
  }

  return (
    <div style={styles.container}>
      <h2>Amplify Todos</h2>
      <input
        onChange={event => setInput('name', event.target.value)}
        style={styles.input}
        value={formState.name}
        placeholder="Name"
      />
      <input
        onChange={event => setInput('description', event.target.value)}
        style={styles.input}
        value={formState.description}
        placeholder="Description"
      />
      <button style={styles.button} onClick={addTodo}>Create Todo</button>
      {
        todos.map((todo, index) => (
          <div key={todo.id ? todo.id : index} style={styles.todo}>
            <p style={styles.todoName}>{todo.name}</p>
            <p style={styles.todoDescription}>{todo.description}</p>
          </div>
        ))
      }
    </div>
  )
}

const styles = {
  container: { width: 400, margin: '0 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20 },
  todo: {  marginBottom: 15 },
  input: { border: 'none', backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 },
  todoName: { fontSize: 20, fontWeight: 'bold' },
  todoDescription: { marginBottom: 0 },
  button: { backgroundColor: 'black', color: 'white', outline: 'none', fontSize: 18, padding: '12px 0px' }
}

export default withAuthenticator(App)

在本地进行确认

$ npm start
スクリーンショット 2021-11-29 22.01.36.png

11. 部署App。

部署应用程序
按照默认设置直接点击Enter

$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish

12. 发布应用程序

发布应用程序

$ amplify publish
~~省略~~
Zipping artifacts completed.
Deployment complete!
https://dev.dxlXXXX.amplifyapp.com
スクリーンショット 2021-11-29 22.33.39.png

放大控制台

スクリーンショット 2021-11-30 7.35.40.png

资源清理

$ amplify delete
$ amplify status

最后

    • Cloudformationでインフラのコードを作成するするのに比べ、準備するコード量が少なく使いやすいと感じた

 

    • 認証周りなど細かい設定がどこまでできるかはまだ分からない

 

    • 次はAWS Amplify を使って継続的デプロイメント環境を作ろうと思う

https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#standard

请按照下面的内容简述出一份中文的同义句：

比赛完整的结果可以看作是对球队实力的一个很好的参考。

    • https://docs.amplify.aws/start/getting-started/installation/q/integration/react/#option-1-watch-the-video-guide

 

    • https://github.com/facebook/create-react-app/issues/10601

 

    • https://dev.classmethod.jp/articles/react-amplify-appsync-dynamodb-tutorial/

 

    https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#standard
bannerAds