thipperz Posts - Answer Overflow

thipperz

•Created by thipperz on 7/25/2024 in #general-help

How to cache request coming from bots / crawlers?

I tried setting a Page Rule Cache Everything + Edge TTL 1 Month for a specific endpoint. In the logs, I can see bots calling that endpoint but apparently their visit do not trigger Cloudflare to cache the result (a dynamic image). Visiting the image from a browser would then result in a MISS and subsequent requests would be a HIT.

2 replies

CDCloudflare Developers

•Created by thipperz on 7/22/2024 in #pages-help

next/og + Image Transformations - Unsupported image type: unknown

export const runtime = 'edge'
import { ImageResponse } from 'next/og'
import { Inter } from 'next/font/google'

// Image metadata
export const alt = 'Open Graph Image'
export const size = {
    width: 1200,
    height: 630,
}


export const contentType = 'image/png'

const InterRegular = Inter({
    subsets: ['latin'],
    variable: '--font-sans',
})

// Image generation
export default async function Image({ params }: { params: { id: number } }) {
    try {
        // some code..

        return new ImageResponse(
            (
                ...
                        <img
                            src={`https://<MYDOMAIN>/cdn-cgi/image/format=jpeg/${originalWebpImageUrl}`}
                            tw="w-[48%] border border-gray-500 rounded-md"
                            alt="Imagem destaque"
                        />
                ...
            )
        }

export const runtime = 'edge'
import { ImageResponse } from 'next/og'
import { Inter } from 'next/font/google'

// Image metadata
export const alt = 'Open Graph Image'
export const size = {
    width: 1200,
    height: 630,
}


export const contentType = 'image/png'

const InterRegular = Inter({
    subsets: ['latin'],
    variable: '--font-sans',
})

// Image generation
export default async function Image({ params }: { params: { id: number } }) {
    try {
        // some code..

        return new ImageResponse(
            (
                ...
                        <img
                            src={`https://<MYDOMAIN>/cdn-cgi/image/format=jpeg/${originalWebpImageUrl}`}
                            tw="w-[48%] border border-gray-500 rounded-md"
                            alt="Imagem destaque"
                        />
                ...
            )
        }

Above code works fine in local development, but in production it fails with the message

GET https://<domain>/opengraph-image?f9b52bffe5901d64 - Exception Thrown @ 7/22/2024, 4:43:04 PM
  (error) error code: 1016
  (error) error code: 1016
  (error) error code: 1016
  (error) error code: 1016
  (error) Can't load image https://<domain>/cdn-cgi/image/format=jpeg/https://images.<domain>/my-image.webp: Unsupported image type: unknown
✘ [ERROR]   Error: Image size cannot be determined. Please provide the width and height of the image.

GET https://<domain>/opengraph-image?f9b52bffe5901d64 - Exception Thrown @ 7/22/2024, 4:43:04 PM
  (error) error code: 1016
  (error) error code: 1016
  (error) error code: 1016
  (error) error code: 1016
  (error) Can't load image https://<domain>/cdn-cgi/image/format=jpeg/https://images.<domain>/my-image.webp: Unsupported image type: unknown
✘ [ERROR]   Error: Image size cannot be determined. Please provide the width and height of the image.

1 replies

CDCloudflare Developers

•Created by thipperz on 4/25/2024 in #pages-help

Fetch works locally, goes 522 when deployed

I would reaally appreciate some help when it comes to fetching an external API from inside of a Cloudflare Worker. My API is running with Express at the url https:/[redacted].hstgr.cloud:3000/ and when I do fetch that locally, I get a proper response which is a JSON with a "message: Request Accepted!" - you see that in the browser. So this works everywhere except inside a Worker: const response = await fetch( 'https://[redacted].hstgr.cloud:3000/' ) Inside a worker, it goes 522 and I can't get any info on it. I tried messing up with nginx configs, disabled ufw, disabled Hostinger's Firewall, and also whitelisted Cloudflare IPs in my VPS machine. Anything else I should look for?

5 replies

CDCloudflare Developers

•Created by thipperz on 4/14/2024 in #workers-help

Fetch requests in a Worker that is invoked from Service Binding always return 522

Curl requests to the target api are working fine. I tried moving the fetching code from that Worker to an API route in Next-on-Pages. When I do that, it works perfectly. Not sure what else can I try. My situation seems close to this issue: https://github.com/cloudflare/workers-sdk/issues/2589

1 replies

CDCloudflare Developers

•Created by thipperz on 4/10/2024 in #pages-help

What is the correct way of declaring a Service Binding (RPC)?

I've seen both services = [ { binding = "ADMIN", service = "todo-app" } ] and [[services]] binding = "ADMIN" service = "todo-app" entrypoint = "AdminEntrypoint" Also sometimes it includes environment='production' and sometimes not. Is there even an environment=local ? I'm working with next-on-pages, R2 storage, D1, KV and Vectorize. D1 and KV work fine locally, the others don't?

1 replies

CDCloudflare Developers

•Created by thipperz on 4/10/2024 in #pages-help

Interacting with R2 Buckets During Local Development

I'm working on a project that involves uploading images to R2 buckets and then dynamically generating pages that display these images. However, I'm encountering challenges with simulating this interaction in my local development environment. I've attempted using wrangler pages dev combined with RPC service bindings to fetch a worker locally, but it seems to fall short unless I initiate a wrangler dev session specifically for the worker that handles the export. This method, however, hits another roadblock since the worker requires wrangler dev --remote to interact with R2 or Vectorize. Unfortunately, initiating wrangler dev with the --remote flag makes it invisible to wrangler pages dev. To sum up, I'm looking for a way to effectively test the upload and page generation process locally without deploying every change. The lack of a "next dev --remote" or "wrangler pages dev --remote" seems to complicate the process. Does anyone have experience or advice on how to tackle this?

2 replies

CDCloudflare Developers

•Created by thipperz on 4/6/2024 in #pages-help

Can't access RPC Service Bindings in local (next dev)

i'm trying to access a Service binding (RPC) in my Next-on-Pages. My wrangler.toml looks like this:

# Generated by Wrangler
name = "tx"
pages_build_output_dir = ".vercel/output/static"
compatibility_date = "2024-04-06"
compatibility_flags = [ "nodejs_compat"]

[[services]]
binding = "VECTORIZE_WORKER"
service = "vectorize-worker"
environment = "production"

[env.production]
compatibility_date = "2024-04-06"
compatibility_flags = [ "nodejs_compat" ]

  [[env.production.services]]
  binding = "VECTORIZE_WORKER"
  service = "vectorize-worker"
  environment = "production"

# Generated by Wrangler
name = "tx"
pages_build_output_dir = ".vercel/output/static"
compatibility_date = "2024-04-06"
compatibility_flags = [ "nodejs_compat"]

[[services]]
binding = "VECTORIZE_WORKER"
service = "vectorize-worker"
environment = "production"

[env.production]
compatibility_date = "2024-04-06"
compatibility_flags = [ "nodejs_compat" ]

  [[env.production.services]]
  binding = "VECTORIZE_WORKER"
  service = "vectorize-worker"
  environment = "production"

When I call it like this, running next dev:

           const { env } = getRequestContext()
            const VECTORIZE_WORKER = env.VECTORIZE_WORKER
            if (!VECTORIZE_WORKER)
                throw new Error('UNDEFINED BINDING: VECTORIZE_WORKER')
            const response = await VECTORIZE_WORKER.ImageSearch(imagename)

           const { env } = getRequestContext()
            const VECTORIZE_WORKER = env.VECTORIZE_WORKER
            if (!VECTORIZE_WORKER)
                throw new Error('UNDEFINED BINDING: VECTORIZE_WORKER')
            const response = await VECTORIZE_WORKER.ImageSearch(imagename)

It does not throw this error, indicating that the binding was found, but I get the following warning regarding RPC:

WARNING: Tried to access method or property 'ImageSearch' on a Service Binding or Durable Object stub. Are you trying to use RPC? If so, please enable the 'rpc' compat flag or update your compat date to 2024-04-03 or later

WARNING: Tried to access method or property 'ImageSearch' on a Service Binding or Durable Object stub. Are you trying to use RPC? If so, please enable the 'rpc' compat flag or update your compat date to 2024-04-03 or later

The "Image Search" is defined in my worker like this:

export default class extends WorkerEntrypoint {
    async ImageSearch(imagename: string) {
        return new Response('Got results', { status: 200 })
    }
}

export default class extends WorkerEntrypoint {
    async ImageSearch(imagename: string) {
        return new Response('Got results', { status: 200 })
    }
}

It does work when running wrangler pages dev .vercel/output/static --service VECTORIZE_WORKER=vectorize-worker --compatibility-flag=nodejs_compat" alongside the service worker running via wrangler dev It does not work (and throws the error above) when running next dev Is it possible to make rpc service bindings work via next dev? Also since my vectorize worker do access Vectorize, it will only work via wrangler dev --remote which is then further incompatible with this local testing?

4 replies

Gaming

Programming