Amplifyを利用したReact Webアプリケーションのデプロイ
Reactで作成したWebアプリをAmplifyにデプロイします。
![Amplifyを利用したReact Webアプリケーションのデプロイ](/content/images/size/w1200/2022/07/59750B12-9CC4-4659-8525-A98B07C5C1C3.webp)
はじめに
GitHubで管理しているWebアプリをAWS上に簡単にデプロイしてみたいと思い、Amplifyでデプロイする事にしました。
Amplifyとは
セキュアでスケーラブルなモバイルアプリケーションやウェブアプリケーションを構築するための開発プラットフォームです。
ユーザーの認証、データとユーザーのメタデータのセキュアな保存、データへの選択的なアクセスの許可、機械学習の統合、アプリケーションのメトリクスの分析、サーバー側コードの実行するといった作業を容易にします。
Amplify は、バージョンコントロール、コードのテスト、実稼働環境へのデプロイといったモバイルアプリケーションの開発ワークフロー全体をカバーしています。 容易にスケーリングできます。
AmplifyのライブラリとCLIはオープンソースであり、カスタマイズや自分自身のプラグインの作成する事が可能です。
サンプルのReactAppを作成する
nodeのバージョン確認
まずは、nodeのバージョンを確認します。 下記のコマンドをターミナルで実行して、nodeがインストールされているかを確認してください。
node -v
v12.16.3
新しいReactAppを作成する
下記のコマンドでアプリケーションを作成します。
npx create-react-app amplifytest
上記のコマンドの実行が完了したら、作成されたフォルダに移動します。
cd amplifytest
フォルダに移動したらアプリをスタートしてみます。
npm start
GitHubにリポジトリを作成する
GitHubのページに移動し、新たにリポジトリを作成します。 名前の欄にamplifytest
と入力し、Create repository
をクリックします。
![](http://spure.dev/content/images/2022/07/image.png)
ReactAppをGitにプッシュ
先ほど作成したReactAppをGitのリポジトリにプッシュします。
作成した新たなGitリポジトリのページに表示されているコマンドを参考に、Gitの設定を行います。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/c4d79213c97b59cc483f592625451f3a/86e67/Pict2.png)
ターミナルでReactAppがあるフォルダを開いて、下記のコマンドを実行します。
echo "# amplifytest" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/{!!!ここは個人のアカウント名になります!!!!}/amplifytest.git
git push -u origin master
上記のコマンドを実行し、GitHubのページを更新してみると、下記のように様々なファイルが追加されている事が確認できます。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/d149ea6f064fd89663724171f30faa82/86e67/Pict3.png)
ReactAppを変更してみる
別にやる必要無いのですが、デフォルトのページだと面白みが無いので、ページを変更してみようと思います。
先ほどReactAppを作成したファルダ内のsrc/app.js
を編集していきます。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Amplifyを確認するために作成したアプリです!
</p>
<p>
しっかりと動いてくれるかドキドキ!
</p>
</header>
</div>
);
}
export default App;
下記コマンドでGitに変更点をプッシュします。
git add src/App.js
git commit -m "Modify App.js"
git push -u origin HEAD
デプロイ方法
Amplifyページを開く
AWSマネジメントコンソールでAmplify
と検索し、サービスのページを開きます。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/e3acc6a57dbeb11ba473118495e407da/86e67/Pict4.png)
開始ボタンを押す
Build scalable cloud-powered apps
と記載されている方は、モバイルやWeb開発を簡素化するためのCLI(コマンドラインインターフェイス)とライブラリを提供してくれるサービスです。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/54a522a246972154eb511c939e889324/c15e7/Pict5.png)
Build, deploy, and host modern web apps
と記載されている方は、Gitリポジトリを接続して、フロントとバックエンドを継続的にデプロイする事ができます。 グローバルなCDNでホストしてくれるので、可用性もバッチリです。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/79100ab654fee9333e29397f7a28c5c1/c5c26/Pict6.png)
今回は、Build, deploy, and host modern web apps
のGET STARTED
をクリックします。
Gitリポジトリのサービス選択
今回はGitHubからデプロイしたいので、GitHub
を選択して、Continue
をクリックします。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/4b0c9a7ded100a50f658b078cde1ac7e/86e67/Pict7.png)
GitHubとの連携の画面が表示されたら、Authorize aws-amplify-console
をクリックします。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/f0595beed6a3fa76953e1684e8083c78/4e10f/Pict8.png)
レジストリ・ブランチの選択
認証が完了したら、デプロイしたいリポジトリとブランチを選択します。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/0925b779bfca77a1d44764e0e2b45718/86e67/Pict9.png)
ビルド設定の構成
アプリの名前を入力します。 今回はデフォルトの設定を利用します。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/03286e71d1e66fb3479ce15edc627db0/86e67/Pict10.png)
確認
今まで設定してきた項目を確認し、保存してデプロイ
をクリックします。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/37807223433e4c24bbde4b3b244f4e5e/86e67/Pict11.png)
上部にアプリの作成中が進行している旨が表示されます。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/979919a82abbe13f0a47f243ef5d85f2/28bc8/Pict12.png)
下記のように検証
の部分にチェックが付けばデプロイが完了しています。
https://<branchname>.<appid>.amplifyapp.com
にデプロイされています。 左下のリンクをクリックしてみましょう!
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/c7c8d1d3418c53c54eea72a884a21e1c/86e67/Pict13.png)
先ほど作成したReactAppにアクセスできるようになっています!
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/eeb11405128b249df612ce2fddcaf1a2/86e67/Pict14.png)
コードの変更を自動的にデプロイする
ターミナルで自分のパソコンのReactAppのフォルダに移動します。
src/App.jsの内容を変更します。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Amplifyを確認するために作成したアプリです!
</p>
<p>
しっかりと動いてくれました(^○^)!
</p>
</header>
</div>
);
}
export default App;
変更完了したら、GitHubのリポジトリへプッシュします。 ターミナルで以下のコマンドを実行してください。
git add src/App.js
git commit -m "Change Comment"
git push -u origin HEAD
変更後のAmplifyの確認
Gitへ変更点をプッシュしたら、Amplifyの管理画面を更新してみましょう。
下記のように、自動的に、プロビジョンから実行され、ビルドされています。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/e2c98e1d651111f5b7364f79b9dfcda1/86e67/Pict15.png)
検証まで終了したら、再度ページを開いてみましょう!
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/b6afdcf4f8c2371b0475d64de565ce31/86e67/Pict16.png)
内容が更新されました!
後始末
Amplifyの管理画面の右上に表示されている、アクション
から、アプリの削除
を選択します。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/7906bbdb34b13b284a32fb36ed800a8e/86e67/Pict17.png)
「削除する場合は、delete
と入力してください」と言われるので、delete
と入力して、delete
ボタンをクリックします。
下の図のように削除された旨が表示されたら正常に削除されています。
![image.png image.png](https://optimistic-shockley-21910d.netlify.app/static/114dee1e96ad145f7161bfd7bd590660/9db68/Pict18.png)
デプロイの確認は以上になります。
まとめ
とても簡単にReact Appをデプロイする事ができました。
こんなに簡単にデプロイできるなら、Webアプリを作るのが楽しくなりそうです。
すぐに削除する事ができるので、一旦、試しに作成してみるのも簡単にできると感じました。
今度は、しっかりしたReact Appのデプロイにチャレンジしてみようと思います。