
## 目次
1. はじめに
2. Next.jsの環境変数管理
   2.1. dotenvファイルとNEXT_PUBLIC_接頭辞
   2.2. クライアントサイドでの環境変数の取り扱い
3. Firebase App Hostingの環境変数設定
   3.1. apphosting.yamlの設定
   3.2. Secret Managerの活用
4. クライアントサイドで環境変数を利用する方法
   4.1. Next.jsアプリでの変数取得
   4.2. セキュリティ対策
5. まとめ

---

## 1. はじめに
Next.jsをFirebase App Hostingにデプロイする際、環境変数を適切に管理することは重要です。特にクライアントサイドで環境変数を利用する場合、セキュリティリスクを考慮しながら適切な設定を行う必要があります。本記事では、`apphosting.yaml` で定義した環境変数をNext.jsのクライアントサイドで取得する方法について解説します。

## 2. Next.jsの環境変数管理

### 2.1. dotenvファイルとNEXT_PUBLIC_接頭辞
Next.jsでは、環境変数を `.env.local` ファイルで管理できます。ただし、クライアントサイドで使用する変数は `NEXT_PUBLIC_` を接頭辞として設定する必要があります。

#### `.env.local` の例:
![img](/mosaic-code.jpg)

これにより、クライアントサイドのコード内で `process.env.NEXT_PUBLIC_API_URL` を利用できます。

### 2.2. クライアントサイドでの環境変数の取り扱い
`NEXT_PUBLIC_` を付与した環境変数は、Next.jsのビルド時に公開されるため、クライアントサイドで利用できます。

#### クライアントサイドでの利用例:
![img](/mosaic-code.jpg)

## 3. Firebase App Hostingの環境変数設定

### 3.1. apphosting.yamlの設定
Firebase App Hostingでは `apphosting.yaml` を使って環境変数を定義できます。

#### `apphosting.yaml` の例:
![img](/mosaic-code.jpg)

### 3.2. Secret Managerの活用
APIキーなどの機密情報を含む環境変数は、Google Cloud Secret Managerを使用して管理するのが推奨されます。

#### Secret Managerを利用した `apphosting.yaml` の例:
![img](/mosaic-code.jpg)

## 4. クライアントサイドで環境変数を利用する方法

### 4.1. Next.jsアプリでの変数取得
`apphosting.yaml` に定義した環境変数は `process.env` で取得できます。

#### クライアントサイドでの環境変数の取得:
![img](/mosaic-code.jpg)

### 4.2. セキュリティ対策
クライアントサイドで環境変数を利用する際は、以下の点に注意しましょう。

- `NEXT_PUBLIC_` プレフィックスを付けた変数は誰でも閲覧可能。
- 機密情報は `NEXT_PUBLIC_` を付けず、サーバーサイドで管理。
- Secret Managerを活用して、安全に機密情報を管理。

## 5. まとめ
Next.jsアプリで `apphosting.yaml` を利用して環境変数を管理する場合、適切なプレフィックス (`NEXT_PUBLIC_`) を付けることで、クライアントサイドでも利用できます。ただし、セキュリティリスクを考慮し、機密情報はSecret Managerなどを利用して管理することが推奨されます。

[cv:issue_marketplace_engineer]

# apphosting.yamlで設定した環境変数をクライアントサイドで取得する方法

## 目次
1. はじめに
2. Next.jsの環境変数管理
   2.1. .envファイルの概要
   2.2. クライアントサイドで使用する環境変数
3. Firebase App Hostingの設定
   3.1. firebase.jsonとapphosting.yamlの設定
   3.2. Google CloudのSecret Managerの利用
4. 環境変数のクライアントサイドでの利用方法
   4.1. Next.jsでの環境変数の取得
   4.2. セキュリティの考慮点
5. まとめ

## 1. はじめに
Next.jsをFirebase App Hostingにデプロイする際、セキュアに環境変数を管理することは重要です。特にクライアントサイドで環境変数を使用するシナリオでは、セキュリティリスクが高まるため、適切な設定が必要です。本記事では、`apphosting.yaml`で設定した環境変数をどのようにクライアントサイドで取得するか、その具体的な手法を解説します。

## 2. Next.jsの環境変数管理

### 2.1. .envファイルの概要
Next.jsアプリケーションで環境変数を管理する際、.envファイルが一般的に使用されます。このファイルはプロジェクトのルートディレクトリに配置し、アプリケーション全体で使用可能な環境変数を定義するために用います。

![img](/mosaic-code.jpg)

