AmplifyでReactアプリのデプロイ、CI/CDをする公式チュートリアルをやってみた
大阪オフィスのYui(@MayForBlue)です。
AWS Amplify(以下Amplify)を触る機会があり、Reactアプリのデプロイ、ホスティングとCI/CDを試すことができるチュートリアルを見つけたのでやってみました。
Reactを知らなくても簡単にできるのと、AmplifyだけでなくCI/CDがどういうものかをサクッと掴むこともできるのでとても良いチュートリアルだと思いました！
所要時間は30分くらいでした。
Deploy and host a ReactJS app with AWS Amplify Console
手順
前提条件
- Node.jsがインストールされていること
- GitHubアカウントを持っていること
Node.jsのバージョン確認コマンドはこちら
node -v
バージョンが8.0未満の場合はv8以上にバージョンアップします。
command not found が返ってくる場合はnodejs.org/downloadよりダウンロードします。
Reactアプリケーションを作成する
ターミナルで任意のディレクトリに移動してReactアプリケーションを作成します。
npx create-react-app amplifyapp
フォルダに移動してアプリケーションが起動できることを確認します。
cd amplifyapp
npm startするとローカルでアプリケーションが実行されます。
npm start
表示通りに http://localhost:3000 にアクセスするとアプリケーションが作成できていることを確認できました。
ターミナルでCtrl+Cを入力して中断します。
GitHubにpushする
GitHubリポジトリを作成します。
Repositoriesのタブの「New」をクリックします。
リポジトリ名を入力して「Create repository」をクリックします。
GitHubのガイド通りにアプリケーションフォルダをpushします。
echo "# amplifyapp" >> README.md git init git add README.md git commit -m "first commit" git remote add origin [email protected]:【username】/amplifyapp.git git push origin master
Amplify をセットアップする
マネジメントコンソールにログインしてAmplifyのダッシュボードに移動します。
Deploy の下の「GET STARTED」をクリックします。
リポジトリサービスに「GitHub」を選択して「次へ」をクリックします。
GitHubのアカウントを認証して、リポジトリブランチの追加で対象のリポジトリ、masterブランチを選択して「次へ」をクリックします。
ビルド設定の構成はデフォルトのまま進めます。
設定を確認して「保存してデプロイ」をクリックします。
アプリケーションのプロビジョン〜検証が全て完了したら、サムネイルの下のURLをクリックしてアプリケーションがデプロイされていることを確認します。
URLをクリックするとアプリケーションのデプロイが確認できました！
CI/CDを試す
ソースコードを変更してpushしたときに自動的にアプリケーションに反映されることを確認します。
ソースコードを一部編集します。
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>
// ↓Part2の文言追加
Edit <code>src/App.js</code> and save to reload.Part2
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
masterブランチにpushします。
git add . git commit -m "任意のコメント" git push origin master
pushと同時にアプリケーションのプロビジョニングが開始されていることが確認できました！
検証が終わったのを確認して再度URLにアクセスすると、変更後のアプリケーションがデプロイされていることも確認できました。
アプリケーションの削除
最後に環境を削除してチュートリアル終了です。
アプリケーションの画面右上のアクションから「アプリの削除」をクリックします。
「delete」を入力して「Delete」をクリックします。
最後に
Amplifyでのデプロイ、CI/CDをサクッと試すことができてとても良かったです!
気になった方はぜひやってみてください。
Deploy and host a ReactJS app with AWS Amplify Console
以上、大阪オフィスのYui(@MayForBlue)でしたっ(｀・ω・´)
