如何使单个 React Docker 构建/映像在所有环境中运行?

2024-02-03

我正在尝试在单个 Docker 容器中部署一个 React 应用程序,该容器能够在 OpenShift 平台上运行 dev、preprod 和 prod,在该平台上我只能推送标记的 docker 镜像。为了做到这一点我有:

  • 使用 Github 上托管的 create-react-app 生成的 React 应用程序
  • 项目根目录下的 Dockerfile 包含 docker 构建/运行过程
  • 包含持续集成检查和部署方法的 .gitlab-ci.yml 文件
  • 一个可访问的 OpenShift 平台

我可以做什么:

我可以轻松生成一个生产构建“/build”,该构建将添加到 docker 映像构建阶段,并将与生产上下文一起运行,或者我可以在运行开始时构建(但只是编写它感觉很糟糕)。

问题:

此生成的图像无法在所有环境中运行,并且我不想为每个环境进行特定的构建。

我想要的是:

我希望能够生成一个在所有环境中运行的 docker 映像,而无需安装依赖项或仅在需要 RUN 时进行构建。

这是我的 Dockerfile:

FROM nginx:1.15.5-alpine
RUN addgroup --system app \
    && adduser --uid 1001 --system --ingroup app app \
    && rm -rf /etc/nginx/conf.d/default.conf \
    && apk add --update nodejs nodejs-npm \
    && mkdir /apptmp
COPY . /apptmp
RUN chmod 777 /apptmp
COPY config/default.conf /etc/nginx/conf.d/
COPY config/buildWithEnv.sh .

RUN touch /var/run/nginx.pid && \
  chown -R app:app /var/run/nginx.pid && \
  chown -R app:app /var/cache/nginx && \
  chown -R app:app /usr/share/nginx/html
EXPOSE 8080
USER 1001
CMD sh buildWithEnv.sh

这是脚本 buildWithEnv.sh

#!/bin/bash

echo "===> Changin directory: /apptmp ..."
cd /apptmp

echo "===> Installing dependencies: npm install ..."
npm install

echo "===> Building application: npm run build ..."
npm run build