### 2.2. クライアントサイドで使用する環境変数
クライアントサイドで環境変数を使用する場合、環境変数名のプレフィックスとして`NEXT_PUBLIC_`を付ける必要があります。これにより、Next.jsはこれらの変数をビルド時に公開し、クライアントサイドでの使用を可能にします。

![img](/mosaic-code.jpg)

## 3. Firebase App Hostingの設定

### 3.1. firebase.jsonとapphosting.yamlの設定
Firebase App Hostingを利用するためには、プロジェクトのルートディレクトリに`firebase.json`と`apphosting.yaml`を設定します。`apphosting.yaml`で環境変数のリファレンスを設定します。

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

### 3.2. Google CloudのSecret Managerの利用
セキュリティ上の理由から、APIキーや機密性の高い情報はGoogle CloudのSecret Managerに保存する必要があります。Secret Managerに保存することで、これらの情報をコードから分離し、必要な場所で参照できます。

## 4. 環境変数のクライアントサイドでの利用方法

### 4.1. Next.jsでの環境変数の取得
クライアントサイドで利用するには、Next.jsの`process.env`を用います。ただし、クライアントサイドで環境変数を使用するには、その変数がビルド時に公開されている必要があります。

![img](/mosaic-code.jpg)

### 4.2. セキュリティの考慮点
クライアントサイドで使用する環境変数は、容易にユーザーや外部から閲覧可能です。そのため、クライアントサイドには絶対に秘密情報を含まないようにします。シークレット情報はサーバーサイドで管理し、必要に応じてバックエンドAPIを通じて安全にアクセスする設計が推奨されます。

## 5. まとめ
Next.jsをFirebase App Hostingにデプロイする際に、環境変数の管理は非常に重要です。クライアントサイドで利用するには、`NEXT_PUBLIC_`プレフィックスを使用し、公開可能な情報のみを配置するよう注意が必要です。セキュアでスケーラブルな環境変数管理を実現することで、安全性の高いアプリケーション開発が可能となります。

[cv:issue_marketplace_engineer]


## 目次
1. はじめに
2. Next.jsの環境変数管理
   2.1. dotenvファイルとNEXT_PUBLIC_接頭辞
   2.2. クライアントサイドでの環境変数の取り扱い
3. Firebase App Hostingの環境変数設定
   3.1. apphosting.yamlの設定
   3.2. Secret Managerの活用
4. クライアントサイドで環境変数を利用する方法
   4.1. Next.jsアプリでの変数取得
   4.2. セキュリティ対策
5. まとめ

---

## 1. はじめに
Next.jsをFirebase App Hostingにデプロイする際、環境変数を適切に管理することは重要です。特にクライアントサイドで環境変数を利用する場合、セキュリティリスクを考慮しながら適切な設定を行う必要があります。本記事では、`apphosting.yaml` で定義した環境変数をNext.jsのクライアントサイドで取得する方法について解説します。

## 2. Next.jsの環境変数管理

### 2.1. dotenvファイルとNEXT_PUBLIC_接頭辞
Next.jsでは、環境変数を `.env.local` ファイルで管理できます。ただし、クライアントサイドで使用する変数は `NEXT_PUBLIC_` を接頭辞として設定する必要があります。

#### `.env.local` の例:
```plaintext
NEXT_PUBLIC_API_URL="https://api.example.com"
```

これにより、クライアントサイドのコード内で `process.env.NEXT_PUBLIC_API_URL` を利用できます。

### 2.2. クライアントサイドでの環境変数の取り扱い
`NEXT_PUBLIC_` を付与した環境変数は、Next.jsのビルド時に公開されるため、クライアントサイドで利用できます。

#### クライアントサイドでの利用例:
```javascript
export default function Home() {
  return (
    <div>
      <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  );
}
```

## 3. Firebase App Hostingの環境変数設定

### 3.1. apphosting.yamlの設定
Firebase App Hostingでは `apphosting.yaml` を使って環境変数を定義できます。

#### `apphosting.yaml` の例:
```yaml
env:
  - variable: NEXT_PUBLIC_STORAGE_BUCKET
    value: mybucket.firebasestorage.app
    availability:
      - BUILD
      - RUNTIME
```

### 3.2. Secret Managerの活用
APIキーなどの機密情報を含む環境変数は、Google Cloud Secret Managerを使用して管理するのが推奨されます。

#### Secret Managerを利用した `apphosting.yaml` の例:
```yaml
env:
  - variable: STORAGE_BUCKET
    secret: projects/your-project-id/secrets/STORAGE_BUCKET/versions/1
```

## 4. クライアントサイドで環境変数を利用する方法

### 4.1. Next.jsアプリでの変数取得
`apphosting.yaml` に定義した環境変数は `process.env` で取得できます。

