代码之家  ›  专栏  ›  技术社区  ›  Claudio

Docker内部产品的角度构建显然被跳过了

  •  1
  • Claudio  · 技术社区  · 4 年前

    在阅读了大量关于如何使用Docker容器构建angular应用程序的指南之后,我决定使用以下Dockerfile:

    FROM node:12.2.0 AS builder
    
    WORKDIR /usr/src/ng-app
    COPY . .
    RUN npm ci
    RUN npm install --no-progress --loglevel=error
    CMD npm run build:prod --no-progress --loglevel=error
    
    FROM nginx:alpine
    
    RUN rm -rf /usr/share/nginx/html/*
    COPY --from=builder /usr/src/ng-app/dist /usr/share/nginx/html
    CMD ["nginx", "-g", "daemon off;"]
    EXPOSE 4200
    
    

    docker -t appname:latest . .

    这是一个直接从Jenkins VM运行的输出示例,用户 jenkins ,添加 --rm=false

    Sending build context to Docker daemon  803.3kB
    Step 1/11 : FROM node:12.2.0 AS builder
     ---> 502d06d3bfdf
    Step 2/11 : WORKDIR /usr/src/ng-app
     ---> Running in e6737ca37c2d
     ---> 4eedd3d5f1bb
    Step 3/11 : COPY . .
     ---> ab706d4786a1
    Step 4/11 : RUN npm ci
     ---> Running in b6baf5e5661e
    
    > fsevents@1.2.9 install /usr/src/ng-app/node_modules/fsevents
    > node install
    
    
    > core-js@2.6.9 postinstall /usr/src/ng-app/node_modules/babel-runtime/node_modules/core-js
    > node scripts/postinstall || echo "ignore"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    
    > core-js@2.6.9 postinstall /usr/src/ng-app/node_modules/karma/node_modules/core-js
    > node scripts/postinstall || echo "ignore"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    > @angular/cli@8.0.6 postinstall /usr/src/ng-app/node_modules/@angular/cli
    > node ./bin/postinstall/script.js
    
    added 1024 packages in 14.498s
     ---> 7da6fc7fe1c6
    Step 5/11 : RUN npm install
     ---> Running in 2df014d1ba6b
    npm WARN @angular/animations@8.2.13 requires a peer of @angular/core@8.2.13 but none is installed. You must install peer dependencies yourself.
    npm WARN @nth-cloud/ng-toggle@4.0.0 requires a peer of rxjs@^6.5.4 but none is installed. You must install peer dependencies yourself.
    
    audited 1092 packages in 5.733s
    found 723 vulnerabilities (700 low, 4 moderate, 19 high)
      run `npm audit fix` to fix them, or `npm audit` for details
     ---> 5d633645ce12
    Step 6/11 : CMD npm run build:prod
     ---> Running in ab6dd15e76a1
     ---> 2ede963b2ceb
    Step 7/11 : FROM nginx:alpine
     ---> 629df02b47c8
    Step 8/11 : RUN rm -rf /usr/share/nginx/html/*
     ---> Running in 7b71bea26781
     ---> 8078910455af
    Step 9/11 : COPY --from=builder /usr/src/ng-app/dist/ /usr/share/nginx/html
    COPY failed: stat usr/src/ng-app/dist/: file does not exist
    

    检查应具有 /dist folder显示实际上没有文件夹,就好像没有执行命令一样。但是,运行命令 npm run build:prod 直接在该图像中,一旦作为容器安装,运行完美,没有任何问题:

    root@82a35d98b488:/usr/src/ng-app# npm run build:prod
    
    > vets@0.1.0 build:prod /usr/src/ng-app
    > ng build --configuration=production
    
    Browserslist: caniuse-lite is outdated. Please run next command `npm update`
    
    Date: 2021-01-26T10:24:19.807Z
    Hash: 5a483fd2f6b20f6335bf
    Time: 72314ms
    chunk {0} runtime-es5.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
    chunk {1} main-es5.3bdcbcdf43db7adf3586.js (main) 1.53 MB [initial] [rendered]
    chunk {2} polyfills-es5.4e06eb653a3c8a2d581f.js (polyfills) 111 kB [initial] [rendered]
    
    Date: 2021-01-26T10:25:31.394Z
    Hash: 09fc7e775fd293abec30
    Time: 71366ms
    chunk {0} runtime-es2015.858f8dd898b75fe86926.js (runtime) 1.41 kB [entry] [rendered]
    chunk {1} main-es2015.da87330ad9289237401f.js (main) 1.44 MB [initial] [rendered]
    chunk {2} polyfills-es2015.5728f680576ca47e99fe.js (polyfills) 36.4 kB [initial] [rendered]
    chunk {3} styles.3d74d94089157e391ac0.css (styles) 153 kB [initial] [rendered]
    

    我不知道为什么这个命令会被跳过,如果有任何提示,我将不胜感激。找到一些文档是相当困难的,因为所有的东西似乎都分散在git问题、paywalled文章和其他stackoverflow问题之间,这些问题看似相关,但实际上并不是同一个问题。

    我发现的最常见的问题是可用的内存和由于简洁的插件而导致的缓慢,但对我来说不是这样。

    1 回复  |  直到 4 年前
        1
  •  2
  •   David Maze    4 年前

    你的第一阶段只是设定一个 CMD 如果最终要在独立容器中运行,则运行Angular构建。你需要 RUN 在构建时创建。

    FROM ... AS builder
    RUN npm install         # run now
    CMD npm run build:prod  # recorded but not run
                            # (should probably be RUN to run now also)
    
    FROM ...
    COPY --from=builder /app/dist ...
    # Fails, because `npm run build:prod` hasn't been run
    
        2
  •  0
  •   Norbert Bartko    4 年前

    FROM node:12.2.0 AS builder
    
    WORKDIR /usr/src/ng-app
    COPY . .
    RUN npm ci
    RUN npx ng build --prod --base-href ./
    

    angular.json 输出应该在 ./dist ./dist/ng-app