Failed to load resource when I implemented one sveltekit project in Google Cloud Run with custom domain

Question

Describe the bug: I use Google Cloud Run to run my svelte kit app with the node adapter. It seems to work with the default version but with my custom domain it can not load the resources in the [slug].svelte routes.

Default version:

https://youernes-22w6ta6irq-ew.a.run.app/yhoyquetoca
https://youernes-22w6ta6irq-ew.a.run.app/planes/UEVytEBG6rfcLrdqflD8TsjmCRn2_1611080173358

Custom domain version:

https://youernes.com/yhoyquetoca
https://youernes.com/planes/UEVytEBG6rfcLrdqflD8TsjmCRn2_1602059251917

In the custom domain version I can not access to information though It can fetch data from script module.

I use the node adapter and this is my following configuration:

const sveltePreprocess = require("svelte-preprocess");
    const node = require('@sveltejs/adapter-node');
    const pkg = require('./package.json');

    /** @type {import('@sveltejs/kit').Config} */
    module.exports = {
        preprocess: [
            sveltePreprocess({
                defaults: {
                    style: "postcss",
                },
                postcss: true
            }),
        ],
        kit: {
            hostHeader: 'X-Forwarded-Host',
            // By default, `npm run build` will create a standard Node app.
            // You can create optimized builds for different platforms by
            // specifying a different adapter
            adapter: node(),

            // hydrate the <div id="svelte"> element in src/app.html
            target: '#svelte',

            vite: {
                ssr: {
                    noExternal: Object.keys(pkg.dependencies || {})
                }
            }
        }
    };

1st I run npm run build

and 2nd I use docker

FROM node:12.17

WORKDIR /youernes

ENV PORT=8080

ENV HOST=0.0.0.0

COPY. .

CMD [ "node", "build/" ]

When I access to planes folder I get the following errors:

GET https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js net::ERR_ABORTED 404
GET https://youernes.com/_app/assets/pages/planes/[slug].svelte-377bb070.css net::ERR_ABORTED 404

Failed to fetch dynamically imported module: https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js

TypeError: Failed to fetch dynamically imported module: https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js

How to reproduce the problem in order to get the solution: You have to implement with node adapter one svelte kit project with [slug].svelte routes and then implemented it using google cloud run with custom domain. Can someone help me or even tried this?

Thank you very much to all.

Answer 1

Finally I solved the issue through mapping custom domains on google cloud run

Answer 2

Describe the bug: I use Google Cloud Run to run my svelte kit app with the node adapter. It seems to work with the default version but with my custom domain it can not load the resources in the [slug].svelte routes.

Default version:

https://youernes-22w6ta6irq-ew.a.run.app/yhoyquetoca
https://youernes-22w6ta6irq-ew.a.run.app/planes/UEVytEBG6rfcLrdqflD8TsjmCRn2_1611080173358

Custom domain version:

https://youernes.com/yhoyquetoca
https://youernes.com/planes/UEVytEBG6rfcLrdqflD8TsjmCRn2_1602059251917

In the custom domain version I can not access to information though It can fetch data from script module.

I use the node adapter and this is my following configuration:

const sveltePreprocess = require("svelte-preprocess");
    const node = require('@sveltejs/adapter-node');
    const pkg = require('./package.json');

    /** @type {import('@sveltejs/kit').Config} */
    module.exports = {
        preprocess: [
            sveltePreprocess({
                defaults: {
                    style: "postcss",
                },
                postcss: true
            }),
        ],
        kit: {
            hostHeader: 'X-Forwarded-Host',
            // By default, `npm run build` will create a standard Node app.
            // You can create optimized builds for different platforms by
            // specifying a different adapter
            adapter: node(),

            // hydrate the <div id="svelte"> element in src/app.html
            target: '#svelte',

            vite: {
                ssr: {
                    noExternal: Object.keys(pkg.dependencies || {})
                }
            }
        }
    };

1st I run npm run build

and 2nd I use docker

FROM node:12.17

WORKDIR /youernes

ENV PORT=8080

ENV HOST=0.0.0.0

COPY. .

CMD [ "node", "build/" ]

When I access to planes folder I get the following errors:

GET https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js net::ERR_ABORTED 404
GET https://youernes.com/_app/assets/pages/planes/[slug].svelte-377bb070.css net::ERR_ABORTED 404

Failed to fetch dynamically imported module: https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js

TypeError: Failed to fetch dynamically imported module: https://youernes.com/_app/pages/planes/[slug].svelte-098e0796.js

How to reproduce the problem in order to get the solution: You have to implement with node adapter one svelte kit project with [slug].svelte routes and then implemented it using google cloud run with custom domain. Can someone help me or even tried this?

Thank you very much to all.