Vercel

## はじめに
turborepoを使ったmonorepo構成でアプリを作っていて、その際に複数のフロントエンドのパッケージをcloud buildからそれぞれのvercelプロジェクトへデプロイしたかった。 

一つのパッケージを変更した際に、他のパッケージのデプロイまで実行されると嫌なので、vercelのGithub連携はやめて、CI/CDからデプロイするようにした。 

API側でGCP(compute engine)を使っている理由から、CI/CDでCloud Buildを採用した。 

**API側のデプロイの話**



 
<a target="_blank" rel="noopener" href="https://blog.1keiuu.com/posts/gcb-gce/" class="link-card"><img src="https://firebasestorage.googleapis.com/v0/b/portfolio21-56e7e.appspot.com/o/_ogp%2FeSPlvKhOJiBzH6DwBp5N?alt=media&amp;token=cbbf990f-d9f1-4732-8a17-43487392dddc" class="link-card__image">Node.jsアプリをcloud buildからcompute engineへデプロイする</a>
 


 

## アプリの構成
```
 apps/
 front/
 package.json
 ...
 admin/
 package.json
 ...
 package.json
```

monorepoを採用して複数個のフロントエンドアプリを一つのリポジトリで管理し、それぞれ別のサーバ(今回はvercel)へデプロイしています。 
今回のアプリではサイトのUIを扱う**front**と管理画面のUIを扱う**admin**があります。(実際には他にもapiなどのpackageがappsにある)
 
 

## デプロイの流れ
<div class="img__wrapper" style=justify-content:flex-start>
 <img src="https://storage.cloud.google.com/portfolio21-56e7e.appspot.com/articles/10/front-architecture.jpeg"> 
</div>

1. 変更を加えてGithubのmainへpush/merge
2. Github(Cloud Buildと連携済)がpushをCloud Buildへ通知
3. Cloud Buildが変更されたpackageをデプロイするためのトリガーを実行
4. トリガーからvercelへdeploy　

 
 
 
 
## デプロイの詳細
### 2. Github(Cloud Buildと連携済)がpushをCloud Buildへ通知
　GithubとCloud Buildを連携すればpush/mergeが通知されるようになる 

**参考**

 
<a target="_blank" rel="noopener" href="https://medium.com/google-cloud-jp/try-github-cloudbuild-integration-5149175105fb" class="link-card"><img src="https://miro.medium.com/max/1200/1*ipfJRK8KSpyTSUeFxXAomA.png" class="link-card__image">GitHubとGoogle Cloud Build の連携を試してみた！ | by Yuki Iwanari | google-cloud-jp | MediumCI/CDしてますか？. “GitHubとGoogle Cloud Build の連携を試してみた！” is published by Yuki Iwanari in google-cloud-jp.</a>
 


### 3. Cloud Buildが変更されたpackageをデプロイするためのトリガーを実行
　Cloud Buildのトリガーの作成を作成する。

　作成の際に「含まれるファイルフィルタ」にデプロイしたいパッケージのパスを追加する事で、対象のファイルに変更が加わった場合のみトリガーが実行されるようになる。　
 
例) apps/frontのデプロイ用トリガーの場合
<div class="img__wrapper" style="justify-content:flex-start">
 <img src="https://storage.googleapis.com/portfolio21-56e7e.appspot.com/articles/10/cloud-build-trigger.png"> 
</div>
 
 
 
### 4. トリガーがvercelへdeploy　
　トリガーで実行するstepでvercel cliからプロジェクトへデプロイする。 
　この時に以下のVercelのsecret情報が必要になる。　
 
 **secret情報** 
 - **VERCEL_TOKEN**: アカウント毎に作成できるToken 
 - **VERCEL_PROJECT_ID**: デプロイしたいprojecのID 
 - **VERCEL_ORG_ID**: デプロイしたいprojectを所有しているuser或いはorganazationのID 

これらはyamlに直書きしたく無いので、GCPのSecret Managerを使ってセキュアに取得する。 
 

 
<a target="_blank" rel="noopener" href="https://cloud.google.com/secret-manager" class="link-card"><img src="https://cloud.google.com/_static/cloud/images/social-icon-google-cloud-1200-630.png" class="link-card__image">Secret Manager &nbsp;|&nbsp; Google CloudSecurely store API keys, passwords, certificates, and other sensitive data with Google Cloud’s Secret Manager.</a>
 

 

## Cloud Buildの構成

 Cloud Buildのyamlファイルは以下の通り。 
```yaml
 steps:
 　- name: 'bash'
 entrypoint: 'bash'
 args: 
 - -c
 - |
 mkdir -p .vercel
 touch .vercel/project.json
 echo '{"orgId":"'$$VERCEL_ORG_ID'", "projectId":"'$$VERCEL_PROJECT_ID_FRONT'"}' >> .vercel/project.json
 cat .vercel/project.json
 secretEnv: ['VERCEL_PROJECT_ID_FRONT','VERCEL_ORG_ID']
 　- name: node:16.14.0
 entrypoint: npx
 args: ['npx','vercel','--prod','-t','$$VERCEL_TOKEN']
 secretEnv: ['VERCEL_TOKEN']
 availableSecrets:
 　secretManager:
 　- versionName: projects/{projectName}/secrets/VERCEL_PROJECT_ID_FRONT/versions/latest
 env: VERCEL_PROJECT_ID_FRONT
 　- versionName: projects/{projectName}/secrets/VERCEL_ORG_ID/versions/latest
 env: VERCEL_ORG_ID
 - versionName: projects/{projectName}/secrets/VERCEL_TOKEN/versions/latest
 env: VERCEL_TOKEN
 options:
 logging: CLOUD_LOGGING_ONLY
 timeout: 1200s
``` 

 まずstepの一つ目では、**.vercel/project.json** を作成し、SecretManagerから取得した **${VERCEL_ORG_ID}** と **${VERCEL_PROJECT_ID}** を書き込む。 

 二つ目では **${VERCEL_TOKEN}** をvercel cliのオプションに渡してdeployを実行。
 ```bash
 npx vercel --prod -t $$VERCEL_TOKEN 
 ```

 vercelの管理画面でデプロイがされていることを確認

 

## 終わりに
かなり説明はしょったけど久しぶりに記事書けた.

はじめに
turborepoを使ったmonorepo構成でアプリを作っていて、その際に複数のフロントエンドのパッケージをcloud buildからそれぞれのvercelプロジェクトへデプロイしたかった。 
一つのパッケージを変更した際に、他

Vercel

monorepo構成のフロントエンドアプリをcloud build経由でvercelへデプロイする