echo "===> Copying to exposed html folder ... "
rm -rf /usr/share/nginx/html/*
cp -r build/* /usr/share/nginx/html/

echo "===> Launching http server ... "
nginx -g 'daemon off;'

在此描述了一种可能的方法博客文章 https://blog.manifold.co/building-a-production-grade-container-for-your-static-javascript-application-b2b2eff83fbd

基本上:您对静态资源中的所有环境特定部分使用占位符。然后你配置nginx'sub_filter https://nginx.org/en/docs/http/ngx_http_sub_module.html在运行时用环境特定值替换这些值。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使单个 React Docker 构建/映像在所有环境中运行? 的相关文章

随机推荐

  • OpenCV Java中使用Mat显示图像

    我正在用Java用OpenCV编写我的第一个程序 我想问一下 是否可以仅使用Mat从文件加载和显示图像 我在这个网站上找到了解决方案http answers opencv org question 31505 how load and di
  • Reflection.Emit:如何可靠地将MethodBuilder转换为RuntimeMethodInfo?

    动态生成类型并调用 TypeBuilder CreateType 后 我想创建一个指向新类型中的方法的委托 但如果我使用类似的代码 loadedType typeBuilder CreateType myDelegate MyDelegat
  • APC - 无法加载动态库

    这是我的 PHP ini 中的内容 extension php apc dll APC apc enabled 1 我在 Windows Server 2003 上运行 Apache 2 0 59 PHP 版本 5 2 3 我已经安装了用v
  • OleDbException。没有为一个或多个必需参数给出值

    string connString Provider Microsoft ACE OLEDB 12 0 Data Source Application StartupPath a xlsx Extended Properties Excel
  • 后续问题:Modelica仿真和方程初始化总时间计算

    我正在写这个相关问题this https stackoverflow com questions 61375492 modelica total time calculation of simulation and equation ini
  • 如何在 python Gekko 中加速具有 1446 个变量的整数非线性规划?

    我正在解决一个整数非线性编程问题与蟒蛇壁虎 其中有 1446 个整数变量 31 个变量线性组合的约束以及 1 个要最大化的非线性目标 该程序需要很长时间 我想知道是否可以speed up 以及如何更好地调整m solver options
  • 在reactjs中convert-csv-to-json返回错误

    使用时https www npmjs com package convert csv to json https www npmjs com package convert csv to json在reactjs中 我收到错误Uncaugh
  • 雪花上带有 RANGE 的滑动窗框的替代品

    我正在将一些 BigQuery 代码迁移到雪花 但在使用带有范围的 Window 函数时遇到了一些麻烦 这是因为 Snowflake 系列不支持滑动窗框 我需要使用 2 PRECEDING AND CURRENT ROW 之间的范围 逻辑
  • 什么是“.dll.a”文件?

    我正在尝试使用 Windows 应用程序中的开源库 我能找到的唯一预构建版本是一个名为 lib dll a 的文件 这是什么格式 我可以将其转换为普通的dll文件吗 命名输出文件libjvm dll a会允许gcc认识到它是一个 图书馆名为
  • 如何将日期时间格式化为国际格式?

    国际字符串表示格式为 YYYY MM DD HH MM SS HHMM 例如2010 06 10 21 21 10 0400 基本上我遇到的问题是弄清楚如何获得与 GMT 的差异 DateTime dt new DateTime 2008
  • django 中过滤图书列表的每位作者的图书数量

    简短的问题 我有两个模型 class Author models Model name models CharField max length 250 class Book models Model title models CharFie
  • 取代 Watin 的测试框架,是否会停止维护?

    我的印象是 Watin 不再被维护 并询问哪个框架最适合在 net 浏览器中测试网站 早在 7 月份 Jeroen 就在 WatiN 邮件列表中发表了以下言论 WatiN 还活着吗 是的 活动对外部是否可见 world 不 这是一件坏事 在
  • .NET 6.0 未显示在 Visual Studio 2022(常规版本)中

    我已经安装了 NET 6 0 SDK和Visual Studio 2022 但是 Visual Studio 2022 不提供选择 NET 6 0 的功能 我知道我可以使用目标框架编辑项目文件 所以请不要这样做 这个问题特别围绕 Visua
  • BCP - 导入到包含 IDENTITY 列的表时,转换规范的字符值无效

    我正在尝试将文件从 UNIX 加载到 SQL Server 当我运行 BCP 时出现以下错误 但当我将数据类型更改为 Char 时 我能够加载相同的文件 使用的命令 bcp SQLAAA APP XXX ACTIVITY V1 in hom
  • 如何在 Openssl 中使用 AES 进行加密

    我正在尝试编写一个示例程序来使用 Openssl 进行 AES 加密 我尝试浏览 Openssl 文档 这很痛苦 但无法弄清楚太多 我浏览了代码并找到了 API 我使用它编写了一个小程序 如下所示 请省略行号 我没有看到任何加密发生 我错过
  • Laravel 6.0 Eloquent - 按日期和状态排序

    尝试先按最新日期订购我的桌子 然后按状态订购 状态可以是 新建 审核中 拒绝 已关闭 状态是数据库中的枚举字段 我尝试了几件事但没有成功 这是我用这段代码得到的最接近的结果 我是 Laravel 新手 所以不知道该怎么做 inquiries
  • 在 iOS 16.2 上水平布局 2 个文本字段时应用程序崩溃

    当水平布局 2 文本字段时 我的应用程序在 iOS Simulator 16 2 上崩溃了 在 iOS Simulator 16 2 上逐步重现 环境 Xcode 14 2 iOS 16 2 模拟器 Step 1 2 text fields
  • 如何限制MySQL距离查询

    我正在尝试执行距离计算以返回特定距离内的地点列表 这是基于使用邮政编码数据库并确定从出发地到每个位置的距离 我想要做的是将结果限制在距原点一定距离内 但我的 MySQL 查询遇到了问题 这是基本查询 SELECT ROUND DEGREES
  • R - 二进制博客数据的聚类分析

    我有一个与下面的示例类似的网络数据 它仅具有用户和二进制值 用于表明该用户是否点击了网站内的特定链接 我想对这些数据进行一些聚类 我的主要目标是根据用户的在线行为找到相似的用户 对此有什么好的聚类算法 我尝试过 k means 它不适用于二
  • 如何使单个 React Docker 构建/映像在所有环境中运行?

    我正在尝试在单个 Docker 容器中部署一个 React 应用程序 该容器能够在 OpenShift 平台上运行 dev preprod 和 prod 在该平台上我只能推送标记的 docker 镜像 为了做到这一点我有 使用 Github