- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我有运行两个单独的 docker 容器的 angular cli 项目和节点项目。
这是我的 Dockerfile
### STAGE 1: Build ###
# We label our stage as 'builder'
FROM node:carbon as builder
COPY package.json package-lock.json ./
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app
WORKDIR /ng-app
COPY . .
## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --aot --build-optimizer --environment=test
### STAGE 2: Setup ###
FROM nginx:1.13.3-alpine
## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
节点容器 URL 存储在 environment.ts(角度)中。
环境.ts 文件
declare var require: any;
const pack = require('../../package.json');
export const environment = {
production: false,
API_URL: 'http://localhost:3000/',
socket: 'http://localhost:3200',
appName: pack.name,
version: pack.version,
envi: 'test'
};
节点 API_URL 是在 Angular 项目的构建期间获取的。但我想在 docker run 命令期间修改环境变量。 (即)我想在 docker 容器运行时动态地将环境变量值添加到 environment.ts 文件中
例如,docker run -e API_URL=192.168.10.147:3000 -p 4200:80 --name=angular angular_image
我怎样才能做到这一点?
最佳答案
我将尝试总结我与一位开发 Angular 应用程序的同事制定的解决方案,以准确解决这个问题。为了更好地说明解决方案,我首先描述了我们的 Angular 应用程序的 dev 文件夹树(文件夹名称在方括号中),其中的每个相关元素如下所述:
+---[my angular cli project]
¦ ¦
¦ +---[src]
¦ ¦ +---[assets]
¦ ¦ ¦ +---[json]
¦ ¦ ¦ ¦ +---runtime.json
¦ ¦ ¦ ¦
¦ ¦ ¦ ..other angular application assets files ...
¦ ¦
¦ ¦ ...other angular application source files...
¦ ¦
¦ +---[dist]
¦ ¦ ...built angular files
¦ ¦
¦ +---[docker]
¦ ¦ +---[nginx]
¦ ¦ ¦ +---default.conf
¦ ¦ +---startup.sh
¦ ¦
¦ +---Dockerfile
¦
... other angluar cli project files in my project ...
在您的 Angular cli 项目中,需要在运行时用环境变量的值替换的配置数据保存在应用程序 Assets 中的静态 json 文件中。例如,我们选择将其定位在 assets/json/runtime.json
。在此文件中,要替换的值的处理方式类似于以下示例中的 ${API_URL}
变量:
./src/assets/json/runtime.json:
{
"PARAM_API_URL": "${API_URL}"
...other parameters...
}
在运行时,角度代码将从该文件中读取 PARAM_API_URL
的值,其内容将在运行时使用环境值进行修改,如下所述。从技术上讲,json 是由一个 Angular 服务通过 http 读取的,也就是说,Web 应用程序对上面的静态 Assets json 文件的 URL 执行 HTTP GET 操作。
@Injectable()
export class MyComponent {
constructor( private http: Http ) {
}
...
someMethod() {
this.http.get( 'assets/json/runtime.json' ).map( result => result.PARAM_API_URL ).subscribe(
api_url => {
... do something with the api_url
eg. invoke another http get on it ...
}
);
}
}
要创建一个在运行时启动时执行环境替换的 docker 容器,将在其中放入一个脚本 startup.sh
(参见下面的 Dockerfile
),该脚本在容器中startup 在启动 nginx 网络服务器之前对上述文件执行 evnsubst:
./docker/startup.sh:
echo "Starting application..."
echo "API_URL = ${API_URL}"
envsubst < "/usr/share/nginx/html/assets/json/runtime.json" > "/usr/share/nginx/html/assets/json/runtime.json"
nginx -g 'daemon off;'
如下图,Dockerfile执行如下操作:将编译好的angular文件复制到./dist
)中,然后将startup.sh
脚本定义为CMD起点(host /dist
文件夹在 /usr/share/nginx/html
中被复制,这就是为什么这是用于定位的路径上面的 envsubst 调用中提到的 runtime.json 文件)。请注意,与您的 Dockerfile 不同,这里我们不包括 Angular cli 源的构建阶段,相反,ng build
应该由开发人员在容器镜像创建之前执行 -并且这种构建的结果预计会在 ./dist
文件夹中找到。不过,对于手头问题的解决方案而言,这是一个很小的区别。
./Dockerfile:
FROM nginx:1.13.3-alpine
## Copy our default nginx config
COPY docker/nginx/default.conf /etc/nginx/conf.d/
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## copy over the artifacts in dist folder to default nginx public folder
COPY dist /usr/share/nginx/html
## startup.sh script is launched at container run
ADD docker/startup.sh /startup.sh
CMD /startup.sh
现在,当您构建容器时,您可以运行它:
docker run -e "API_URL=<your api url>" <your image name>
在启动 nginx 之前,给定的值将在 runtime.json 中被替换。
为了完整起见,虽然与具体问题无关,但我还包含 docker/nginx/default.conf
文件来配置 nginx 实例
./docker/nginx/default.conf:
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
关于docker - 如何使用 Docker 将环境变量动态分配给 Angular cli 项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49650115/
我在全局范围内安装了最新的 angular-cli,并且我的项目正在成功构建。 在阅读另一个问题的建议解决方案时,(https://github.com/angular/angular-cli/iss
根据official docs关于 .angular-cli.json 配置文件,仅支持 main、test、polyfills 作为 webpack 入口文件。 如何通过定义 .angular-cl
我想在s3存储桶中搜索文件名abc.zip,并且有将近60个存储桶,每个存储桶都有2到3个级别的子目录或文件夹。我尝试使用AWS CLI命令执行搜索,以下是我尝试过的命令,但即使文件存在于存储桶中,也
我正在尝试在 C++/CLI 中查找赋值运算符和复制构造函数的示例。我在 Google 上花了很多时间,但令人惊讶的是我找不到一个看起来很常见的例子。 最佳答案 .NET 语义没有复制构造函数或赋值运
我需要获取另一个窗口的句柄。 这是它的代码: private: System::Void btn_find_Click(System::Object^ sender, System::EventAr
有点好奇实际上有多少人使用 C++/CLI?那么有多少人在使用它呢?人们是否只在托管环境下寻找程序员的特定工作?围绕 c++/cli 的社区有多大?从我目前看到的情况来看,有不少语法变化,作为 C++
我正在阅读一些 C++/CLI Material ,并且遇到了文字字段的概念: literal int inchesPerFoot = 12; 这是否比 const 更可取,因为 const FIEL
通过 npm install -g angular-cli@latest 安装 Angular CLI (angular-cli@1.0.0-beta.16) 失败,出现以下错误 npm-debug.
我正在尝试在我的 Ember CLI 应用程序中配置适配器以根据环境使用不同的主机。在开发中,我希望它是默认的当前主机(让我通过 --proxy 选项自定义它,但在生产中我知道它将是 http://s
我最近开始使用 Angular/CLI 工具,我在执行文件时遇到了一个问题,那就是我运行时 ng serve 那么这个命令可以帮助我们在源文件中进行任何更改时自动重新加载站点,但在我的系统中它没有发生
是否有推荐的方法通过 c++ cli 包装 native c++ 库? 最佳答案 不确定是否一种尺寸适合所有人,但是,是的,这很大程度上是一个机械过程。您的 ref 类包装器应该声明一个私有(priv
我有一个关于为要在 C# 中使用的 native C++ 类创建 C++ CLI 包装器的问题。 这是一个示例代码: #include "stdafx.h" #pragma once using na
下面的代码打印 0 和 3。这是代码生成错误吗?我在 .NET 4.0 下使用 Visual Studio 2012 Update 3 RC 运行它 #include "stdafx.h" using
它是如何工作的?它是否有不同的部分 - 有些方法是托管的,有些是非托管的,它是否将每个方法都转换为托管的,试图保持所有东西都处于托管状态并在必须时进行互操作调用? 最佳答案 三种不同的compiler
如果我没记错的话,函数必须是 CLR 世界中类的成员,而全局函数在 C++/CLI 中是可能的。这是否意味着这些全局函数是某种隐藏的“全局”类的一部分?如果是这样,出于反射目的,人们将如何获取其类型?
如何在 Angular 中重建我的项目。我首先使用 ng build 构建它,但无法再次执行该命令,因为它不会让我更改文件夹。 我收到此错误消息: EPERM:不允许操作,lstat 是否有另一个命令
我遇到了两个相互引用的类的问题。我曾尝试使用接口(interface)来解决问题,但遇到了其他问题,例如类重新定义。我只是不确定如何正确执行此操作。 这是我正在做的事情的一个例子。注意:我已经去掉了所
我是 React.js 的新手,我正在尝试从 tutorialspoint 上的教程中学习但我遇到了错误。这是我执行 npm start 命令时控制台上的错误: C:\Users\HP\Desktop
我正在尝试将我的 angular cli 和 angular core 从 12 升级到 13,但看起来存在对等依赖性问题。有人遇到过这个问题吗? npx @angular/cli@13 update
我正在我的 ubuntu 上安装 influxdb_2.0.9,我按照这里的说明操作: https://docs.influxdata.com/influxdb/v2.0/install/?t=Lin
我是一名优秀的程序员,十分优秀!