如何将Storybook与React，Webpack，Docker，lighttpd集成？

Question

我正在开发一个Dockerized react应用。它是用Webpack 4构建的。作为此项目CI流程的一部分，该应用程序将部署到暂存和生产环境中，并与lighttpd一起使用。我想做的是提供一个Storybooks页面，该页面可以在登台站点上访问，但不能在产品上访问。

这里有一些问题使我很难找出最佳方法。

• 作为CI流程的一部分，当将提交推送到名称形式为staging/...的任何git分支时，都会构建应用程序并将其自动部署到登台环境中
• 将应用程序配置为暂存vs. prod的开关主要位于项目的webpack配置中。
• 该构建过程由我可以编辑的dockerfile管理。我可以在该dockerfile中运行yarn命令（例如，构建静态故事书包）。但是，相同的dockerfile用于登台和生产，我希望不必创建单独的dockerfile。
• 我不希望完全更改react-router路由，因为对于登台和生产，路由文件（理想情况下）应该是相同的。
• 对于用户如何/是否可以在过渡环境中以某种方式绕过react-router并显示静态故事书页面的过渡环境中输入URL，我通常有点模糊。 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"

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