サンプルReactアプリの作成
npm init -y
npm i -S react react-dom next
package.jsonはこんな感じになっています。
npm run dev を実行すると開発サーバーが立ち上がるのでブラウザで http://localhost:3000 を開きます。
npm run export を実行すると out フォルダにindex.htmlや404.html などのファイルが出力されます。今回はこれらの静的なHTMLファイルを Amplify Consoleでホスティングすることまで出来れば目的達成です。
amplify-cliのインストール
npm i -g amplify-cli
Amplifyの初期化
amplify configure
amplify init
Amplify Consoleでのホスティング設定を追加
amplify hosting add
上のコマンドを実行して「Continuous deployment...」を選ぶと、ブラウザが開いて接続するGitリポジトリを聞かれます。
amplify.yml という設定ファイルを手動で変更する必要があるので、ダウンロードしてプロジェクトのルートフォルダに保存します。
ここではNext.jsでスタティック・エクスポートした成果物をデプロイしたいので、下のように一部を変更します。(commandsとbaseDirectory)
変更したamplify.ymlファイルをGitリポジトリにコミット・プッシュします。
プッシュした時点で自動的にAmplify Console側でビルド処理が走ります。
ProvisionからVerifyまで全てグリーンになってから画面に表示されているURLをクリックすると、アプリケーションがデプロイされているのが確認出来ます。
今は「Hello!」と表示するだけで何もしないアプリケーションですが、後は通常のReactアプリケーションとして「npm run dev」で実行しながらローカルで開発します。
ひとまずブラウザ上だけで動くTodoアプリを作りました。
このままではブラウザを閉じるとデータが消えてしまうので意味が無いですが、次回以降のエントリではここに「ユーザー認証」と「REST API経由でのDynamoDBへのデータ永続化機能」を追加して行こうと思います。
AWS AmplifyでReactアプリにユーザー認証機能を追加する
AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する
現在のソースコードはこちらで参照出来ます！
https://github.com/mikehibm/amplify-test01/tree/blog-2020-04-15