我们有一个应用程序，其中index.html是从NGINX提供的，但我们希望所有其他资产都从CDN加载。我们的CI管道将应用程序部署到暂存环境，然后部署到生产环境。每个环境都有自己的CDN（例如，暂存使用staging.examplecdn.com，生产使用examplecdn.com）。
似乎Webpack's publicPath配置选项通常用于定义CDN主机，但它要求我们在构建时知道CDN主机。这就需要我们在部署过程中构建应用程序两次--一次用于暂存，一次用于生产。我们希望避免这种情况，因为（1）我们不想减慢CI管道的速度，（2）确保部署到生产的内容主要是我们在阶段测试的内容似乎更安全。
Webpack documents的下一个选项是设置__webpack_public_path__，但必须在应用程序的入口点内设置。这并不能真正解决我们的问题，因为我们希望index.html也能从CDN加载主应用程序块。换句话说，Webpack注入HTML文件（使用HTMLWebpackPlugin）的script标记需要包含正确的CDN主机。
我们最好的选择是什么？谢谢你的任何建议！
1条答案
按热度按时间46scxncf1#
有意思我理解你关于构建二进制文件的观点，但是从逻辑上讲，在这种架构下，管道的每个阶段都需要不同的index.html文件。如果index.html文件也被部署到CDN中，则会更简单。
在您的设置中，我希望（复杂的）构建过程的结果是一个
index.html.template文件，可能包含诸如$CDN_URL之类的环境变量。然后，对于管道的每个阶段，（简单的）部署脚本可以运行envsubst等工具来提供最终值并生成其index.html文件。如果这不能很好地使用特定的构建工具，例如HTML Webpack插件，那么在postwebpack脚本中做正确的事情相对简单，就像我的this example一样。