英文:
How to configure Webpack to load assets other than index.html from a CDN host determined at runtime?
问题
我们有一个应用程序，其中index.html是由NGINX提供的，但我们希望所有其他资源都从CDN加载。我们的CI流水线将我们的应用程序部署到一个暂存环境，然后再部署到生产环境。每个环境都有自己的CDN（例如，暂存环境使用staging.examplecdn.com，生产环境使用examplecdn.com）。
似乎Webpack的publicPath配置选项通常用于定义CDN主机，但它要求我们在构建时知道CDN主机。这将要求我们在部署过程中构建我们的应用程序两次 - 一次用于暂存，一次用于生产。我们想避免这样做，因为（1）我们不想减慢我们的CI流水线，（2）似乎更安全确保我们部署到生产环境的内容与我们在暂存环境中测试的内容大致相同。
Webpack文档中提到的下一个选项是设置__webpack_public_path__，但这必须在应用程序的入口点内设置。这并没有真正解决我们的问题，因为我们希望我们的index.html也从CDN加载主应用程序块。换句话说，Webpack在HTML文件中注入的script标签（使用HTMLWebpackPlugin）需要包含正确的CDN主机。
在这里，我们的最佳选项是什么？感谢任何建议！
英文:
We have an application where index.html is served from NGINX but we want all other assets to be loaded from a CDN. Our CI pipeline deploys our application to a staging environment and later to a production environment. Each environment has its own CDN (e.g., staging uses staging.examplecdn.com and production uses examplecdn.com).
It seems Webpack's publicPath configuration option would typically be used to define the CDN host, but it requires us to know the CDN host at build time. This would require us to build our application two times in our deployment process--once for staging and once for production. We want to avoid this, because (1) we don't want to slow down our CI pipeline and (2) it seems safer to make sure what we're deploying to production is largely what we tested in staging.
The next option Webpack documents is to set __webpack_public_path__, but that has to be set within the application's entry point. This doesn't really solve our problem, because we want our index.html to load the main application chunk from the CDN as well. In other words, the script tag that Webpack injects into the HTML file (using HTMLWebpackPlugin) needs to incorporate the proper CDN host.
What's our best option here? Thanks for any advice!
答案1
得分: 1
I get your point about building binaries once, but logically you need different index.html files per stage of the pipeline with this architecture. It would be simpler if the index.html file was also deployed to the CDN.
In your setup I would aim for the results of the (complex) build process to be an index.html.template file, perhaps containing environment variables such as $CDN_URL. Then, for each stage of the pipeline, a (simple) deployment script could run a tool such as envsubst to supply final values and produce its index.html file.
If this doesn't play nicely with particular build tools, eg the HTML Webpack plugin, then it is relatively simple to do the right thing in a post webpack script, as in this example of mine.
英文:
Interesting. I get your point about building binaries once, but logically you need different index.html files per stage of the pipeline with this architecture. It would be simpler if the index.html file was also deployed to the CDN.
In your setup I would aim for the results of the (complex) build process to be an index.html.template file, perhaps containing environment variables such as $CDN_URL. Then, for each stage of the pipeline, a (simple) deployment script could run a tool such as envsubst to supply final values and produce its index.html file.
If this doesn't play nicely with particular build tools, eg the HTML Webpack plugin, then it is relatively simple to do the right thing in a post webpack script, as in this example of mine.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论