我应该如何将故事书与React，Webpack，Docker，lighttpd集成？

Question

我正在开发一个Dockerized反应应用程序。它是使用Webpack 4构建的。作为此项目的CI过程的一部分，该应用程序部署到登台和生产环境，并与lighttpd一起提供。我想做的是有一个故事书页面，可以在登台网站上访问，但不能在prod上访问。

这里有一些问题让我很难找出最好的方法。

• 作为CI过程的一部分，当将提交推送到任何名称为staging/...的git分支时，应用程序将构建并自动部署到登台环境
• 为staging与prod配置应用程序的开关主要位于项目的webpack配置中。
• 该构建过程由dockerfile管理，我可以编辑它。我可以在dockerfile中运行yarn命令（例如构建一个静态故事书包）。但同样的dockerfile用于staging和prod，我宁愿不必创建一个单独的dockerfile。
• 我宁愿不必更改react-router路由，因为路由文件应该（理想情况下）与staging和prod相同。
• 对于用户如何/是否可以在登台环境中输入URL以及以某种方式绕过react-router并显示静态故事书页面，我通常有点模糊。 Web开发的网络方面不是我的强项。我通常只是构建和设计组件。

到目前为止，我的方法是通过在dockerfile中添加RUN yarn storybooks行来简单地构建静态故事书包，但这在几个方面失败了。 1）它适用于分期和生产。 2）它似乎构建了静态故事书包（即dockerfile输出显示故事书通过它自己的内部webpack进程成功构建），但我不确定如何在浏览器中实际查看它。

我希望一切都有道理。我正在寻找的是一般的“最佳实践”式指导。如果我能提供任何其他信息并感谢您的时间，请告诉我。

Answer 1

一个简单的方法是将RUN yarn storybooks作为一个单独的进程，在package.json脚本中使用concurrently命名为prod，并使用dockerfile中的--build-arg运行正确的命令

在你的Dockerfile中

#EXEMPLE docker build --build-arg running_env=preprod
ARG buildenv
RUN yarn run $buildenv

不要忘记暴露正确的端口...我在package.json的脚本看起来像这样："storybook": "start-storybook -c storybook/ --ci -p 3007"

至于路由，您可以添加链接并重定向到故事书页面。我目前也在考虑这个问题。