0
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

はじめに

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

gitリポジトリ作成

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

image.png

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

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

image.png

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

3) npxのバージョンを確認

$ npx --version

6.14.15
  • npxがインストールされていない場合
$ npm install -g npx

4) creat-react-appのインストール

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

5) 起動させてみる

$ cd react-test
$ npm start
  • 以下のURLにアクセスする

localhost3000

image.png

reactアプリをpush

6) 以下のコマンドを実行して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の設定

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

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

image.png

8) 「GitHub」を選択して「Continue」をクリックします

image.png

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

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

image.png

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

image.png

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

image.png

動作確認

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

image.png

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

image.png

更新してみる

13) プログラムを更新して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;

14) pushして更新する

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

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

image.png

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

image.png

image.png

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

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?