初心者のGCP：Cloud Run編

Next.jsで、アプリを色々作っているのですが、他の人に共有するためにCloud Runで簡単な公開をします。


# やりたいこと
以下のようにNext.JSの静的アプリケーションをCloud Runでホスティングします。

![スクリーンショット 2024-05-05 23.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152224/db7a4419-a0ab-c17f-50b7-5b2ac986696b.png)

# 開発環境

- Macbook Air Apple M1
- macOS Sonoma 14.3.1

# GCPでの作業

## GCPの初期設定

gcpコマンドに迷ったらここを参照

https://qiita.com/masaaania/items/7a83c5e44e351b4a3a2c


## Cloud Runで、Next.jsアプリのホスティング

基本的にこちらを参考にCloud Run へのホスティングを実施

https://zenn.dev/pino0701/articles/nextjs_cloudrun

### Cloud Buildの有効化
```bash
$ gcloud services enable cloudbuild.googleapis.com --project <gcpのプロジェクトID>
```

### Cloud Runの有効化
```bash
$ gcloud services enable run.googleapis.com --project <gcpのプロジェクトID>

example >>>
$ gcloud services enable run.googleapis.com --project nextjs-blog-395615

```

### Cloud Buildで、コンテナイメージのビルド

```bash
$  gcloud builds submit --tag gcr.io/<gcpのプロジェクトID>/<アプリケーション名>  --project <gcpのプロジェクトID>

example >>>
$  gcloud builds submit --tag gcr.io/nextjs-blog-395615/nextjs-blog  --project nextjs-blog-395615
```

### デプロイ

```bash
$ gcloud run deploy <アプリケーション名> --image gcr.io/<gcpのプロジェクトID>/<アプリケーション名>  --platform managed  --project <gcpのプロジェクト名> --region=asia-northeast1 --allow-unauthenticated

example >>>
$ gcloud run deploy nextjs-blog --image gcr.io/nextjs-blog-395615/nextjs-blog  --platform managed  --project nextjs-blog-395615 --region=asia-northeast1 --allow-unauthenticated
```

これで、Cloud Runにデプロイが完了します。

## Cloud Storageから、Staticファイルを引っ張ってくる設定

以下を参考に、3Dモデルなどのファイルサイズの重いファイルをCloud Storageから引っ張ってくるようにする。

https://zenn.dev/catnose99/articles/18720e3af36d22#%E3%80%8C%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC-%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%80%8D%E3%81%AB%E3%81%99%E3%82%8B%E3%81%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%B8%80%E8%A6%A7%E3%81%AF%E9%9D%9E%E5%85%AC%E9%96%8B%E3%81%AB

:::note warn
今回はクライアントサイドアプリからの実行のため、全てのアクセスを許可する設定にしていますが、不特定多数のアクセスの可能性があるため高額になるリスクがあります
:::

### まずは、Cloud Storageに特定のファイルをアップロード

### Cloud Storageのアクセス権でパブリックアクセスを許可

クライアントから直接Cloud Storageにアクセスするため、各Staticファイルのアクセス権を編集します。

![スクリーンショット 2024-05-06 13.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152224/2b71f44a-dd91-309b-653e-d95e24d89517.png)

アクセス権に、以下を設定して、すべてのユーザがアクセス可能な状態にします。
- エンティティ： Public
- 名前： allUsers
- アクセス権： Reader

![スクリーンショット 2024-05-06 13.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152224/8df23367-6a99-edbc-b2e3-0b2150a0af43.png)

### Cloud StorageにCORSを設定する
Webアプリのため、Cloud Storageのファイルにアクセスすると、CORSエラーに引っかかります。
なので、Cloud Storage側のCORSの設定を以下を参考に実施します。

https://zenn.dev/tatsuyasusukida/articles/gcp-storage-cors#%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0

`config.json`
jsonにてCORSを設定します。

originに、許可するURLを設定します。

```json
[
    {
      "origin": ["http://localhost:8080"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 300
    }
]
```

#### 適用

Cloud Storageに設定を反映します

```bash
gsutils cors set cors.json gs://<Cloud StorageのURL>
```

:::note 
CORSの反映には少し時間がかかります。
:::

# 完成
これで、Next.jsのクライアントサイドアプリを、Cloud Runにデプロイして運用を始めることができました。

今後、Firebase Authenticationで、特定のGoogle アカウントからのみのアクセスを許可する形で実施できればと思います。