AWS Amplify で React 系のフレームワークを使うことが増えましたが、プロジェクト作成のやり方がすぐにわからなくなるので、自分のために簡単に記録しておきます。

すべて TypeScript 前提で、開発環境は基本的に Cloud9 です。他の環境でも同様にできるはずです。

この記事は、下記記事の日本語訳になります。

Memo: How to create a React and relative framework project for AWS AmplifyI've been using the React and relative framework more and more with AWS Amplify, but I quickly forget...

 dev.to

React (create-react-app)

基本は公式ドキュメントに沿う。

Vite | Amplify UI for ReactHow to get started using Amplify UI with Vite

 ui.docs.amplify.aws

プロジェクト作成

% npx create-react-app react-app --template typescript
% cd react-app

Amplify 設定

変更ポイントなし。

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reactapp
The following configuration will be applied:

Project information
| Name: reactapp
| 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? No
? Enter a name for the environment dev
? Choose your default editor: None
? 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
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

React (Vite)

一連の流れは公式には無いが、トラブルシューティングとして参考情報が載っている。

プロジェクト作成

% npm create vite@latest vite-react-app -- --template react-ts
% cd vite-react-app
% npm install

Amplify 設定

変更ポイント

• Distribution Directory Path: dist
• Start Command: npm run-script preview

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project vitereactapp
The following configuration will be applied:

Project information
| Name: vitereactapp
| 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? No
? Enter a name for the environment dev
? Choose your default editor: None
? 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: dist
? Build Command:  npm run-script build
? Start Command: npm run-script preview
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

開発準備

package.json から、下記の行を削除する。

   "type": "module",

index.html の body 閉じタグ前 に追加、下記コードを追加する。

  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    };
    var exports = {};
  </script>

vite.config.js を、下記コードの書きかえる

ポート番号指定は Cloud9 向け。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: [
      { find: "./runtimeConfig", replacement: "./runtimeConfig.browser" },
      { find: "@", replacement: "/src" },
    ],
  },
});

tsconfig.json の “jsx” プロパティを、下記のように書き換える。

    "jsx": "react"

参考

本家のドキュメントに、設定周りの変更点が記載してある。

Troubleshooting | Amplify UI for ReactWorkarounds for common issues using Amplify UI.

 ui.docs.amplify.aws

Next.js

Next.js v12 以降のホスティング機能が、最近のアップデートで対応された。

プロジェクト作成

% npx create-next-app@latest next-app --ts
% cd next-app

Amplify 設定

変更ポイント

• Source Directory Path: .
• Distribution Directory Path: .next

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project nextapp
The following configuration will be applied:

Project information
| Name: nextapp
| 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? No
? Enter a name for the environment dev
? Choose your default editor: None
? 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:  .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

開発準備

TypeScript の監視範囲から amplify ディレクトリ以下を除外する。(Amplify Custom や Amplify Override のファイルをビルドしようとして失敗するため。)

tsconfig.json の “exclude” プロパティを、下記のように書き換える。

  "exclude": ["node_modules", "amplify"]

参考

本家ドキュメントに流れが記載されているが、 Next.js のプロジェクト作成方法が異なる。

Deploy a Next.js app - JavaScript - AWS Amplify Gen 1 DocumentationHow to deploy a Next.js site to Amplify Hosting AWS Amplify Documentation

 docs.amplify.aws

Gatsby

最新の Gatsby v5 は Node.js v18 以上が必要なので、 Cloud9 の環境だと環境構築自体に大きな手間がかかる。

そのため、これだけ Local での確認とする。

プロジェクト作成

% npm init gatsby gatsby-app -- -y -ts
% cd gatsby-app

Amplify 設定

変更ポイント

• Distribution Directory Path: public
• Start Command: npm run-script serve

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project gatsbyapp
The following configuration will be applied:

Project information
| Name: gatsbyapp
| 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? No
? Enter a name for the environment dev
? Choose your default editor: None
? 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: public
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
? Select the authentication method you wa
...

参考

Gatsby のドキュメントから Amplify のドキュメントへリンクされている。

Deploying to AWS Amplify | GatsbyAWS Amplify is a combination of client library, CLI toolchain, and a console for continuous deployment and hosting. The Amplify CLI and…

 www.gatsbyjs.com

Deploy a Gatsby site - JavaScript - AWS Amplify Gen 1 DocumentationHow to deploy a Gatsby site to Amplify Console Hosting AWS Amplify Documentation

 docs.amplify.aws