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

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

最近 Amplify を検証する機会が増えて、その流れで フロントエンドの OSS を ウォッチするようになったのですが、それで ふと思い付きました。

React の OSS は Amplify でホスティング可能のはず。

という訳で、試してみました。

対象とするOSS

Calculator は、React の公式サイトの Example Projects にも掲載されているアプリです。

フォークする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動作確認

一部、設定変更が必要でしたが、ひとまず動作確認ができました。

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

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

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