AWS: Amplify で React をデプロイ

React を S3 にデプロイする方法です。
Amplify を使います。

プロジェクトの作成

npx create-react-app react05
cd react05
yarn start

ページを修正

src/App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
	  <p>こんにちは</p>
	  <blockquote>
	  <p>Jul/17/2022 PM 12:25</p>
	  </blockquote>
      </header>
    </div>
  );
}

export default App;

Amplify の設定

amplify init
amplify add hosting

設定ファイルの修正
"DomainName" を "RegionalDomainName" にします。

amplify/backend/hosting/S3AndCloudFront/template.json

(省略)
"Origins": [
            {
              "DomainName": {
                "Fn::GetAtt": [
                  "S3Bucket",
                  "RegionalDomainName"
                ]
              },
(省略)

デプロイ

amplify publish

実行の様子

$ amplify publish
⠧ Fetching updates to backend environment: dev from the cloud.Overrides functionality is not implemented for this category
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘

No changes detected

? Do you still want to publish the frontend? Yes

> react05@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  46.52 kB  build/static/js/main.a665071d.js
  1.78 kB   build/static/js/787.edd8f98f.chunk.js
  541 B     build/static/css/main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
https://drqynl1******.cloudfront.net

ブラウザーでアクセス