Zenn
😸

amplify publishで静的サイトをデプロイするための最小構成を調べた

2024/09/27に公開
AWS
Amplify
SSG
tech

AWS Amplify HostingのチュートリアルではJavaScriptフレームワークでアプリケーションを作ってGitHubリポジトリを接続してデプロイするものが多いが、ビルド時に中でどういうことをしているのか理解するために調べた。

結論

  • amplify init でプロジェクトを作ってamplify add hosting
  • package.json に "build"スクリプトを定義
  • dist/index.html を配置
  • amplify publish でデプロイ

詳細

1. amplify init でプロジェクトを作ってamplify add hosting 

amplify init
amplify add hosting

なぜこれが必要かというと、Amplify CLIがデプロイするために必要な情報を生成するため。プロジェクトのIDやAWSキーなどを設定する。

このコマンドは内部的にはCloudFormationのStackを構築している。

2. package.json に "build"スクリプトを定義

package.json
{
  "scripts": {
    "build": "echo 'build done'"
  }
}

これは、amplify publishの前提となるamplify buildを実行するために必要。

定義をなくしてしまうと、以下のようにamplify buildが失敗する。

❯ amplify publish -y
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

No changes detected
Publish started for amplifyhosting
npm ERR! Missing script: "build"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

🛑 Build command "npm run-script build" exited with failure

Resolution: Check the console output for more information, or run `amplify configure project` to change the build command.
Learn more at: https://docs.amplify.aws/cli/start/workflows/#amplify-configure-project

3. dist/index.html を配置

mkdir dist
echo 'Hello World on Amplify' > dist/index.html

デフォルトの設定ではdistディレクトリからファイルを探してデプロイする。amplify publishはこのディレクトリをzipにして一時ファイルを作成してアップロードする[1]。distディレクトリがないとデプロイできない。

❯ amplify publish -y
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

No changes detected
Publish started for amplifyhosting

> build
> echo 'build done'

build done
✖ Zipping artifacts failed. This is often due to an invalid distribution directory path. Run "amplify configure project" to check if your Distribution Directory is pointing to a valid path.
🛑 Please ensure your build artifacts path exists.

Resolution: Please report this issue at https://github.com/aws-amplify/amplify-cli/issues and include the project identifier from: 'amplify diagnose --send-report'
Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/

Session Identifier: c565b3c6-4721-41f7-ae57-XXXX

dist/index.htmlはなくてもデプロイコマンドは成功する。しかしURLにアクセスすると404エラーになる。

4. amplify publish でデプロイ

以上を満たすとamplify publishが成功する。

❯ amplify publish -y
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

No changes detected
Publish started for amplifyhosting

> build
> echo 'build done'

build done
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.XXXX.amplifyapp.com

脚注

  1. https://github.com/aws-amplify/amplify-cli/blob/cff2863c0b670071fd62d92b0163ec98ba1accc4/packages/amplify-console-hosting/src/utils/build-utils.js#L9-L38 ↩︎

Discussion