Cloudflare Developers•9mo ago

Deploying Pages with D1 Binding via Wrangler.toml and GH Action

I've got a SvelteKit application deployed to Pages+Functions using the @sveltekit/adapter-cloudflare adapter and the cloudflare/pages-action GitHub Actions action. I've confirmed that invoking API endpoints runs a Function as it should, both locally (via npm run dev) and on prod. I'm now trying to add a D1 database. I've added the binding to my wrangler.toml file, and it works great locally (which is awesome 🤩), but even after deploying the schema to the remote DB via the CLI, the D1 binding in the Function does not work on my branch deploy. I suspect this is because the pages-action doesn't pick up the wrangler.toml, so I tried to switch to the wrangler-action, but I haven't figured out how to get it to deploy both the pages site and the D1 binding. The docs suggest configuring the binding via the dashboard but I'd like to keep it in my wrangler.toml so I have one source of truth, if possible. The diff of the PR where I've made these changes is here: https://github.com/tylermercer/log-thing/pull/4/files/155fe21a260815b0607712ab0b51d0c627982a6d My deployment: https://433388eb.log-thing.pages.dev/ The D1 test route showing the failed binding (which causes a 500): https://433388eb.log-thing.pages.dev/app/guestbook Deployment ID: 433388eb-4769-41d9-9dbd-56583c4a2014 Account ID: 191456bbc4d963669ab6dd59c256d84a

GitHub

Add cloudflare D1 and test "guestbook" page by tylermercer · Pull R...

5 Replies

CaptainNemoOP•9mo ago

Interesting: it works when I do npx wrangler pages deploy manually. I don't even need to specify the output dir. Presumably it's reading that from the wrangler.toml? But why does that same command not work on GH Actions? Any help on that would be great 🤔

_Pear•9mo ago

I personally skip the action and just run wrangler pages deploy in my GH action. The supplied action is a wrapper around wrangler anyway and it seems unreliable from browsing this server for a while. I can't tell if it's reading my wrangler.toml but worst case you can set the bindings in the dashboard.

CaptainNemoOP•9mo ago

Ok I've wondered if I should just do that. How did you authenticate with Cloudflare from within your GH Action? I was under the impression that that was what the supplied action took care of (since it takes an API key). Thanks for your help!

_Pear•9mo ago

I set the following as action secrets:

          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

I don't think it picks up the wrangler.toml using wrangler pages deploy tho, as it does not support the config option. Going to ask about this in the discussion channel if you want to follow along.

CaptainNemoOP•9mo ago

Thanks! I'll try that. You put those as environment variables in in env:? FWIW wrangler pages deploy has been picking up the TOML for me. (That's what I've been using in lieu of a GH Action---just deploying manually.) Got it working! 🚀 Thank you so much for your help! For completeness, here's how I used wrangler pages deploy instead of the wrangler action:

      - name: Deploy to Cloudflare Pages
        id: deploy
        run: npx wrangler pages deploy --branch=${{ steps.extract_vars.outputs.branch }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

      - name: Deploy to Cloudflare Pages
        id: deploy
        run: npx wrangler pages deploy --branch=${{ steps.extract_vars.outputs.branch }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

And here's the whole pipeline where it's used, in case this is helpful to anyone who finds this in the future:

name: Build Log Thing
on:
  push:
    branches:
      - main
  workflow_dispatch:
  pull_request:
    types:
      - opened
      - synchronize
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write

    steps:
      - name: Checkout
        id: checkout_repo
        uses: actions/checkout@v4
        with:
          token: ${{ secrets.GH_PAT }}

      - name: Extract vars
        id: extract_vars
        run: |
          echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
          echo "datetime=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
          branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
          branch_trunc=${branch:0:28}
          echo "branch=${branch}" >> $GITHUB_OUTPUT
          echo "branch_trunc=${branch_trunc}" >> $GITHUB_OUTPUT

      - name: Build
        id: build_site
        run: |
          npm install
          npm run build
      
      - name: Deploy
        id: deploy
        run: npx wrangler pages deploy --branch=${{ steps.extract_vars.outputs.branch }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

      - name: Preview URL comment
        if: github.event_name == 'pull_request'
        uses: thollander/actions-comment-pull-request@v2
        with:
          comment_tag: deploy_preview
          mode: recreate
          message: |
            ## Deployed to Cloudflare Pages! :rocket:

            | Name                    | Result |
            | ----------------------- | - |
            | **Preview URL**:        | https://${{ steps.extract_vars.outputs.branch }}.log-thing.pages.dev |
            | **Last commit:**        | `${{ steps.extract_vars.outputs.sha_short }}` |
            | **Deployed at**:        | `${{ steps.extract_vars.outputs.datetime }}` |

name: Build Log Thing
on:
  push:
    branches:
      - main
  workflow_dispatch:
  pull_request:
    types:
      - opened
      - synchronize
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write

    steps:
      - name: Checkout
        id: checkout_repo
        uses: actions/checkout@v4
        with:
          token: ${{ secrets.GH_PAT }}

      - name: Extract vars
        id: extract_vars
        run: |
          echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
          echo "datetime=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
          branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
          branch_trunc=${branch:0:28}
          echo "branch=${branch}" >> $GITHUB_OUTPUT
          echo "branch_trunc=${branch_trunc}" >> $GITHUB_OUTPUT

      - name: Build
        id: build_site
        run: |
          npm install
          npm run build
      
      - name: Deploy
        id: deploy
        run: npx wrangler pages deploy --branch=${{ steps.extract_vars.outputs.branch }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

      - name: Preview URL comment
        if: github.event_name == 'pull_request'
        uses: thollander/actions-comment-pull-request@v2
        with:
          comment_tag: deploy_preview
          mode: recreate
          message: |
            ## Deployed to Cloudflare Pages! :rocket:

            | Name                    | Result |
            | ----------------------- | - |
            | **Preview URL**:        | https://${{ steps.extract_vars.outputs.branch }}.log-thing.pages.dev |
            | **Last commit:**        | `${{ steps.extract_vars.outputs.sha_short }}` |
            | **Deployed at**:        | `${{ steps.extract_vars.outputs.datetime }}` |

Gaming

Programming

Deploying Pages with D1 Binding via Wrangler.toml and GH Action

Did you find this page helpful?