如何使用Docker动态地将环境变量分配给角度cli项目?

前端之家收集整理的这篇文章主要介绍了如何使用Docker动态地将环境变量分配给角度cli项目?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用角度cli项目和节点项目运行两个单独的docker容器.

这是我的Dockerfile

  1. ### STAGE 1: Build ###
  2. # We label our stage as 'builder'
  3. FROM node:carbon as builder
  4. COPY package.json package-lock.json ./
  5. RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
  6. ## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
  7. RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app
  8. WORKDIR /ng-app
  9. COPY . .
  10. ## Build the angular app in production mode and store the artifacts in dist folder
  11. RUN $(npm bin)/ng build --aot --build-optimizer --environment=test
  12. ### STAGE 2: Setup ###
  13. FROM Nginx:1.13.3-alpine
  14. ## Copy our default Nginx config
  15. COPY Nginx/default.conf /etc/Nginx/conf.d/
  16. ## Remove default Nginx website
  17. RUN rm -rf /usr/share/Nginx/html/*
  18. ## From 'builder' stage copy over the artifacts in dist folder to default Nginx public folder
  19. COPY --from=builder /ng-app/dist /usr/share/Nginx/html
  20. CMD ["Nginx","-g","daemon off;"]

节点容器URL存储在environment.ts(angular)中.

Environment.ts文件

  1. declare var require: any;
  2. const pack = require('../../package.json');
  3. export const environment = {
  4. production: false,API_URL: 'http://localhost:3000/',socket: 'http://localhost:3200',appName: pack.name,version: pack.version,envi: 'test'
  5. };

在角度项目的构建时间期间获取节点API_URL.但我想在docker run命令期间修改环境变量. (即)我想在docker容器运行时期间动态地将环境变量值添加到environment.ts文件

如,
docker run -e API_URL = 192.168.10.147:3000 -p 4200:80 –name = angular angular_image

我怎样才能做到这一点?

最佳答案
我将尝试总结我与开发Angular应用程序的同事一起解决解决方案,以解决这个问题.为了更好地说明解决方案,我首先描述了角应用程序的dev文件夹树(文件名称在方括号中),其中每个相关元素如下所述:

  1. +---[my angular cli project]
  2. ¦ ¦
  3. ¦ +---[src]
  4. ¦ ¦ +---[assets]
  5. ¦ ¦ ¦ +---[json]
  6. ¦ ¦ ¦ ¦ +---runtime.json
  7. ¦ ¦ ¦ ¦
  8. ¦ ¦ ¦ ..other angular application assets files ...
  9. ¦ ¦
  10. ¦ ¦ ...other angular application source files...
  11. ¦ ¦
  12. ¦ +---[dist]
  13. ¦ ¦ ...built angular files
  14. ¦ ¦
  15. ¦ +---[docker]
  16. ¦ ¦ +---[Nginx]
  17. ¦ ¦ ¦ +---default.conf
  18. ¦ ¦ +---startup.sh
  19. ¦ ¦
  20. ¦ +---Dockerfile
  21. ¦
  22. ... other angluar cli project files in my project ...

在angular cli项目中,需要在运行时使用环境变量的值替换的配置数据保存在应用程序资产的静态json文件中.我们选择在assets / json / runtime.json中找到它.在此文件中,要替换的值的处理方式与以下示例中的${API_URL}变量类似:

./src/assets/json/runtime.json:

  1. {
  2. "PARAM_API_URL": "${API_URL}"
  3. ...other parameters...
  4. }

在运行时,角度代码将从此文件中读取PARAM_API_URL的值,其内容将在运行时使用环境值进行修改,如下所述.从技术上讲,json是由一个Angular服务通过http读取的,也就是说,Web应用程序对上面的静态资产json文件的URL执行HTTP GET操作.

  1. @Injectable()
  2. export class MyComponent {
  3. constructor( private http: Http ) {
  4. }
  5. ...
  6. someMethod() {
  7. this.http.get( 'assets/json/runtime.json' ).map( result => result.PARAM_API_URL ).subscribe(
  8. api_url => {
  9. ... do something with the api_url
  10. eg. invoke another http get on it ...
  11. }
  12. );
  13. }
  14. }

要创建一个在运行时启动时执行环境替换的docker容器,将在其中放入一个脚本startup.sh(请参阅下面的Dockerfile),在启动Nginx Web服务器之前,容器启动时会在上面的文件中执行evnsubst:

./docker/startup.sh:

  1. echo "Starting application..."
  2. echo "API_URL = ${API_URL}"
  3. envsubst < "/usr/share/Nginx/html/assets/json/runtime.json" > "/usr/share/Nginx/html/assets/json/runtime.json"
  4. Nginx -g 'daemon off;'

如下所示,Dockerfile执行以下操作:在./dist中复制已编译的角度文件后,然后将startup.sh脚本定义为CMD起点(主机/ dist文件夹在/usr/share / Nginx中复制) / html,这就是为什么这是用于定位上面envsubst调用中提到的runtime.json文件的路径.请注意,与Dockerfile不同,这里我们不包括角度cli源的构建阶段,相反,ng构建应该是在开发容器映像之前由开发人员执行的 – 并且这种构建的结果是预计会在./dist文件夹中找到.但是,对于手头问题的解决方案而言,这是一个微小的差异.

./Dockerfile:

  1. FROM Nginx:1.13.3-alpine
  2. ## Copy our default Nginx config
  3. COPY docker/Nginx/default.conf /etc/Nginx/conf.d/
  4. ## Remove default Nginx website
  5. RUN rm -rf /usr/share/Nginx/html/*
  6. ## copy over the artifacts in dist folder to default Nginx public folder
  7. COPY dist /usr/share/Nginx/html
  8. ## startup.sh script is launched at container run
  9. ADD docker/startup.sh /startup.sh
  10. CMD /startup.sh

现在,当您构建容器时,可以使用以下命令运行它:

  1. docker run -e "API_URL=

在启动Nginx之前,将在runtime.json中替换给定的值.

为了完整性,虽然与特定问题无关,但我还包括docker / Nginx / default.conf文件来配置Nginx实例

./docker/Nginx/default.conf:

  1. server {
  2. listen 80;
  3. sendfile on;
  4. default_type application/octet-stream;
  5. gzip on;
  6. gzip_http_version 1.1;
  7. gzip_disable "MSIE [1-6]\.";
  8. gzip_min_length 256;
  9. gzip_vary on;
  10. gzip_proxied expired no-cache no-store private auth;
  11. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+RSS text/javascript;
  12. gzip_comp_level 9;
  13. root /usr/share/Nginx/html;
  14. location / {
  15. try_files $uri $uri/ /index.html =404;
  16. }
  17. }

猜你在找的Docker相关文章