AWS Amplify 向け React 系フレームワークのプロジェクトの作り方

こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2022” の 8日目の記事です。

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...
Memo: How to create a React and relative framework project for AWS Amplify dev.to
Memo: How to create a React and relative framework project for AWS Amplify

React (create-react-app)

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

Create React App | Amplify UI for ReactHow to get started using Amplify UI with Create React App
Create React App | Amplify UI for React ui.docs.amplify.aws
Create React App | Amplify UI for React

プロジェクト作成

% 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.
Troubleshooting | Amplify UI for React ui.docs.amplify.aws
Troubleshooting | Amplify UI for React

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 のプロジェクト作成方法が異なる。

 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…
Deploying to AWS Amplify | Gatsby www.gatsbyjs.com
Deploying to AWS Amplify | Gatsby
 docs.amplify.aws

tacck
  • tacck
  • 北の大地の普通のソフトウェアエンジニア。
    インフラ・バックエンド・フロントエンドと、色々やります。

    初心者・若手向けのメンターも希望あればお受けします。

    勉強会運営中
    * ゆるWeb勉強会@札幌
    * スマートスピーカーで遊ぼう会@札幌

コメントする

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください