2022-12-07 00:00:00(+09:00)

Last updated on 2022-12-09 00:31:18(+09:00)

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

[point_maker type=“heading_icon” base_color=“apple_green” title_icon=“info-circle-solid” title_color_background=“true” title_color_border=“false” content_type=“text” content_color_background=“true” content_color_border=“false” block_editor=“true”]

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

[/point_maker]

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

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

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

https://dev.to/aws-builders/memo-how-to-create-a-react-and-relative-framework-project-for-aws-amplify-34ja

React (create-react-app)

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

https://ui.docs.amplify.aws/react/getting-started/usage/create-react-app

プロジェクト作成

% 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"

参考

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

https://ui.docs.amplify.aws/react/getting-started/troubleshooting#vite

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

https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/

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 のドキュメントへリンクされている。

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-aws-amplify/

https://docs.amplify.aws/guides/hosting/gatsby/q/platform/js/