Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add assetsBase config to support serving assets from CDN #2467

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

nilennoct
Copy link

Add the publicPath site config to support serving assets from CDN.

For example, we can deploy the pages to https://www.example.com/ and the assets to https://cdn.example.com/assets/ with the following config:

export default {
  base: '/',
  publicPath: 'https://cdn.example.com/assets/',
}

When running vitepress preview, use an additional middleware to redirect the non-default asset requests to the files under assets directory.

May resolve #736 and #2144

@brc-dd brc-dd added enhancement New feature or request build Related to the build system labels Jun 6, 2023
@brc-dd
Copy link
Member

brc-dd commented Jun 6, 2023

One question regarding the middleware part, do people have use cases where they will be using an internal publicPath?

PS: Not sure about the naming too, publicPath might sound confusing in some instances. Like if we stick with Vite's terminology here https://vitejs.dev/guide/build.html#advanced-base-options then we are adding this to hashed assets not public / generated html files. Might be better to rename this to assetsPath or assetsBase? 🤔

@nilennoct
Copy link
Author

Sure, such use case is rare. But in mine, we deploy the assets to CDN in production environment while together in test environment. For example:

export default {
  base: '/app-name/',
  publicPath:
    process.env.DEPLOY_ENV === 'production'
      ? 'https://cdn.example.com/assets/app-name/'
      : '/assets/app-name/'
}

It is necessary to add the middleware if we want to locally preview the test environment build.

As to the naming of publicPath, in fact I used assetsBase at the beginning and renamed later. Vite provides the experimental.renderBuiltUrl option to support advanced assets base, which is similar to publicPath in webpack.

I will rename it to assetsBase and point out the relationship with publicPath for better DX.

@nilennoct
Copy link
Author

By the way, the new middleware is only used when the assetsBase is configured and different from the default.

@brc-dd brc-dd changed the title feat: add publicPath config to support serving assets from CDN feat: add assetsBase config to support serving assets from CDN Jun 7, 2023
@nilennoct nilennoct force-pushed the feat/public-path branch 2 times, most recently from 3fcd8f5 to 832b3aa Compare June 13, 2023 12:01
@nilennoct
Copy link
Author

Rebased.

@niuweili
Copy link

I had the same problem and look forward to its release

@brc-dd brc-dd self-assigned this Jul 30, 2023
@brc-dd brc-dd force-pushed the main branch 2 times, most recently from 7ad4a4e to f0d3082 Compare August 3, 2023 10:20
@brc-dd brc-dd marked this pull request as draft August 26, 2023 15:01
@treardon17
Copy link

I'm also interested in this and look forward to its release.

@Red-Asuka
Copy link

Looking forward to its release.

@MyPrototypeWhat
Copy link

Looking forward to it very much

@nilennoct
Copy link
Author

nilennoct commented Nov 28, 2023

Rebased on main branch and all commits squashed.

And fix formatting.

@virskor
Copy link

virskor commented Apr 19, 2024

什么时候才会合并

@github-actions github-actions bot removed the stale label Apr 28, 2024
@IceEnd
Copy link

IceEnd commented May 31, 2024

Looking forward to its release.

@IceEnd
Copy link

IceEnd commented Jun 3, 2024

You can first use overrides to experience this feature:
image

@Amorites
Copy link

Thank you all for hard work and contributions! I wanted to check in on this PR as this feature is crucial for us to use the tool in our production environment.

Is there anything I can do to help move this forward? Any feedback or additional changes needed? I’m more than happy to assist in any way possible.

@lisonge

This comment was marked as duplicate.

@lisonge
Copy link

lisonge commented Jul 14, 2024

An example of a configuration code that changes the VitePress resource URLs to absolute URLs

I use this configuration code to speed up the access to static resources. You can refer to it

https://github.com/gkd-kit/docs/blob/main/docs/.vitepress/plugins/mirror.ts

image


Additionally, if you do not want to modify the VitePress configuration code, another solution is to use a service worker to implement resource redirection.

@github-actions github-actions bot added the stale label Sep 1, 2024
@skyfore
Copy link

skyfore commented Sep 12, 2024

How is the progress now?
It's very important for me!

@dreamerblue
Copy link

Any progress?

@zh-lx
Copy link
Contributor

zh-lx commented Nov 5, 2024

I think this is an important feature. Please pay more attention to this PR! 🙏🏻

@nilennoct
Copy link
Author

Rebased on main branch and add docs for other languages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build Related to the build system enhancement New feature or request stale
Projects
None yet
Development

Successfully merging this pull request may close these issues.

serve static with CDN