Note: This passage is written in Chinese and translated into English via ChatGPT.

I found a project tutorial for AWS Amplify on the AWS official website. It seems that it has not been translated into Chinese yet, so I took some notes while exploring it.

Not Translated

Introduction to AWS Amplify

Amplify is a comprehensive platform that provides static resource hosting for:

  • Creating AWS backends with features like authentication, data storage, and more for web, iOS, or Android applications in minutes.
  • Building frontend UI intuitively from design to code with Figma integration and connecting it to the backend with just a few clicks.

In summary, apart from a few distinctive features, it is quite similar to services like Netlify and also offers a certain amount of free usage:

  • AWS Amplify Features:
    • Supports visual development of full-stack websites or applications.
    • Supports deploying mobile applications, which Netlify does not.
    • Comprehensive ecosystem, making it convenient to use other AWS services.

Getting Started with Amplify

The main goal is to host a web page and deploy a backend, and additionally, there are examples of adding AWS authentication and storage services as supplementary features.

Note: The following steps only show the configuration and deployment process related to Amplify. The complete code of the app is not provided here. Please refer to the original article for the specific app code.

Prerequisites

  1. Create a frontend application or use an existing one.
  2. Push it to a GitHub repository.

Deploying the Frontend

  1. Register for an AWS account (requires a credit card that can be charged $1).
  2. Log in and find the AWS Management Console.
  3. Go to the “Get started” page and click “Get started” under the “Host your web app” section.

Get started

  1. Choose GitHub as the deployment option, confirm the repository and branch information, and click “Next” multiple times.
  2. Click “Save and deploy” to complete the process. Afterward, any modifications and pushes to the repository will automatically update the website.
Completion Page

Deployed

Installing Amplify CLI - Adding/Managing AWS Services

Installing the CLI

Amplify CLI allows you to add AWS services to your project.

1
2

# Install CLI
npm install -g @aws-amplify/cli

Note: Compatibility issue on ARM Macs

If you encounter issues on M1/M2 Macs, where the CLI installs successfully but commands don’t respond, you can try one of the following solutions. Refer to issue #10193 for more information:

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

# Solution 1: Install Rosetta (may or may not work)
softwareupdate --install-rosetta

# Solution 2: Clone an older version of the CLI (@danrivett) (may or may not work)
# Environment: 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: Manually download and install an older version from the releases page (@kzetxa)
# Environment: node@16.12.0, Amplify 10.3.1, macOS Monterey 12.6
# 1. Delete the binary at /usr/local/bin/amplify
# 2. Rename the binary inside the downloaded package
# 3. Move it to the location where the old deleted binary was
sudo chown -R $(whoami) ~/.amplify

I have successfully used the third solution, with the same environment as mentioned. It seems that it involves a translation from x86.

Configuring the CLI

1
2
3
4
5
6
7
8

# Configure the CLI
amplify configure

# 1. You will be redirected to the web console for login.
# 2. Select your region.
# 3. Return to the web console to create a new user.
   # The user needs programmatic access.
   # Record the access key ID and secret access key.

You will need the CLI for adding various services. Additionally, you can now use the following command to directly access the console:

1
2

# In the local terminal
amplify console

Deploying the Backend

Launching Amplify Studio

Go back to the application page - backend environments - get started - launch studio - and run the local setup command in the terminal (copy from the web page).

Launching Studio

Then choose the configuration options:

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

Adding Backend Build Configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# App settings > Build settings 
# Add backend configuration
...
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
...

Example: Adding AWS Authentication

This example demonstrates how to add AWS authentication to a note-taking application.

Adding Authentication via the Command Line

1
2
3
4
5

# In the local terminal
# Create the authentication service locally
amplify add auth
# Deploy it
amplify push --y

Using the Auth Service in src/index.js

Import the configuration and add the following code to your src/index.js file:

1
2
3
4

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

Importing Authentication into src/App.js

Import similar to the following (a sample with only authentication):

 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 (
	/* Middle part omitted */
  );
}

export default withAuthenticator(App);

Authentication Finally, push the changes to the remote repository.

Adding a Backend Database

  • Add a GraphQL API
1
2

amplify add api
# Choose GraphQL
  • Local configuration

Create a schema in /amplify/backend/api/<api_name>/schema.graphql. For example:

1
2
3
4
5

type Note @model @auth(rules: [{ allow: public }]) {
  id: ID!
  name: String!
  description: String
}
  • Deploy the service
1

amplify push --y # --yes: Omit all command-line configuration options and set as 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 a query in the frontend

Example:

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 } },
  });
}

Example: Using AWS Storage Services

This example shows how to use Amazon S3 (AWS Simple Storage Service) to store image data.

  • Add the storage service
1

amplify add storage
  • Modify the 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
}
  • Use storage in the 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();
}
  • Deploy the service
1

amplify push --y # --yes: Omit all command-line configuration options and set as default
End