Using Ghost(Pro) with a subdirectory - NuxtJS

Developer help
1

Hi y’all,

I’m seeking guidance on how to effectively implement this rewrite using Nuxt. Any assistance would be greatly appreciated. Thank you in advance.

And

  • How was Ghost installed and configured? Hosted
  • What Node version, database, OS & browser are you using? Node 18.x
  • What errors or information do you see in the console? Failed to resolve DNS path for this host
  • What steps could someone else take to reproduce the issue you’re having?

We’re currently using Nuxt ^2.6.x, and I recently came across this helpful article that outlines the process of rewrite routes from https://flecto.io/blog to https://blog.flecto.io

We’re hosted on Vercel ( Only website, not the Ghost blog )

In our nuxt.config.js file, I’ve incorporated a ProxyMiddleware:

import { createProxyMiddleware } from 'http-proxy-middleware'

const rewriteRules = [
    createProxyMiddleware('/blog', {
        target: 'https://blog.flecto.io',
        changeOrigin: true,
        pathRewrite: {
            '^/blog': '/'
        }
    })
]

export default async () => {
    // ...
    serverMiddleware: rewriteRules,
    // ...
}

While the page functions as intended, I’ve encountered an issue with images and some CSS not loading properly. They attempt to download from localhost:3000/content/images… or localhost:3000/public/…

Furthermore, I’ve observed that when I include X-Forwarded-Host, the functionality breaks:

const rewriteRules = [
    createProxyMiddleware('/blog', {
        target: 'https://blog.flecto.io',
        changeOrigin: true,
        headers: {
            'X-Forwarded-Host': BLOG_URL,
        },
        pathRewrite: {
            '^/blog': '/'
        }
    })
]

Resulting in:

Domain error

Failed to resolve DNS path for this host

2

To make sure I understand:

Is the example code you are providing to be run on Vercel, where it will redirect content there to Ghost?

3

What url does Ghost ‘think’ it’s at? You’ll need Ghost to believe it’s URL is flecto.io/blog (even if it only gets those requests by reverse proxy), if you want it to reliably create links to itself that work.

1 Like
4

Not redirect, but rewrite. Both URL will keep working, but the /blog will rewrite the route.

Example: next.config.js Options: rewrites | Next.js

5

Yeah, as i said, this is working, but i think i need the X-Forwarded-Host to make ghost “think” that it is ghost URL. So i got Failed to resolve DNS path for this host.

6

Do rewrites issue HTTP redirects or only solve issues when the destination is also served by the same Next.js app?

7

The error happen when i added: X-Forwarded-Host in headers.

To be more clear, i added this configuration in our Next App Staging Enviroment:

trailingSlash: true,
  async headers() {
    return [
      {
        source: '/blog',
        headers: [
          {
            key: 'x-forwarded-host',
            value: 'https://market.staging.flecto.io/blog',
          },
        ],
      },
      {
        source: '/blog/:path*',
        headers: [
          {
            key: 'x-forwarded-host',
            value: 'https://market.staging.flecto.io/blog',
          },
        ],
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/blog',
        destination: 'https://blog.flecto.io',
      },
      {
        source: '/blog/:path*/',
        destination: 'https://blog.flecto.io/:path*/',
      },
    ]
  },

When i access the following link: Domain error

I got: Failed to resolve DNS path for this host

Fixing this enviroment, i can try the same approach in Nuxt App.

8

I have updated the next.config.js with

const ghostRules = [
  // https://ghost.org/help/run-ghost-from-a-subdirectory
  // Have an X-Forwarded-Host header that matches the custom domain in Ghost(Pro) > Domains
  // x-forwarded-host must match your base custom domain set within Ghost Admin - if you're configuring example.com/blog/ then this would be example.com
  {
    key: 'x-forwarded-host',
    value: 'https://market.staging.flecto.io',
  },
  // Include the X-Forwarded-Proto header set to https not http.
  {
    key: 'x-forwarded-proto',
    value: 'https',
  },
  // Provide a certificate & serve HTTPS traffic.
  {
    key: 'x-forwarded-port',
    value: '443',
  },
  // Include the X-Forwarded-For header, populated with the remote IP of the original request.
  {
    key: 'x-forwarded-for',
    value: 'https://market.staging.flecto.io/blog',
  },
]

...
trailingSlash: true,
  async headers() {
    return [
      {
        source: '/blog',
        headers: ghostRules,
      },
      {
        source: '/blog/:path*',
        headers: ghostRules,
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/blog',
        destination: 'https://blog.flecto.io',
      },
      {
        source: '/blog/:path*/',
        destination: 'https://blog.flecto.io/:path*/',
      },
    ]
  },
....

But the error with DNS keep the same, do i need to add https://market.staging.flecto.io/blog in the Ghost panel ?

9

We have Ghost Pro working on a sub-directory on Vercel but so far I believe caching isn’t working Whop | Blog

10

That’s what i want to do. could you provide an example of your config ?

I receive an email saying that i need to upgrade do enterprise or pay a addon to do that :(

11

it is possible we may be paying for enterprise, our bill is pretty high! sorry I don’t have access to the config