Docker和Angular CLI应用程序

Question

我正在尝试使用Docker来容纳使用Angular CLI构建的应用程序.它只是您使用时出现的默认文件,ng new以便我可以学习如何执行此操作.我正在尝试使用两步构建,其中第一步运行ng-build --prod --build-optimizer,然后将./dist文件夹中的结果放入具有为应用程序提供服务的Nginx的容器中.我知道如果我从我的命令行手动构建应用程序,然后运行一个Dockerfile只有第二步,我可以让Angular应用程序服务,但我希望Docker能为我做到这一点.

这是我的Dockerfile:

FROM node:8.9-alpine as angular-built
COPY package.json package.json
RUN npm install
COPY . .
RUN ng build --prod --build-optimizer

FROM nginx:alpine
LABEL author="Preston Lamb"
COPY --from=angular-built ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

我已尝试在Dockerfile的第一步使用node:8.9-alpine基本映像和johnpapa/angular-cli基本映像.一切都有效,直到RUN ng build --prod --build-optimizer命令,此时它失败并出现此错误:

无法读取null的属性'config'TypeError:无法在Class.run中读取属性'config'的null(/node_modules/@angular/cli/tasks/build.js:15:56)(/ node_modules/@) angular/cli/commands/build.js:216:26)在Class.validateAndRun的新Promise()处解析(/node_modules/@angular/cli/ember-cli/lib/models/command.js:261:20) Promise.resolve.then.then(/ node_modules/@ angular/cli/ember-cli/lib/cli/cli.js:140:24)at

谷歌搜索后,我发现这是因为CLI无法找到该.angular-cli.json文件.然后我读到默认情况下,Linux不会复制隐藏文件,所以它不会复制.angular-cli.json文件,而这就是错误出现的地方.

我的下一步是试图强制复制该文件.我尝试了以下两种方法,在COPY . .命令之前执行此步骤:

COPY .angular-cli.json .angular-cli.json

和

RUN shopt -s dotglob

第一个似乎没有做任何事情; 我得到了和以前一样的错误.第二个产生不同的错误:

/bin/sh: shopt: not found

所以我发现运行告诉Linux复制隐藏文件的命令也不起作用.我看到一个与此不同的问题,但有关的说是将shopt电话改为以下内容:

RUN /bin/sh -c "shopt -s dotglob"

但那没有做任何事情.我得到了同样的not found错误.

所以我不确定从哪里开始.任何帮助将不胜感激.

Answer 1

如果您使用节点高山图像来构建角度应用程序,则需要安装角度cli.注意npm i -g @angular/cli在Dockerfile下面.我还在第一个构建阶段添加了一个工作目录.

然后,您可以运行docker compose命令(或docker build和docker run),以便在nginx上运行开箱即用的angular cli app

Dockerfile

FROM node:8.9-alpine as angular-built
WORKDIR /usr/src/app
RUN npm i -g @angular/cli
COPY package.json package.json
RUN npm install --silent
COPY . .
RUN ng build --prod

FROM nginx:alpine
LABEL author="John Papa"
COPY --from=angular-built /usr/src/app/dist /usr/share/nginx/html
EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]

泊坞窗,compose.debug.yml

version: '2.1'

services:
  clean:
    image: clean
    build: .
    environment:
      NODE_ENV: development
    ports:
      - 80:80
      - 443:443
      - 9229:9229
    ## set your startup file here
    command: [nginx-debug, '-g', 'daemon off;']

如果你想使用基于高山节点8.9的图像,并且已经烘烤了角度cli 1.5.5,请使用:

Dockerfile

FROM johnpapa/angular-cli as angular-built
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm install --silent
COPY . .
RUN ng build --prod

FROM nginx:alpine
LABEL author="John Papa"
COPY --from=angular-built /usr/src/app/dist /usr/share/nginx/html
EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]

BTW - CLI的1.5版本已经--build-optimizer烘焙,因此不需要它