CD
Cloudflare Developers•3d ago
Shufflepuff

Issues with environment variables when deploying a pages project in GitHub/Gitea action

Heya, I'm using a self-hosted Gitea instance as VCS, which has a GitHub Actions compatible worker environment. What I'm trying to deploy to Cloudflare Pages is a Nuxt 3 project. I have some problems figuring out how to deploy the environment variables and secrets. When running pnpm run build && wrangler pages deploy locally in my dev environment it deploys all fine, but not when I do that in my deploy action. The main difference between my local environment and the action runner environment is probably that I don't have a .dev.vars file there and also the .env file would not contain all necessary variables in the action runner. Unfortunately the cloudflare/wrangler-action@v3 does not yet support setting secrets as options for pages projects. This only works for worker projects: https://github.com/cloudflare/wrangler-action/issues/304 I'm wondering what's missing here for my environment variables to be deployed successfully. build.yaml: 
     - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        env:
          NUXT_SESSION_PASSWORD: ${{ secrets.NUXT_SESSION_PASSWORD }}
          NUXT_OAUTH_AUTH0_CLIENT_SECRET: ${{ secrets.NUXT_OAUTH_AUTH0_CLIENT_SECRET }}
          NUXT_DEPLOY_VERSION: ${{ github.sha }}

          NUXT_OAUTH_AUTH0_CLIENT_ID: ${{ vars.NUXT_OAUTH_AUTH0_CLIENT_ID }}
          NUXT_OAUTH_AUTH0_DOMAIN: ${{ vars.NUXT_OAUTH_AUTH0_DOMAIN }}
          NUXT_OAUTH_AUTH0_AUDIENCE: ${{ vars.NUXT_OAUTH_AUTH0_AUDIENCE }}

          NUXT_PUBLIC_HOSTNAME: ${{ if github.ref == 'refs/heads/main' }}${{ vars.NUXT_PUBLIC_HOSTNAME_PRODUCTION }}${{ else }}${{ vars.NUXT_PUBLIC_HOSTNAME_PREVIEW }}${{ endif }}
          NUXT_PUBLIC_BACKEND_BASE_URL: ${{ vars.NUXT_PUBLIC_BACKEND_BASE_URL }}
          NUXT_PUBLIC_I18N_BASE_URL: https://${{ if github.ref == 'refs/heads/main' }}${{ vars.NUXT_PUBLIC_HOSTNAME_PRODUCTION }}${{ else }}${{ vars.NUXT_PUBLIC_HOSTNAME_PREVIEW }}${{ endif }}
          NUXT_PUBLIC_API_BASE_URL: ${{ vars.NUXT_PUBLIC_API_BASE_URL }}
          NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES: ${{ vars.NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES }}
          NUXT_COINGECKO_API_KEY: ${{ secrets.NUXT_COINGECKO_API_KEY }}
          NUXT_COINGECKO_CURRENCY_ID_MAPPING: ${{ vars.NUXT_COINGECKO_CURRENCY_ID_MAPPING }}
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

          vars: |
            NUXT_DEPLOY_VERSION
            NUXT_OAUTH_AUTH0_CLIENT_ID
            NUXT_OAUTH_AUTH0_DOMAIN
            NUXT_OAUTH_AUTH0_AUDIENCE
            NUXT_PUBLIC_HOSTNAME
            NUXT_PUBLIC_BACKEND_BASE_URL
            NUXT_PUBLIC_I18N_BASE_URL
            NUXT_PUBLIC_API_BASE_URL
            NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES
            NUXT_COINGECKO_CURRENCY_ID_MAPPING

          # Commented out because this leads to a Wrangler error.
          # For now we have to set the secrets in the Cloudflare dashboard.
          # GitHub issue: https://github.com/cloudflare/wrangler-action/issues/304
          # secrets: |
          #   NUXT_SESSION_PASSWORD
          #   NUXT_OAUTH_AUTH0_CLIENT_SECRET
          #   NUXT_COINGECKO_API_KEY

          preCommands: |
            bash -c 'for secret in NUXT_SESSION_PASSWORD NUXT_OAUTH_AUTH0_CLIENT_SECRET NUXT_COINGECKO_API_KEY; do echo "${!secret}" | npx wrangler pages secret put "$secret" ${{ github.ref != 'refs/heads/main' && '-e preview' || '' }}; done'

          command: pages deploy dist/ ${{ github.ref != 'refs/heads/main' && format('--branch={0}', github.ref_name) || '' }}
     - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        env:
          NUXT_SESSION_PASSWORD: ${{ secrets.NUXT_SESSION_PASSWORD }}
          NUXT_OAUTH_AUTH0_CLIENT_SECRET: ${{ secrets.NUXT_OAUTH_AUTH0_CLIENT_SECRET }}
          NUXT_DEPLOY_VERSION: ${{ github.sha }}

          NUXT_OAUTH_AUTH0_CLIENT_ID: ${{ vars.NUXT_OAUTH_AUTH0_CLIENT_ID }}
          NUXT_OAUTH_AUTH0_DOMAIN: ${{ vars.NUXT_OAUTH_AUTH0_DOMAIN }}
          NUXT_OAUTH_AUTH0_AUDIENCE: ${{ vars.NUXT_OAUTH_AUTH0_AUDIENCE }}

          NUXT_PUBLIC_HOSTNAME: ${{ if github.ref == 'refs/heads/main' }}${{ vars.NUXT_PUBLIC_HOSTNAME_PRODUCTION }}${{ else }}${{ vars.NUXT_PUBLIC_HOSTNAME_PREVIEW }}${{ endif }}
          NUXT_PUBLIC_BACKEND_BASE_URL: ${{ vars.NUXT_PUBLIC_BACKEND_BASE_URL }}
          NUXT_PUBLIC_I18N_BASE_URL: https://${{ if github.ref == 'refs/heads/main' }}${{ vars.NUXT_PUBLIC_HOSTNAME_PRODUCTION }}${{ else }}${{ vars.NUXT_PUBLIC_HOSTNAME_PREVIEW }}${{ endif }}
          NUXT_PUBLIC_API_BASE_URL: ${{ vars.NUXT_PUBLIC_API_BASE_URL }}
          NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES: ${{ vars.NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES }}
          NUXT_COINGECKO_API_KEY: ${{ secrets.NUXT_COINGECKO_API_KEY }}
          NUXT_COINGECKO_CURRENCY_ID_MAPPING: ${{ vars.NUXT_COINGECKO_CURRENCY_ID_MAPPING }}
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

          vars: |
            NUXT_DEPLOY_VERSION
            NUXT_OAUTH_AUTH0_CLIENT_ID
            NUXT_OAUTH_AUTH0_DOMAIN
            NUXT_OAUTH_AUTH0_AUDIENCE
            NUXT_PUBLIC_HOSTNAME
            NUXT_PUBLIC_BACKEND_BASE_URL
            NUXT_PUBLIC_I18N_BASE_URL
            NUXT_PUBLIC_API_BASE_URL
            NUXT_PUBLIC_GEO_RESTRICTED_COUNTRIES
            NUXT_COINGECKO_CURRENCY_ID_MAPPING

          # Commented out because this leads to a Wrangler error.
          # For now we have to set the secrets in the Cloudflare dashboard.
          # GitHub issue: https://github.com/cloudflare/wrangler-action/issues/304
          # secrets: |
          #   NUXT_SESSION_PASSWORD
          #   NUXT_OAUTH_AUTH0_CLIENT_SECRET
          #   NUXT_COINGECKO_API_KEY

          preCommands: |
            bash -c 'for secret in NUXT_SESSION_PASSWORD NUXT_OAUTH_AUTH0_CLIENT_SECRET NUXT_COINGECKO_API_KEY; do echo "${!secret}" | npx wrangler pages secret put "$secret" ${{ github.ref != 'refs/heads/main' && '-e preview' || '' }}; done'

          command: pages deploy dist/ ${{ github.ref != 'refs/heads/main' && format('--branch={0}', github.ref_name) || '' }}
Thank you in advance for guiding me into any useful direction 🙂
GitHub
uploading environment secrets doesn't work with pages deploy · Issu...
wrangler-action/src/index.ts Line 251 in cd8a317 const args = ["wrangler", "secret:bulk"]; When the repository is pages directory, it needs to run wrangler pages secret bulk Oth...
1 Reply
Shufflepuff
ShufflepuffOP•2d ago
Okay, I figured out what the problem was. All the environment variables need to be part of the build step, not part of the wrangler pages deploy step 🤦 The reason why it was always working when I deployed from my own machine was obviously that I always had the .env file there.

Did you find this page helpful?