AWS Amplify Console で素の React アプリをホスティングしてみよう

$ npm install -g @aws-amplify/cli
$ amplify -v
4.17.2
$ amplify help


| Category      |
| ------------- |
| analytics     |
| api           |
| auth          |
| function      |
| hosting       |
| interactions  |
| notifications |
| predictions   |
| storage       |
| xr            |

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

amplify <command> <subcommand>

  init                Initializes a new project, sets up deployment resources in the cloud, and makes your project ready for Amplify.
  configure           Configures the attributes of your project for amplify-cli, such as switching front-end framework and adding/removing cloud-provider plugins.
  push                Provisions cloud resources with the latest local developments.
  pull                Fetch upstream backend environment definition changes from the cloud and updates the local environment to match that definition.
  publish             Executes amplify push, and then builds and publishes client-side application for hosting.
  serve               Executes amplify push, and then executes the project's start command to test run the client-side application locally.
  status              Shows the state of local resources not yet pushed to the cloud (Create/Update/Delete).
  delete              Deletes all of the resources tied to the project from the cloud.
  <category> add      Adds a resource for an Amplify category in your local backend
  <category> update   Update resource for an Amplify category in your local backend.
  <category> push     Provisions all cloud resources in a category with the latest local developments.
  <category> remove   Removes a resource for an Amplify category in your local backend.
  <category>          Displays subcommands of the specified Amplify category.
  mock                Run mock server for testing categories locally.
  codegen             Generates GraphQL statements(queries, mutations and eventHandlers) and type annotations.
  env                 Displays and manages environment related information for your Amplify project.
  console             Opens the web console for the selected cloud resource.

$ amplify configure
(snip)
$ npx create-react-app myapp2020
$ cd myapp2020
$ npm start

$ amplify init
? Enter a name for the project myapp2020
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? 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

(snip)

Adding backend environment dev to AWS Amplify Console app: dilgvpwauepwn
⠦ Initializing project in the cloud...

CREATE_IN_PROGRESS UnauthRole              AWS::IAM::Role             Mon Mar 31 2020 09:20:48 GMT+0900 (Japan Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                AWS::IAM::Role             Mon Mar 31 2020 09:20:48 GMT+0900 (Japan Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket        AWS::S3::Bucket            Mon Mar 31 2020 09:20:48 GMT+0900 (Japan Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole              AWS::IAM::Role             Mon Mar 31 2020 09:20:48 GMT+0900 (Japan Standard Time)
CREATE_IN_PROGRESS AuthRole                AWS::IAM::Role             Mon Mar 31 2020 09:20:48 GMT+0900 (Japan Standard Time)
CREATE_IN_PROGRESS DeploymentBucket        AWS::S3::Bucket            Mon Mar 31 2020 09:20:47 GMT+0900 (Japan Standard Time)
CREATE_IN_PROGRESS amplify-myapp-dev-42039 AWS::CloudFormation::Stack Mon Mar 31 2020 09:20:44 GMT+0900 (Japan Standard Time) User Initiated
⠧ Initializing project in the cloud...

(snip)

CREATE_COMPLETE amplify-myapp-dev-42039 AWS::CloudFormation::Stack Mon Mar 31 2020 09:21:11 GMT+0900 (Japan Standard Time)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

(snip)

$ amplify add hosting
? Select the plugin module to execute (Use arrow keys)
? 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

$ amplify publish
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠦ Updating resources in the cloud. This may take a few minutes...

(snip)

✔ All resources are updated in the cloud


Publish started for amplifyhosting

> myapp2020@0.1.0 build /Path/to/myapp2020
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.39 KB  build/static/js/2.560e4ef9.chunk.js
  770 B     build/static/js/runtime-main.0bbf322e.js
  646 B     build/static/js/main.6fcf60da.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.d2z9z6vvlc6d0d.amplifyapp.com