Azure Static Web Appsでの環境変数の読み込みでつまずいたこと

## この記事の目的
Azure Static Web Appsを使用して
何かしらのアプリケーションを開発・デプロイ・運用していきたい人向け

## 結論
Azure Static Web Appsの構成ページに環境変数を書いても反映されない
GitHubActionの設定ファイルに以下のような記述をすると反映される
(画像はAzure Static Web Appsの構成ページのキャプチャ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333416/8452f1af-9f95-4bb6-a3c2-a690ec2f720e.png)

## 環境変数の設定方法

withブロック直後に以下の記述を追加します(※1と書いてあるあたり)
また、環境変数の値はGitHubのシークレットに記述すること
```yml
env:
  環境変数名: 値
```

## GitHub Actionの設定ファイルの記述方法
```yml
jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DUNE_0945C4E00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        ※1 ← ここ
```

最終的にはこうなります
```yml
name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DUNE_0945C4E00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          VITE_OPEN_WEATHER_API_KEY: ${{ secrets.VITE_OPEN_WEATHER_API_KEY }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          環境変数名: ${{ secrets.環境変数名の値 }}
          action: "close"

```

## 補足
Azure Static Web Appsのデプロイ手順についてはこちら

https://learn.microsoft.com/ja-jp/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github

GitHubのシークレット設定についてはこちら

https://docs.github.com/ja/actions/security-guides/encrypted-secrets