Skip to content

Commit

Permalink
Update to reflect fix to Nitro CF Pages pages
Browse files Browse the repository at this point in the history
[X] Updated cloudflare pages deployment guide to reflect nitrojs/nitro#965

[X] Updated Github Actions workflow to use `NITRO_PRESET=cloudflare_pages`
  • Loading branch information
DataDrivenMD committed Feb 21, 2023
1 parent c8fa2dc commit d8556c1
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 26 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/cloudflare_pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ jobs:
NUXT_PUBLIC_DEFAULT_SERVER: ${{ vars.NUXT_PUBLIC_DEFAULT_SERVER }}
NUXT_STORAGE_DRIVER: kv-binding
VITE_DEV_PWA: true
NITRO_PRESET: cloudflare
NITRO_PRESET: cloudflare_pages

- name: Publish
uses: cloudflare/pages-action@1
Expand Down
35 changes: 10 additions & 25 deletions docs/content/2.deployment/30.cloudflare_pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,13 @@ NODE_ENV=production \
NUXT_DEPLOY_URL=https://REPLACE_WITH_YOUR_ELK_DOMAIN \
NUXT_STORAGE_DRIVER=kv-binding \
VITE_DEV_PWA=true \
NITRO_PRESET=cloudflare npx nuxi build
NITRO_PRESET=cloudflare_pages npx nuxi build
```

<details>
<summary><b>👀 Known Gotcha</b></summary>

> If you're familiar with the Nitro build/prerendering system, you may have noticed that we're using the `cloudflare` preset instead of the `cloudflare_pages` preset- that's not a typo. In our testing, the `cloudflare_pages` preset generated an incomplete routing tree that throws errors and sends billable usage through the roof. The underlying cause of the problem is well-known, well-documented, and well-beyond the scope of the Elk project. If you're curious, see: [cloudflare/workers-sdk #1859](https://github.com/cloudflare/workers-sdk/issues/1859), [unjs/nitro #196](https://github.com/unjs/nitro/issues/196), and [unjs/nitro #497](https://github.com/unjs/nitro/issues/497). If you follow this guide, your deployment will use the source code in the `/functions` directory, which was written specifically to workaround these issues.
> There's a fix for [unjs/nitro issue #196](https://github.com/unjs/nitro/issues/196), [unjs/nitro issue #497](https://github.com/unjs/nitro/issues/497), and [unjs/nitro issue #787](https://github.com/unjs/nitro/issues/787) working its way through the review process. If you find that your deployment is unable to handle `POST` requests, you may need to wait until that fix is officially released or patch your nitro dependency to include [unjs/nitro PR #968](https://github.com/unjs/nitro/pull/968) and (optionally) [unjs/nitro PR #965](https://github.com/unjs/nitro/pull/965).
</details>
Upon the completion of a successful build, you will find two (2) additional folders in your project directory: `.nuxt` and `.output`. For the purposes of Cloudflare Pages, we only care about the `.output/public` folder.
Expand Down Expand Up @@ -162,38 +162,23 @@ If you want to use a custom domain, go to "Custom domains" within your Cloudflar
<details>
<summary>Is it possible to set up a CI/CD pipeline using something other than Github Actions?</summary>

> Yes, it is possible to set up a CI/CD pipeline using CircleCI or Travis CI by following the [instructions published by Cloudflare](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/). If you've implemented a CI/CD pipeline for Elk using another platform, we'd welcome your contributions to this guide.
> Yes, it is possible to set up a CI/CD pipeline using CircleCI or Travis CI by following the [instructions published by Cloudflare](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/). If you've implemented a CI/CD pipeline for Elk using another platform, we welcome your contributions to this guide.
</details>
<details>
<summary>Are you intentionally avoiding the Cloudflare Pages GitHub integration?</summary>
<summary>Did you try deploying Elk using the built-in Cloudflare Pages Github integration?</summary>

> **Short answer:** Yes.
> **Short answer:** Yes, but we would not recommend deploying Elk via that option.
>
> **Long answer:** Yes, because Cloudflare Pages uses outdated build images that [lack support for Node.js >= v17.x](https://developers.cloudflare.com/pages/platform/build-configuration/). After spending several hours on Cloudflare Community and Cloudflare Discord, it's clear that there are no workarounds. Cloudflare representatives on Discord point to a forthcoming update to their build image library, but offer no specific date of release. Cloudflare Pages build images also lack built-in support for `pnpm`, but there is a [known workaround](https://community.cloudflare.com/t/add-pnpm-to-pre-installed-cloudflare-pages-tools/288514/3). Even after Cloudflare (eventually) updates its build images, there's no guarantee that they'll ship with `pnpm` as an option.
</details>
<details>
<summary>Will this guide also work for deployment to Cloudflare Workers as a Workers Site?</summary>

> **Short answer:** No.
>
> **Long answer:** No, because Cloudflare Workers is a serverless platform built using Web APIs that offers *very limited* and *extremely outdated* compatibility for Node.js.
> **Long answer:** Yes, but Cloudflare Pages uses outdated build images that [lack support for Node.js >= v17.x](https://developers.cloudflare.com/pages/platform/build-configuration/). After spending several hours on Cloudflare Community and Cloudflare Discord, it's clear that there are no workarounds to this issue. Cloudflare representatives on Discord point to a forthcoming update to their build image library, but offer no specific date of release. Separately, Cloudflare Pages lacks native support for `pnpm`; we [found a workaround](https://community.cloudflare.com/t/add-pnpm-to-pre-installed-cloudflare-pages-tools/288514/3) for this issue but that wasn't enough to overcome the build-time errors stemming from deprecated libraries and missing peer dependencies.
>
> **Longer answer:** No, for all the reasons stated above plus, after successfully shoe-horning a deployment to Cloudflare Workers Sites we discovered that we ended up with a costlier version of what we've laid out in this guide. We were able to realize cost savings using Cloudflare Pages by separating routes serving static assets (no charge) from dynamic routes (each invocation counts against the _Free Tier_ allowance).
> If you've successfully deployed Elk using Cloudflare's Github integration, we welcome your contributions to this guide.
</details>
<details>
<summary>Why did you write your own Cloudflare Pages Functions?</summary>

> The build system (Nitro) is unable to generate a complete, Pages-compatible `/functions` routing tree- even when invoking the `NITRO_PRESET=cloudflare_pages` flag at build time. Instead, Nitro generates a single catch-all function that is only able to handle `GET` requests, and returns HTTP 405 errors for `POST` requests. Not only does this routing behavior make Elk unusable, it also results in billable events for static assets (`GET` requests for static assets would otherwise be free under Cloudflare's current billing scheme).
</details>
<details>
<summary>Are there gotchas to customizing the /functions directory?</summary>

> Manually writing Cloudflare Pages Functions was the only way to make this deployment option available. It was a time-consuming process because the debugging toolkit available for Cloudflare Functions is limited to a handler invocation logstream. For these same reasons, it is highly unlikely that the Elk project will be able to help troubleshoot issues arising from customizations to the provided CF Pages Functions. As such, we strongly recommend against making changes to the `/functions` folder unless you are very familiar with the Cloudflare Functions product, the Cloudflare Workers platform, and Web API standards.
<summary>Will this guide also work for deployment directly to Cloudflare Workers (i.e. as a Workers Site)?</summary>

> No. While we were able to shoe-horn an Elk deployment to Workers Sites, we would not recommend it based on our testing. Moreover, [Cloudflare's official documentation](https://developers.cloudflare.com/workers/platform/sites/) suggests that the company is phasing out support for Workers Sites in favor of Cloudflare Pages.
</details>
<br>[back to top](#getting-started)
Expand Down Expand Up @@ -221,7 +206,7 @@ If you want to use a custom domain, go to "Custom domains" within your Cloudflar
NUXT_DEPLOY_URL=https://REPLACE_WITH_YOUR_ELK_DOMAIN \
NUXT_STORAGE_DRIVER=kv-binding \
VITE_DEV_PWA=true \
NITRO_PRESET=cloudflare npx nuxi build
NITRO_PRESET=cloudflare_pages npx nuxi build

echo "Publishing ..."
# Uncomment the next line the *first time* you deploy Elk, and then delete or re-comment it out
Expand Down

0 comments on commit d8556c1

Please sign in to comment.