完成 github 操作后无法访问 .env 变量

Question

这是我的 github actions yml 文件。完成后，我的 github 存储库的 /build 文件夹将部署在我的 Linux 服务器上。但之后，我的 React 网站无法访问 .env 变量。当我看到 Chrome 浏览器的控制台时，process.env.REACT_APP_API_URL 未定义。怎么了？我该如何解决该错误？

name: Build & Deploy production server

on:
  pull_request:
    branches: 
      - main
    types: [closed]

jobs:
  build-deploy:
    name: Build & Deploy production server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on production server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
            TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"

我的 .env 文件中有超过 10 个变量。

Answer 1

哦，我找到了解决方案，现在效果很好。让我提供我的解决方案。谢谢大家。

name: Build & Deploy on production server

on:
  pull_request:
    branches: 
      - main
    types: [closed]

env:
  REACT_APP_API_URL: ${{ vars.PRO_REACT_APP_API_URL }}
  REACT_APP_PUBLIC_NFT_STORAGE_API_KEY: ${{ vars.REACT_APP_PUBLIC_NFT_STORAGE_API_KEY }}
  REACT_APP_STRIPE_PRO_PRODUCT_ID: ${{ vars.REACT_APP_STRIPE_PRO_PRODUCT_ID }}
  REACT_APP_STRIPE_PRO_TRIAL_ID: ${{ vars.REACT_APP_STRIPE_PRO_TRIAL_ID }}
  REACT_APP_STRIPE_PUBLIC_KEY: ${{ vars.REACT_APP_STRIPE_PUBLIC_KEY }}
  REACT_APP_STRIPE_ESSENTIAL_ID: ${{ vars.REACT_APP_STRIPE_ESSENTIAL_ID }}
  REACT_APP_STRIPE_PRO_LITE_ID: ${{ vars.REACT_APP_STRIPE_PRO_LITE_ID }}
  REACT_APP_STRIPE_PRO_ID: ${{ vars.REACT_APP_STRIPE_PRO_ID }}
  REACT_APP_GIPHY_SDK_API_KEY: ${{ vars.REACT_APP_GIPHY_SDK_API_KEY }}
  REACT_APP_TINYMCE_API_KEY: ${{ vars.REACT_APP_TINYMCE_API_KEY }}
  REACT_APP_ENOKI_API_KEY: ${{ vars.REACT_APP_ENOKI_API_KEY }}
  REACT_APP_GOOGLE_CLIENT_ID: ${{ vars.REACT_APP_GOOGLE_CLIENT_ID }}
  REACT_APP_SUI_NETWORK: ${{ vars.REACT_APP_SUI_NETWORK }}
  REACT_APP_SUI_PACKAGE_ID: ${{ vars.REACT_APP_SUI_PACKAGE_ID }}
  REACT_APP_SUI_SETTING_ID: ${{ vars.REACT_APP_SUI_SETTING_ID }}
  REACT_APP_ADMIN: ${{ vars.REACT_APP_ADMIN }}

jobs:
  build-deploy:
    name: Build & Deploy Gallerai on production server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on production server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
            TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"

我使用了 env 上下文并在“设置/秘密”和“变量”中定义了所有变量。