add: deploy to vercel

[r-sugi]

188

PR Type

enhancement, configuration changes

---

Description

• Vercelへのデプロイメントを自動化するためのGitHub Actionsワークフローを追加しました。
• プッシュイベントと手動トリガーに対応しています。
• プレビュー環境と本番環境のデプロイメントが設定されています。
• Node.jsのセットアップ、依存関係のインストール、ユニットテストの実行を含むテストジョブを追加しました。

---

Changes walkthrough 📝

	Relevant files
Configuration changes	deploy-to-vercel.yml Vercelへのデプロイメント用GitHub Actionsワークフローの追加                                    .github/workflows/deploy-to-vercel.yml 新しいGitHub Actionsワークフローを追加 Vercelへのデプロイメントを自動化 プレビューと本番環境のデプロイメントを設定 キャッシュと依存関係の管理を追加 +85/-0

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextjs-tdd-template_storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2024 4:12pm

[github-actions[bot]]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No key issues to review

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Best practice	ノードのバージョン指定を固定バージョンに変更することで、予期しない挙動を防ぎます。 ___ ** node-versionの指定において、バージョン指定の形式を固定バージョンに変更してください。現在の"^v18.19.0"は、意図しないアップデートを許可する可能性があります。** [.github/workflows/deploy-to-vercel.yml [21]](https://github.com/r-sugi/nextjs-tdd-template/pull/193/files#diff-188fb7f2b49685bdf5bce501e2564073fa622a39a4c5379f2ab028d48687e3ffR21-R21) ```diff -node-version: "^v18.19.0" +node-version: "18.19.0" ``` Suggestion importance[1-10]: 9 Why: Changing the node version to a fixed version prevents unintended updates, which is a best practice for ensuring consistent build environments.	9
	Vercel CLIのインストール方法を変更して、ビルドプロセスをクリーンに保ちます。 ___ **npm install --global vercel@latestの代わりに、npx vercel@latestを使用してください。これにより、グローバルにインストールする必要がなくなり、ビルドプロセスがよりクリーンになります。** [.github/workflows/deploy-to-vercel.yml [48]](https://github.com/r-sugi/nextjs-tdd-template/pull/193/files#diff-188fb7f2b49685bdf5bce501e2564073fa622a39a4c5379f2ab028d48687e3ffR48-R48) ```diff -run: npm install --global vercel@latest +run: npx vercel@latest ``` Suggestion importance[1-10]: 8 Why: Using `npx` instead of globally installing the Vercel CLI simplifies the build process and avoids potential conflicts with other global packages.	8
	GitHub Actionsの条件式を明確にするために、適切な参照を使用します。 ___ **if条件のgithub.refを使用する際は、github.event.refを使用することを検討してください。これにより、イベント駆動の条件がより明確になります。** [.github/workflows/deploy-to-vercel.yml [38]](https://github.com/r-sugi/nextjs-tdd-template/pull/193/files#diff-188fb7f2b49685bdf5bce501e2564073fa622a39a4c5379f2ab028d48687e3ffR38-R38) ```diff -if: ${{ github.ref != 'refs/heads/release' }} +if: ${{ github.event.ref != 'refs/heads/release' }} ``` Suggestion importance[1-10]: 7 Why: Using `github.event.ref` can make the condition more explicit and reliable, especially in event-driven workflows, although the current usage is not incorrect.	7
Enhancement	ドメイン名を環境変数から取得することで、設定の柔軟性を向上させます。 ___ **vercel aliasコマンドのドメイン指定において、プレースホルダーを使用していますが、これを環境変数またはシークレットから取得するように変更してください。これにより、設定の柔軟性が向上します。** [.github/workflows/deploy-to-vercel.yml [62]](https://github.com/r-sugi/nextjs-tdd-template/pull/193/files#diff-188fb7f2b49685bdf5bce501e2564073fa622a39a4c5379f2ab028d48687e3ffR62-R62) ```diff -run: vercel alias ${{ steps.deploy.outputs.url }} stg.nextjs-tdd-template.com --scope=my-team --token=${{ secrets.VERCEL_TOKEN }} +run: vercel alias ${{ steps.deploy.outputs.url }} ${{ secrets.STAGING_DOMAIN }} --scope=my-team --token=${{ secrets.VERCEL_TOKEN }} ``` Suggestion importance[1-10]: 8 Why: Fetching the domain name from an environment variable increases flexibility and allows for easier configuration changes without modifying the code.	8

[github-actions[bot]]

Preview: preview_app - https://nextjs-tdd-template-ayb61169a-rsugis-projects.vercel.app

[github-actions[bot]]

Preview APP: 'https://nextjs-tdd-template-pv5yxjyjo-rsugis-projects.vercel.app'