Secret Manager

## はじめに
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プロジェクトへデプロイしたかった。 
一つのパッケージを変更した際に、他

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

cloud buildからcompute engineへssh(scp)している例があまり無かったのでメモ。 
## Cloud Buildの構成

Cloud Build構成ファイル(cloudbuild.yaml)は以下の通り
```yaml
steps:
 # ① Cloud Buildの実行環境にSSH鍵を作成
 - name: 'bash'
 secretEnv: ['SSH_KEY','SSH_KEY_PUB']
 entrypoint: 'bash'
 args:
 - -c
 - |
 mkdir -p /builder/home/.ssh
 echo "$$SSH_KEY" >>/builder/home/.ssh/google_compute_engine
 echo "$$SSH_KEY_PUB" >>/builder/home/.ssh/google_compute_engine.pub
 chmod 400 /builder/home/.ssh/google_compute_engine
 # ② アプリをビルド
 - name: node:16.14.0
 entrypoint: npm
 args: ['install']
 - name: node:16.14.0
 entrypoint: npm
 args: ["run","build"]
 # ③ VMインスタンスへファイルを転送
 - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
 entrypoint: gcloud
 args: ['compute', 'scp', '--recurse', 'src','root@instanceName:api', '--zone', 'asia-northeast1-b']
availableSecrets:
 secretManager:
 - versionName: projects/{projectName}/secrets/SSH_KEY/versions/latest
 env: SSH_KEY
 - versionName: projects/{projectName}/secrets/SSH_KEY_PUB/versions/latest
 env: SSH_KEY_PUB
options:
 logging: CLOUD_LOGGING_ONLY
timeout: 1200s
```

**①** Compute Engineへssh(scp)する為の鍵をCloud Buildの実行環境に作成 
 
　　ssh鍵の内容はSecret Managerに保存し、ビルド時に復号する。 

**②** アプリをビルド 

**③** VMインスタンスへscpでファイルを送信

 

## 作業の流れ 
 

1. SSH鍵を作成

```sh
 ssh-keygen -t rsa -f ~/.ssh/google_compute_engine
```

2. 作成した公開鍵(google_compute_engine.pub)の中身をVMインスタンスのメタデータに追加する
 メタデータはCompute Engine管理画面の「メタデータ」 > 「SSH 認証鍵」から編集できる

3. 1で作成したSSH鍵をCloud Buildの実行環境で使う為に、Secret Managerにシークレットを追加する
 yamlファイルでいう**SSH_KEY**と**SSH_KEY_PUB** 

4. Cloud Build構成ファイル(cloudbuild.yaml)を作成

5. Cloud Buildのトリガーを作成してビルドを実行
 
**参考** 
- SSH鍵の作成
<ogp-card :ogpindex="0" :ogps="ogps"></ogp-card>
 
 
 
## 終わりに
フロント側のデプロイフローも紹介してるのでこちらも是非 

 
<a target="_blank" rel="noopener" href="https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/deploying_red_hat_enterprise_linux_7_on_public_cloud_platforms/creating-ssh-keys-for-google-compute-engine_uploading-the-rhel-image-to-gcp" class="link-card"><img src="https://access.redhat.com/webassets/avalon/g/shadowman-200.png" class="link-card__image">5.4.3. Google Compute Engine の SSH 鍵の作成 Red&nbsp;Hat Enterprise Linux 7 | Red Hat Customer PortalRed Hat Customer Portal - Access to 24x7 support and knowledgeRed Hat</a>

cloud buildからcompute engineへssh(scp)している例があまり無かったのでメモ。 
Cloud Buildの構成
Cloud Build構成ファイル(cloudbuild.yaml)は以下の通り
steps:
 