ReactのOSSを Amplify でホスティングしてみた – React Todo App編

テクニカルサポートチームの川崎です。

React の OSS は Amplify でホスティング可能のはず、ということで、Amplify OSS ホスティング チャレンジ の第2弾 です。

第1弾は こちら。

対象とするOSS

React Todo App は名前の通りReactで作成されたToDoアプリです。

フォークする

GitHub の自分のリポジトリに フォーク します。今回は private リポジトリを利用します。

# bareモードで clone する
git clone --bare https://github.com/kabirbaidhya/react-todo-app
# クローンしたディレクトリに移動
cd react-todo-app.git/

# あらかじめgithub上のprivateリポジトリを作成しておく
# 作成したリポジトリにmirrorでpushする
git push --mirror git@github.com:kawasaki-teruo/react-todo-app-20220701.git

# bareモードで clone したディレクトリは不要なので削除する
cd ../
rm -rf react-todo-app.git

Amplify ホスティングでデプロイ

Amplify ホスティングで デプロイしてみました。

「使用を開始する」 をクリックします。

「ウェブアプリケーションをホスト」 の 「使用を開始する」 をクリックします。

接続する Git リポジトリ を選択します。今回は GitHub を選択しました。

GitHub の 認証を行った後、 リポジトリとブランチを、それぞれ選択します。

ビルドの設定を変更します。今回のアプリでは「baseDirectory」の設定をデフォルトで表示されていた「/」から 「build」に変更しました。

確認画面が表示されますので、「保存してデプロイ」をクリックすると、デプロイが開始されます。

デプロイが開始されました。

デプロイが完了しましたので、左下の ホスティングURL をクリックして、アプリの動作確認を行います。

動作確認

ひとまず動作確認ができました。

本ブログの内容が、みなさまのお役に立てたら幸いです

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。