#### クライアントサイドでの環境変数の取得:
```javascript
const bucket = process.env.NEXT_PUBLIC_STORAGE_BUCKET;
console.log("Storage Bucket:", bucket);
```

### 4.2. セキュリティ対策
クライアントサイドで環境変数を利用する際は、以下の点に注意しましょう。

- `NEXT_PUBLIC_` プレフィックスを付けた変数は誰でも閲覧可能。
- 機密情報は `NEXT_PUBLIC_` を付けず、サーバーサイドで管理。
- Secret Managerを活用して、安全に機密情報を管理。

## 5. まとめ
Next.jsアプリで `apphosting.yaml` を利用して環境変数を管理する場合、適切なプレフィックス (`NEXT_PUBLIC_`) を付けることで、クライアントサイドでも利用できます。ただし、セキュリティリスクを考慮し、機密情報はSecret Managerなどを利用して管理することが推奨されます。



# apphosting.yamlで設定した環境変数をクライアントサイドで取得する方法

## 目次
1. はじめに
2. Next.jsの環境変数管理
   2.1. .envファイルの概要
   2.2. クライアントサイドで使用する環境変数
3. Firebase App Hostingの設定
   3.1. firebase.jsonとapphosting.yamlの設定
   3.2. Google CloudのSecret Managerの利用
4. 環境変数のクライアントサイドでの利用方法
   4.1. Next.jsでの環境変数の取得
   4.2. セキュリティの考慮点
5. まとめ

## 1. はじめに
Next.jsをFirebase App Hostingにデプロイする際、セキュアに環境変数を管理することは重要です。特にクライアントサイドで環境変数を使用するシナリオでは、セキュリティリスクが高まるため、適切な設定が必要です。本記事では、`apphosting.yaml`で設定した環境変数をどのようにクライアントサイドで取得するか、その具体的な手法を解説します。

## 2. Next.jsの環境変数管理

### 2.1. .envファイルの概要
Next.jsアプリケーションで環境変数を管理する際、.envファイルが一般的に使用されます。このファイルはプロジェクトのルートディレクトリに配置し、アプリケーション全体で使用可能な環境変数を定義するために用います。

```plaintext
API_KEY="your_api_key_here"
```

### 2.2. クライアントサイドで使用する環境変数
クライアントサイドで環境変数を使用する場合、環境変数名のプレフィックスとして`NEXT_PUBLIC_`を付ける必要があります。これにより、Next.jsはこれらの変数をビルド時に公開し、クライアントサイドでの使用を可能にします。

```plaintext
NEXT_PUBLIC_API_KEY="your_public_api_key"
```

## 3. Firebase App Hostingの設定

### 3.1. firebase.jsonとapphosting.yamlの設定
Firebase App Hostingを利用するためには、プロジェクトのルートディレクトリに`firebase.json`と`apphosting.yaml`を設定します。`apphosting.yaml`で環境変数のリファレンスを設定します。

```json
// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

```yaml
# apphosting.yaml
env:
  - variable: API_KEY
    secret: projects/000000000000/secrets/API_KEY/versions/1
```

### 3.2. Google CloudのSecret Managerの利用
セキュリティ上の理由から、APIキーや機密性の高い情報はGoogle CloudのSecret Managerに保存する必要があります。Secret Managerに保存することで、これらの情報をコードから分離し、必要な場所で参照できます。

## 4. 環境変数のクライアントサイドでの利用方法

### 4.1. Next.jsでの環境変数の取得
クライアントサイドで利用するには、Next.jsの`process.env`を用います。ただし、クライアントサイドで環境変数を使用するには、その変数がビルド時に公開されている必要があります。

```javascript
const apiKey = process.env.NEXT_PUBLIC_API_KEY;
console.log("API Key:", apiKey);
```

### 4.2. セキュリティの考慮点
クライアントサイドで使用する環境変数は、容易にユーザーや外部から閲覧可能です。そのため、クライアントサイドには絶対に秘密情報を含まないようにします。シークレット情報はサーバーサイドで管理し、必要に応じてバックエンドAPIを通じて安全にアクセスする設計が推奨されます。

## 5. まとめ
Next.jsをFirebase App Hostingにデプロイする際に、環境変数の管理は非常に重要です。クライアントサイドで利用するには、`NEXT_PUBLIC_`プレフィックスを使用し、公開可能な情報のみを配置するよう注意が必要です。セキュアでスケーラブルな環境変数管理を実現することで、安全性の高いアプリケーション開発が可能となります。



目次

続きを読むには単価診断を受けてください（30秒）