Zenn
🔥

【初学者】React + AWS AmplifyでWebアプリを作成し公開する

2022/07/18に公開
AWS
React
Amplify
tech

動機

最近「知っているJavascriptのフレームワーク」を聞かれ、「JQuery」と答えたら笑われた。
私は人知れず傷ついた。

さっそくQiitaでJavascriptのフレームワークを探した。
「React」がよさそうだなと思い以下の記事を見つけた。
https://qiita.com/y_kawase/items/8f1b5a303400a09c4923

これですぐにWebアプリが作れるはずだ。
↓
実際に作ってみたところ、最新のフレームワークで動作するアプリを作るにはそれなりに苦労したため、ソースコードを公開し記事にしてみようと思った。

成果物

AWSが公開しているオープンデータをキーワードで検索できるサービスを作成し、実際に公開できました。
https://findawsopendata.mikkikimasu.com

スマホ・PCに対応した、シングルページアプリケーション（SPA）となっています。

ソースコードはGithub(MIT License)で公開していますので、ご自由にお使いください。

ソフトウェア構成

  • React 18.2.0 : 画面アプリ本体
  • Material UI 5.8.7 : マテリアルUI
  • react-markdown 6.3.0 : Markdown形式で記述されたデータの描画
  • AWS Amplify 4.3.26 : ビルドとデプロイ、GraphQL（AppSync）、データストア（DynamoDB）

後から再構築しようとした際にエラーが少なくなるよう、できる限り最新のバージョンで、多くの追加パッケージを使わないようにした。
（Reduxなどの状態管理のフレームワークは最小構成では不要に感じたため削除した。）

環境構築

以下の手順で進めた。

  1. React Projectの作成
  2. Amplify Projectの作成（AWS上での作業）
  3. React ProjectにAmplifyの設定を紐づけ
  4. ローカルでビルド通るまで実装
  5. Git登録、GitをAmplifyに紐づけ（自動ビルド、デプロイ）
  6. 実装

1. React projectの作成

公式の方法でProjectを作成する。
https://ja.reactjs.org/docs/create-a-new-react-app.html

npx create-react-app XXXXXX (project name)

2. Amplify Projectの作成

AWS Console上で
「新しいアプリケーションを作成」　→　「バックエンドを作成」を実行し、
Amplify Projectを作成する。

3. React ProjectにAmplifyの設定を紐づけ

ローカル環境にamplifyの実行環境が無い場合、まずは実行環境を構築する。
https://docs.amplify.aws/cli/start/install/

npm install -g @aws-amplify/cli
amplify configure

Amplify ProjectをAWSコンソール上で作成すると、コンソール上に「ローカル設定手順」が出現するので、React Project配下で実行する。

amplify pull --appId XXXXXXXXXXXXX --envName staging

4. ローカルでビルド通るまで実装

ローカル環境でビルド通る程度まで頑張る。
参考にさせていただいた上述のPJがご本人も言及している通りバージョンが古くなっており、
「React本体」や「Material UI」について、最新バージョンでビルドしようとすると通らない。
まずは本家のHPを確認し、基本的な文法を調べたほうが結果的に早回りになると思う。
https://mui.com/
https://ja.reactjs.org/

npm start

5. Git登録、Amplifyでホスティング（自動ビルド、デプロイ）

ビルドが通るようになったら、Git登録する。
Amplifyの設定が.gitignoreに登録されていないので注意

#.gitignore
.graphqlconfig.yml
amplify/team-provider-info.json

git clone XXX (Gitリポジトリ）
git add *
git commit -m "first commit"
git push origin master

Git登録したら、AWSコンソール上でAmplifyの「リポジトリブランチの追加」からGitを連携しホスティングする。

ドメインはデフォルトでAWSが用意している環境上にホスティングされる。
自分のドメインを設定することも可能。後から変更可能。

6. 実装

頑張って実装する。
最終的に以下の構成とした。

findawsopendata
├─amplify　：　Amplify自動生成
├─node_modules　： node_modules
├─public　：　index.htmlと画像データ
├─scripts　：　バックエンドデータ作成用Script
└─src　：　ソースコード
    ├─components : オープンデータの描画コンポーネント
    ├─containers : Main画面やInfo画面
    ├─graphql : GraphQL関連
    └─models : GraphQLのSchema定義

GraphQLの実行は単純で、検索メニュー（MUIのAutoComplete）のonChangeイベント発生時の実行関数としてAPI.graphqlを実行し、取得した結果をステートに保存、表示している。（Reduxなどのフレームワークは使っていない）

今回のアプリではGraphQLを用いてDBからデータを取得する構成としたため、Schemaの設計を行った。
Schema設計はクライアント側で行ってamplify pushでバックエンドに反映することも可能だが、
私の場合はAmplify上で設計、AppSync上でクエリのテストを行ったSchemaをローカル側で amplify pullすることで同期することにした。
GUI上で完結するし、このやり方だと特にDBの知識が必要ということもないため、大変便利に感じた。

Amplify Studio上でのschema定義作成画面
Amplify Studio上でのschema定義作成画面

App Sync上でのクエリの実行画面
App Sync上でのクエリの実行画面

終わりに

参考にした記事を書いていただいた@y_kawaseさん、ありがとうございました。何となく一歩を踏み出せたような気がしています。
また違うアプリを作って公開したいなという気持ちになりました。

Discussion