AWS AmplifyでViteプロジェクトをデプロイする

はじめに

AWSでモダンな開発してみたーーい！
と思って挑戦したは良いものの、最小限のviteプロジェクトをデプロイする段階ですっ転んだので、同じ悲しみは起こすまいと書き残す備忘録兼やったことログです。

実行環境

項目	内容
OS	macOS (M4)
Node.js	v24.11.1
Vite	v7.2.4
AWSリージョン	ap-northeast-1

全体手順

手順としては以下の順序で行いました。

1. viteの新規プロジェクト作成
2. ローカルで動作確認
3. Amplifyの設定ファイル作成
4. GitHubリポジトリの作成
5. AWS Amplify Gen2でデプロイ

1. viteの新規プロジェクト作成

viteの新規プロジェクト作成を行います。

npm create vite@latest [プロジェクト名] -- --template react-ts
cd [プロジェクト名]
npm install

viteのプロジェクトを作成し、ディレクトリを移動。
その後依存パッケージのインストールを行いました。ごく一般的な TypeScript + React 構成のviteプロジェクト作成の流れです。

プロジェクトの構成

プロジェクト構成図は以下のようになります。
作成ほやほやデフォルト状態のまま手を加えていません。

.
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

2. ローカルで動作確認

npm run dev

を実行して、viteプロジェクトが動作することを確認します。
サーバー起動後に表示されるURLへ飛んで、以下の画面が表示されていればOKです。

3. Amplifyの設定ファイル作成

ビルド設定のファイルを作成します。

touch amplify.yml

中身は以下のように記述しました。

# amplify.yml
version: 1
applications:
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - .npm//*

4. GitHubリポジトリの作成

Githubで新規リポジトリを作成した後、ローカルリポジトリの初期化を行いプッシュします。

// gitのローカルリポジトリ初期化
git init
git add .
git commit -m "[適当なコメント]"
git branch -M main
git remote add origin [URL]
git push -u origin main

5. AWS Amplify Gen2でのデプロイ

AWSコンソールにログインし、Amplifyコンソールから「アプリケーションをデプロイ」を選択。
ソースコードプロバイダーに「GitHub」を選択し、連携を行います。

• リポジトリ : [プロジェクト名]
• ブランチ : 「main」

今回は最小限のviteプロジェクトだけなので、諸々デフォルトのまま進め、「保存してデプロイ」します。
設定が完了したら、デプロイが開始されます。

詰まったところ

yamlファイルをまともに書いたことがなかったので、ビルド設定まわりで大いにずっこけました。
ビルドの失敗にはじまり、ビルドに成功したと思えばまさかの404エラーが多発したため、備忘録ついでに残します。

ビルドが失敗する

ビルド設定の記述

yamlはインデントで階層構造を表現します。
構造の表記はしっかりしましょう。でないとビルドの段階で失敗します。

修正前のコード

# amplify.yml
version: 1
applications:
frontend:
phases:
  build:
    commands:
      - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '/*'
  cache:
    paths:
      - .npm//*

修正後のコード

# amplify.yml
version: 1
applications:
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '/*'
  cache:
    paths:
      - .npm//*

ビルドに成功しても404エラーが表示される

ビルドとデプロイには成功しましたが、どうしてか表示されてくれませんでした。
404エラーが表示され、ローカルで確認できたviteプロジェクトの初期画面とは違う無機質な画面のままでした。

やっぱりビルド設定の記述

原因はamplify.ymlの

files:
  - '/*'

でした。
これを

files:
  - '**/*'

に修正することで404エラーが解消され、アプリがAWS上でもローカルと同様に動作する様子が確認できました。

修正前のコード

# amplify.yml
version: 1
applications:
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '/*'
  cache:
    paths:
      - .npm//*

修正後のコード

# amplify.yml
version: 1
applications:
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - .npm//*

なんで - /* じゃ駄目なの？

  artifacts:
    baseDirectory: dist
    files:
      - '/*'

は、 distディレクトリ直下のファイル をデプロイする設定でした。
しかしnpm run buildで生成されるdistディレクトリの構造は、以下のようになっていました。

// distディレクトリの構造
.
├── assets
│   ├── index-COcDBgFa.css
│   ├── index-Dkkjzrfh.js
│   └── react-CHdo91hT.svg
├── index.html
└── vite.svg

そのため、

• dist/index.html
• vite.svg

はデプロイされるものの、さらに下階層にある

• dist/assets/index-COcDBgFa.css
• dist/assets/index-Dkkjzrfh.js
• dist/assets/react-CHdo91hT.svg

はデプロイされていないため、ページが正しく動作せず404エラーを引き起こしていました。

しかし、

  artifacts:
    baseDirectory: dist
    files:
      - '**/*'

と設定することで、

• ** = すべての階層(サブディレクトリを再起的に探索)
• * = 任意のファイル名
• **/* = 「すべてのサブディレクトリ内のすべてのファイル」

と指定され、distディレクトリ内に存在するすべてのファイルが正しくデプロイされるようになったわけです。

まとめ

• AWS AmplifyはGitHubと連携することで、Push時に自動でデプロイしてくれる
• ビルド設定を正しく行わないとデプロイに失敗し、デプロイに成功してもエラーを引き起こす
  • amplify.ymlファイルを設置することで設定可能
  • Amplifyコンソール上での編集も可能

感想

設定に四苦八苦したものの、簡単な設定を行うだけでGitHubへのPush一つでアプリがデプロイ出来るのは驚異的な便利さです。
CI/CDといえばGitHub Actionsが有名ですが、ゆくゆくはそっちも触ってみたいな〜〜と思いました。

参考文献