将Docker变量传递到React index.html文件

Question

我已经很熟悉将Docker环境变量传递到React应用程序的方法，即在变量docker-compose.yml中添加“ REACT_APP _” 字符串。

但是，我想在index.html入口点做类似的事情来加载实际的React应用程序。

上下文：假设您要为Google API传递Google API密钥，并且希望通过docker-compose而不是通过编辑index.html在开发和生产Docker容器之间进行交换。

有可能吗？

Answer 1

我上个月写了一篇有关类似主题的博客文章-让我知道是否有帮助：https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/

TL; DR：创建一个shell脚本，该脚本在您的Web服务器容器中自动生成一个静态JS配置文件。方法如下：

config.js

#!/bin/bash
echo "window.appConfig = { API_URL: '${API_URL}'} " >> config.js
cat config.js
apachectl -D FOREGROUND

Dockerfile

COPY --from=build-env /src/config.sh .
RUN ["chmod", "+x", "./config.sh"]
CMD ["/usr/local/apache2/htdocs/config.sh"]

docker-compose.yaml

...
environment:
  - API_URL=http://localhost:8082
...

index.html

<!-- config.js has to come before your bundle -->
<script src="config.js"></script>  
<script src="dist/bundle.js"></script>