从 Azure 静态 Web 应用程序访问 VITE 环境变量

Question

我正在 Azure Web 应用程序（暂存部分）上部署 React/Vite 应用程序，但发现自己无法访问我的 .env 变量。

我以相同的方式部署了 Node/Express 服务器，当我在 Azure 设置中输入环境变量时，它们会被识别并受到影响。

对于Vite来说，情况有所不同，因为它们是构建时变量而不是运行时变量。因此，我尝试将它们设置在我的构建管道（Azure 创建的 yml）中，并使用 GitHub 变量来保护它们。

这就是我的 URL 变量在我的前端中定义的方式

config-global.js

:

export const HOST_API = import.meta.env.VITE_HOST_API;

现在在我的 .env 文件中，我定义：

VITE_HOST_API=https://staging.api.my-website.com

这是我的 YAML 文件，其中构建了管道：

name: Build and deploy Node.js app to Azure Web App - my-website-staging-front

on:
  push:
    branches:
      - staging
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip -r release.zip dist

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-website-staging-front'
          slot-name: 'Production'
          publish-profile: ${{ secrets.SECRET_STUFF }}
          package: dist
        env:
          VITE_HOST_API: $BASE_URL_STAGING

最后一行是我在 GitHub 变量中添加的内容，即

BASE_URL_STAGING=https://staging.api.my-website.com

。

最后在我设置的 Azure 环境变量中：

VITE_HOST_API=https://staging.api.my-website.com

到目前为止，我的所有请求都对每个请求使用 URL

https://staging.my-website.com

，这意味着定义用于每个查询的基本 URL 的 HOST_API 未定义，因此查询使用它们所在网站的基本 URL，在此案例

https://staging.my-website.com

。

我尝试使用

process-envify

，但没有成功。

Answer 1

所以问题是我在构建中何时、何地以及如何创建环境变量。这是我的 YAML 文件的新版本：

name: Build and deploy Node.js app to Azure Web App - my-website-staging-front

on:
  push:
    branches:
      - staging
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Set environment variables
        run: echo "VITE_HOST_API=${{ secrets.BASE_URL_STAGING }}" >> $GITHUB_ENV 
        // Append the environment variable to the special GitHub environment file

      - name: npm install, build, and test
        env:
          VITE_HOST_API: ${{ secrets.BASE_URL_STAGING }} //
        // Set the environment variable for this step

        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip -r release.zip dist

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-website-staging-front'
          slot-name: 'Production'
          publish-profile: ${{ secrets.SECRET_STUFF }}
          package: dist