Reactアプリケーションを作成してAWS Amplifyサービスにホスティングする

はじめに

Reactでアプリケーションを作成してAWS Amplifyサービスを使ってホスティングしてみようと思います。

gitリポジトリ作成

1. 「New repository」をクリックします

1. git ripository作成に必要な項目を入力してcreate repositoryをクリックします

• Repository name：任意の名前
• 公開設定： privateを選択

Reactアプリケーションの作成

1. npxのバージョンを確認

$ npx --version

6.14.15

• npxがインストールされていない場合

$ npm install -g npx

1. creat-react-appのインストール

$ npx create-react-app --template typescript react-test

1. 起動させてみる

$ cd react-test
$ npm start

• 以下のURLにアクセスする

localhost3000

reactアプリをpush

1. 以下のコマンドを実行してpushします

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M master

# 以下のコマンドにgit urlを追加します
$ git remote add origin --- [git url] ---


$ git push origin master

AWS Amplifyの設定

1. マネージメントコンソールにログインしてAWS Amplifyサービスを開いて「Deliver」の「Get started」をクリックします

マネージメントコンソール

1. 「GitHub」を選択して「Continue」をクリックします

1. リポジトリブランチの追加に必要な項目を選択して「次へ」をクリックします

• リポジトリ：先ほどgithubで作成したリポジトリを選択
• ブランチ： reactアプリをpushしたブランチを選択

1. ビルド設定の構成が表示されるので「次へ」をクリックします

1. 「保存してデプロイ」をクリックします

動作確認

1. しばらくすると「プロビジョン」～ 「検証」まで✅がつくので、「全般」をクリックして「本番用ブランチURL」のURLをクリックして動作確認します

• クリックしたURLでアクセスできること確認できました

更新してみる

1. プログラムを更新してgitにpushする

• src/App.tsxを編集してみる
  • 11行目を削除して「hello world」に変更

App.tsx

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>
          hell world    {/*　変更 */}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

1. pushして更新する

$ git add App.tsx
$ git commit -m "two commit"
$ git push origin master

1. AWS Amplifyを開いて「react-test」(Amplifyを作成した名前)をクリックして「検証」をクリックします

1. 「このバージョンを再デプロイ」をクリックしてしばらくすると再度「プロビジョン」～「検証」まで✅がついたら「ドメイン」のURLをクリックします

• 更新されてることが確認できました