Cloudflare Developers•2y ago

Setup docs site in Subdirectory of Existing Static Website

I am following an older blog and using a worker to redirect traffic from a subdirectory on one pages site to another pages site. The route I have in place doesn't get triggered. Should I be using functions instead? https://qoyyimafiassalam.medium.com/reverse-proxy-with-cloudflare-workers-setup-blog-in-subdirectory-of-existing-static-website-96e4d186d4f0

Medium

Reverse Proxy with Cloudflare Workers: Setup Blog in Subdirectory o...

Blog is an essential part to increase your site’s traffic, authority, and search-engine-related performance. With blog, you can inform…

21 Replies

AJ DanelzOP•2y ago

i created a feature request: https://community.cloudflare.com/t/deploying-pages-sites-to-subdirectories/496408

Cloudflare Community

Deploying pages sites to subdirectories

Based on the discussion on this thread, I would like to formally request the feature to set up a pages site under a subdirectory or route on an existing zone domain. This would also mean nesting multiple pages sites under one domain could be possible. One real example would be a root marketing site, /blogs rendered by JAMstack framework, /docs b...

Hello, I’m Allie!•2y ago

Why not just merge those multiple projects into a single one?

AJ DanelzOP•2y ago

They are being generated by separate static site generation tools. And are managed in different repositories. And SEO isn't good at different subdomains yet... Unfortunately.

Hello, I’m Allie!•2y ago

You could have a GH action that, on an update to either repo, clones both, builds both, and then uploads a single Pages project

AJ DanelzOP•2y ago

Yes we could but we are already doing that for managing multiple versions of our docs https://github.com/vordimous/zilla-docs/blob/develop/.github/workflows/build-deploy-docs.yml#L53 . It would also mean centralized builds for projects in a different repo which wasn't an ideal plan.

Hello, I’m Allie!•2y ago

You could also utilize an external CI/CD system if you have one, but yeah. The current Pages CI isn’t ideal for this kind of site, and tbh, I’m not 100% sure if/how they plan on improving it

AJ DanelzOP•2y ago

So far I have a worker that can route but it looks like I will need an active zone domain to do it.

Hello, I’m Allie!•2y ago

You could use a function?

AJ DanelzOP•2y ago

I am using github to build and push the static site which does help. the Pages CI would not handle all of these gymnastics! ok is that better than a worker? I was trying to use one or the other but can't tell which is designed for proxy style route handling?

Hello, I’m Allie!•2y ago

Functions are basically just Workers on Pages

AJ DanelzOP•2y ago

my understanding is worker->routing and functions->mock apis

Hello, I’m Allie!•2y ago

They come with some Pages sugar(tied to deployments, built-in router), but they are still Workers under the hood In fact, Pages itself is a Worker too

AJ DanelzOP•2y ago

ok so this is currently working in a Worker and rendering the underlying pages content There will be a pages site at root (/) of my domain so i could just manage this code as a function on that pages site? This root pages site is also where I am managing robots.txt and sitmaps and such

Hello, I’m Allie!•2y ago

Give me a second, and I'll rewrite it. Just wondering though, do you know if the GH Actions cache applies across different repositories?

AJ DanelzOP•2y ago

Unfortunately, it does not. It doesn't even persist across branches!!!! It is a good thought and one I have tried. This whole experience will be a blog post in my future i think 😬

Hello, I’m Allie!•2y ago

Might be slightly hackier, but you could cache the build output in R2? I just remembered, you can also just rename that file to _worker.js, and put it in the output directory of your Pages project.

AJ DanelzOP•2y ago

This is my last resort plan 😬 oh cool Ill try this out and see what i can get to work. Thank you for all of the help!!

AJ DanelzOP•2y ago

@HardAtWork https://aklivity-docs.pages.dev/zilla/next

Zilla Docs

Home

Zilla is open-source software connecting web and mobile applications to event-driven microservices using standard protocols, such as HTTP, Server-Sent Events and Kafka. Zilla is...

AJ DanelzOP•2y ago

nice even the card works I am using this with a local _redirects file as well. Also a the generic worker I added yesterday with a route of docs-portal.pages.dev/* started working today randomly so that is a viable option. However, I like the _worker.js option better since it keeps everything in one place.

AJ DanelzOP•2y ago

the third pages site being served: https://docs-portal.pages.dev/msk-proxies/next/

Amazon MSK Proxies

Home

Help & Support If you have any questions or run into bugs or issues, reach out on the Aklivity Community Slack Workspace (https://join.slack.com/t/aklivitycommunity/shared\_invi...

AJ DanelzOP•2y ago

updated worker code:

const PATHS = {
  zilla: "zilla",
  mskProxies: "msk-proxies",
};

const SITES = {
  [PATHS.zilla]: "zilla-docs.pages.dev",
  [PATHS.mskProxies]: "msk-proxies-docs.pages.dev",
};

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const origin = url.hostname;

    // Check if incoming hostname is a key in the SITES object
    if (url.pathname.startsWith(`/${PATHS.zilla}/`) || url.pathname === `/${PATHS.zilla}`) {
      console.log(`found: /${PATHS.zilla}/`);
      const target = SITES[PATHS.zilla];
      url.hostname = target;
    }
    
    if (url.pathname.startsWith(`/${PATHS.mskProxies}/`) || url.pathname === `/${PATHS.mskProxies}`) {
      console.log(`found: /${PATHS.mskProxies}/`);
      const target = SITES[PATHS.mskProxies];
      url.hostname = target;
    }
    
    if (url.hostname != origin) {
      console.log("proxying to new pages site: ", url);
      return fetch(url.toString(), request);
    }
    console.log("No site found for: ", url);

    return env.ASSETS.fetch(request);
  },
};

const PATHS = {
  zilla: "zilla",
  mskProxies: "msk-proxies",
};

const SITES = {
  [PATHS.zilla]: "zilla-docs.pages.dev",
  [PATHS.mskProxies]: "msk-proxies-docs.pages.dev",
};

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const origin = url.hostname;

    // Check if incoming hostname is a key in the SITES object
    if (url.pathname.startsWith(`/${PATHS.zilla}/`) || url.pathname === `/${PATHS.zilla}`) {
      console.log(`found: /${PATHS.zilla}/`);
      const target = SITES[PATHS.zilla];
      url.hostname = target;
    }
    
    if (url.pathname.startsWith(`/${PATHS.mskProxies}/`) || url.pathname === `/${PATHS.mskProxies}`) {
      console.log(`found: /${PATHS.mskProxies}/`);
      const target = SITES[PATHS.mskProxies];
      url.hostname = target;
    }
    
    if (url.hostname != origin) {
      console.log("proxying to new pages site: ", url);
      return fetch(url.toString(), request);
    }
    console.log("No site found for: ", url);

    return env.ASSETS.fetch(request);
  },
};

Gaming

Programming

Setup docs site in Subdirectory of Existing Static Website