AngularJS 的可重用 docker 镜像答案

【问题标题】：Reusable docker image for AngularJSAngularJS 的可重用 docker 镜像
【发布时间】：2023-03-15 21:44:01
【问题描述】：

我们有一个 AngularJS 应用程序。我们为它编写了一个 dockerfile，因此它可以在每个系统上重用。 dockerfile 不是最佳实践，对于某些人来说，它可能是一些奇怪的构建（构建和托管在同一个文件中），但它只是为了在每个开发人员的每台 PC 上本地运行我们的 angularjs 应用程序而创建的。

Dockerfile:
FROM nginx:1.10

... Steps to install nodejs-legacy + npm

RUN npm install -g gulp
RUN npm install
RUN gulp build  

.. steps to move dist folder

我们用docker build -t myapp:latest . 建立我们的形象每个开发者都可以使用docker run -d -p 80:80 myapp:latest运行我们的应用程序

但现在我们正在开发其他后端。所以我们在 DEV 中有一个后端，在 UAT 中有一个后端，...... 所以我们需要在/config/xx.json 中使用不同的 URL

{
  ...
  "service_base": "https://backend.test.xxx/",
  ...
}

我们不想每次都更改那个 URL，重建图像并启动它。我们也不想声明一些可以在那里使用的 URL（dev、uat、prod、..）。我们希望使用环境变量而不是硬编码的 URL 来执行 gulp build 进程。

所以我们可以像这样启动我们的容器：

docker run -d -p 80:80 --env URL=https://mybackendurl.com app:latest

有没有遇到过此类问题的人？因此，我们需要在我们的 json 中创建一个 env 变量并构建它，如果可能的话，稍后再添加 URL。

【问题讨论】：

标签： angularjs json docker environment-variables dockerfile

【解决方案1】：

编辑：更好的选择是使用构建参数

您可以使用 docker build args，而不是在 docker run 命令中传递 URL。在 docker build 期间执行 build 相关命令比 docker run 更好。

在你的 Dockerfile 中，

ARG URL

然后运行

docker build --build-arg URL=<my-url> .

详情请见stackoverflow question

【讨论】：

那么我可能还需要在 .sh 中执行 gulp 构建 + 之后的所有步骤
我认为这不是个好主意。 entrypoint.sh 将在 docker run 命令期间执行，而不是在 docker build 期间执行。如果您想将 gulp 作为 docker build 的一部分运行，您可能需要不同的解决方案。
在这种情况下，它在 docker run 命令期间运行就可以了。否则我将无法为我的容器提供 ENV VAR（并在其上执行 gulp 构建）
@lorenzvth7 查看我的编辑。您可以使用 docker build args。这是一种更清洁的方式
我同意这是一种更清洁的方式，但为此我们仍然必须为每个环境构建一个图像（以一种简单的方式，但仍然是问题）。所以我们可能会选择使用入口点并在容器启动时执行 gulp 构建的方式。这不是正确的方法，但它是让开发人员使用 docker run -env ULR=xxx 启动容器的唯一方法（entrypoint.sh 中的这个 var 并执行 gulp build + 复制和启动）

【解决方案2】：

这是我的“解决方案”。我知道这不是最好的 docker 方法，但对我们的开发人员来说是一个很大的帮助。

我的 dockerfile 看起来像这样：

FROM nginx:1.10

RUN apt-get update && \
 apt-get install -y curl

RUN sed -i "s/httpredir.debian.org/`curl -s -D - http://httpredir.debian.org/demo/debian/ | awk '/^Link:/ { print $2 }' | sed -e 's@<http://\(.*\)/debian/>;@\1@g'`/" /etc/apt/sources.list

RUN \
  apt-get clean && \
  apt-get update && \
  apt-get install -y nodejs-legacy && \
  apt-get install -y npm

WORKDIR /home/app
COPY . /home/app

RUN npm install -g gulp
RUN npm install

COPY start.sh /
CMD ["./start.sh"]

所以在我的 nginx 中安装完 app + npm 之后，我使用 start.sh 脚本启动我的容器。

start.sh的内容：

#!/bin/bash
sed -i 's@my-url@'"$DATA_ACCESS_URL"'@' configs/config.json
gulp build
rm -r /usr/share/nginx/html/
//cp right folders which are created by gulp build to /usr/share/nginx/html
...
//start nginx container
/usr/sbin/nginx -g "daemon off;"

所以构建将在我的容器启动时发生。当然不是最好的方式，但这一切都是为了满足开发人员的需求。有一个简单的本地前端。

sed 命令将对包含以下内容的配置文件执行替换：

{
  "service_base": "my-url",
}

所以 my-url 将替换为我的环境变量的内容，我将在 docker run 命令中定义。

超出我的能力。

docker run -d -p 80:80 -e DATA_ACCESS_URL=https://mybackendurl.com app:latest

而且每个开发者都可以在本地使用前端并连接到自己的后端 URL。

【讨论】：