AmplifyでReactアプリのデプロイ、CI/CDをする公式チュートリアルをやってみた

AWS AmplifyでReactアプリのデプロイ、ホスティングとCI/CDができるチュートリアルをやってみました！

Yui

2020.03.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

大阪オフィスの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 git@github.com:【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)でしたっ(｀・ω・´)

AWS