Zenn
🕴️

【更新版】とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築 (ホスティング編)

2023/11/06に公開
Amplify
hosting
tech

導入

前に書いた記事（とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築）の更新版です。
Cloud9にReactプロジェクトを作成してAmplifyを構築して疎通確認するまでの手順をまとめました。前に書いた記事からの変更点は要点ごとに記事を分けたことです。

留意事項

  • リージョン：オレゴン（us-west-2）
    • リージョンは↑で統一しているので、以降の手順を進める際にはリージョンをオレゴン（us-west-2）で進めます
  • Reactのプロジェクト名：sampleapp
    • 全て↑のフォルダ配下で行います

関連する記事の全体

  1. IAM作成編
  2. Cloud9&React準備編
  3. Amplify初期化編
  4. GraphQL構築編
  5. function構築編
  6. 疎通確認編
  7. ホスティング編 ← イマココ
  8. 後かたずけ編

構成

最終的な構成は以下の通りです。

今回はS3を赤枠で囲ってますが、厳密には「AWSがホスティング用に提供したS3バケット」を利用します。自分で作成したS3のバケットではない点にご注意ください。

ホスティング

AWSが提供する任意のドメイン（我々、AWS利用者側が指定できないドメイン）を利用して作成したReactへ接続します。複雑なドメイン設定を行うことなくウェブアプリとして動かしたい場合や外部から接続したい場合に便利な機能です。

前回までの記事で構築したReactプロジェクトsampleappの配下にターミナルで移動します。
以下のコマンドでホスティングの設定を行います。

amplify add hosting

実行するpluginモジュールを聞かれるので「Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)」を選択します。

? Select the plugin module to execute …  (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3

ホスティングの種類を選択します。詳細な設定は行わないので「Manual deployment」を選択します。

? Choose a type (Use arrow keys)
  Continuous deployment (Git-based deployments) 
❯ Manual deployment 
  Learn more

しばらくすると以下のメッセージが表示されホスティングの設定が完了します。

You can now publish your app using the following command:

Command: amplify publish

設定したホスティングのアップロード

ホスティングを設定しただけでは外部から接続できないので、Amplifyへアップロードして設定を反映します。
例によって以下のコマンドを実行します。

amplify publish

アップロードの再確認をされるので「Y」出先へ進みます。

   Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting  │ Create    │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ sampleapp       │ No Change │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ lambdaSampleapp │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) ‣

しばらくすると以下の表示が出てホスティングの設定が反映されます。

Compiled successfully.

File sizes after gzip:

  140.93 kB  build/static/js/main.abc123de.js
  1.78 kB    build/static/js/787.abc123de.chunk.js
  541 B      build/static/css/main.abc123de.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:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.abCedf1234567.amplifyapp.com

先ほどまでCloud9で作成したReactプロジェクトの静的コンテンツがAmplifyへアップロードされました。これで表示された https://dev.abCedf1234567.amplifyapp.comへブラウザでアクセスすると外部から接続できます。

以上でホスティングが完了になります。作成した環境を削除する場合は「後片付け編」を参照してください。

Discussion