在aws官网上找到了amplify的项目型教程，这个似乎还没有汉化，玩的时候顺便记录一下。

没汉化

AWS Amplify简介

Amplify也是一个提供静态资源网络托管的综合平台【Ref】

  • 在几分钟内为 Web、iOS 或 Android 应用程序创建具有身份验证、数据、存储等功能的 AWS 后端

  • 通过从设计到代码的 Figma 集成直观地构建前端 UI，并通过点击将 UI 连接到后端

  • 只需几次点击即可轻松部署和托管快速、安全且可靠的网站和服务器端渲染的应用程序

  • 将应用程序扩展到 175+ AWS 服务，支持新的使用案例、DevOps 实践和用户增长

简单来说，除了以下几个特点以外，和Netlify这些差不多，也是一定用量免费：

  • AWS Amplify特点
    • 支持可视化开发全栈网站或应用程序
    • 支持部署移动应用程序，Netlify不支持
    • 生态完善，使用其他 AWS 服务比较方便

Amplify上手教程

主要完成托管网页和部署后端，除此以外添加了AWS验证和存储服务作为附加功能示例。

注：以下只展示amplify相关的配置部署流程，App本身的代码不全，具体参照原文。

前置步骤

  1. 创建一个前端应用或者用已有的

  2. push到github repo

部署前端

  1. 注册AWS账号（需要可以扣$1的信用卡）
  2. 登录并找到AWS Management Console
  3. Get started页 - (host your web app) 点get started

img

  1. 选择基于github部署，确认repo/branch信息然后next*N
  2. save and deploy，完成。后续每次修改并push后会自动更新网页。
完成页

deployed

安装Amplify CLI – 添加/管理AWS服务

安装CLI

可以通过Amplify的CLI给项目添加AWS提供的服务。

1
2

# 安装cli
npm install -g @aws-amplify/cli

插曲：ARM Mac不适配

这里M1/M2的mac可能会碰上cli安装成功但命令没反应的问题，不知为什么至今没适配好。解决方案参考issue#10193：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# solution 1: 安装rosetta（不一定有用）
softwareupdate --install-rosetta

# solution 2: git clone旧版本 @danrivett（也不一定有用）
# 环境：amplify-cli@v10.4.1 node@16
git clone https://github.com/aws-amplify/amplify-cli.git
cd amplify-cli
git checkout v10.4.1 # Avoids building the dev branch but builds a release tag; update as necessary
yarn && yarn build
rm ~/.amplify/bin/amplify
ln -s $(pwd)/packages/amplify-cli/bin/amplify ~/.amplify/bin/amplify

# solution 3: release页手动下载安装旧版本 @kzetxa
# 环境：node@16.12.0, Amplify 10.3.1, macOS Monterey 12.6
# 1. deleted the binary at /usr/local/bin/amplify
# 2. renamed the binary inside the package downloaded
# 3. moved it to the location where the old deleted binary was
sudo chown -R $(whoami) ~/.amplify

三个都试了，最终成功的是第三种，环境完全同上。后续看了眼活动，似乎还是从x86转译的。

配置CLI

1
2
3
4
5
6
7
8

# configure
amplify configure

# 1. 需要跳转网页登录console
# 2. 选择地区
# 3. 回到网页创建用户
  # 需要赋予programmic access
  # 记录access key id和secret access key

后续各种添加服务都需要用cli。以及现在可以一键传送到console了

1
2

# in local terminal
amplify console

部署后端

开启amplify studio

回到应用页 - backend environments - get started - launch studio - 在terminal运行local setup的命令（从网页上复制）

img

然后选择配置项：

1
2
3
4
5
6
7
8

? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path:  src 
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
? Do you plan on modifying this backend? Y

增加后端构建配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# App settings > Build settings 
# 增加backend的配置
... 
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
...

例：添加AWS服务-验证

应该是为了展示添加aws配套服务很方便，这个教程专门为note应用添加了auth功能。

命令行添加服务

1
2
3
4
5

# in local terminal
# create the authentication service locally
amplify add auth
# deploy it
amplify push --y

src/index.js中应用服务

1
2
3
4

// in `src/index.js`
import { Amplify } from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);

导入src/App.js

导入类似这样的（一个只有验证的sample）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import "@aws-amplify/ui-react/styles.css";
import { withAuthenticator } from "@aws-amplify/ui-react";

function App({ signOut }) {
  return (
	/* 中间省略 */
  );
}

export default withAuthenticator(App);

auth 最后push到远程仓库

添加后端数据库

  • 添加graphgl api
1
2

amplify add api
# 选择graphql
  • 本地配置

在/amplify/backend/api/<api_name>/schema.graphql中创建schema

1
2
3
4
5
6

// sample：
type Note @model @auth(rules: [ { allow: public } ] ){
  id: ID!
  name: String!
  description: String
}
  • 部署服务
1

amplify push --y # --yes: 省略所有命令行配置项，设置为default

This will do three things:

  1. Create the AWS AppSync API
  2. Create a DynamoDB table
  3. Create the local GraphQL operations in a folder located at src/graphql that you can use to query the API
  • 在前端send query

例：

1
2
3
4
5
6
7
8
9

  async function deleteNote({ id }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    // query
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

例：使用AWS存储服务

展示如何使用Amazon S3（AWS simple storage service）存储图片数据

  • 添加存储服务
1

amplify add storage
  • 修改schema
1
2
3
4
5
6
7

// amplify/backend/api/notesapp/schema.graphql
type Note @model @auth(rules: [ { allow: public } ] ){
  id: ID!
  name: String!
  description: String
  image: String // update
}
  • 在app中使用存储
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// update imports
import { API, Storage } from 'aws-amplify';
import {
  Button,
  Flex,
  Heading,
  Image,
  Text,
  TextField,
  View,
  withAuthenticator,
} from '@aws-amplify/ui-react';

// update functions, e.g. createNote
async function createNote(event) {
  event.preventDefault();
  const form = new FormData(event.target);
  const image = form.get("image");
  const data = {
    name: form.get("name"),
    description: form.get("description"),
    image: image.name,
  };
  // put image into storage
  if (!!data.image) await Storage.put(data.name, image);
  await API.graphql({
    query: createNoteMutation,
    variables: { input: data },
  });
  fetchNotes();
  event.target.reset();
}
  • 部署服务
1

amplify push --y # --yes: 省略所有命令行配置项，设置为default
完