首页 > 解决方案 > 尝试对 Angular 进行 docker 化时出现 Dockerfile 错误 - 没有这样的文件或目录

问题描述

我正在尝试 Dockerize 并部署一个 Angular 应用程序。我有以下内容:

Dockerfile

FROM node
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm install --silent
COPY . .
RUN node_modules/.bin/ng build --prod
FROM nginx:alpine
WORKDIR /usr/src/app
RUN rm -rf /usr/share/nginx/html/*
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY /dist/nexct-approval-ui /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

然后我运行:

docker stop /ng-nexct-approval-ui-container
docker build --pull --rm -f "Dockerfile" -t ng-nexct-approval-ui-image:latest "."

我得到他以下输出:

/ng-nexct-approval-ui-container
Sending build context to Docker daemon  541.9MB
Step 1/12 : FROM node
latest: Pulling from library/node
Digest: sha256:a6be25f2f9b8af240ee0b50aeee089bc66c23dfe95053a4de289b8d9efebdc44
Status: Image is up to date for node:latest
 ---> 37ad18cd8bd1
Step 2/12 : WORKDIR /usr/src/app
 ---> Using cache
 ---> a497790a47a4
Step 3/12 : COPY package.json package.json
 ---> Using cache
 ---> 784e7d4b48f6
Step 4/12 : RUN npm install --silent
 ---> Using cache
 ---> 63fd9d88955f
Step 5/12 : COPY . .
 ---> 9028e45e0701
Step 6/12 : RUN node_modules/.bin/ng build --prod
 ---> Running in dca7a1305fa9
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {2} polyfills-es2015.d26681d378262fd3296d.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.ca016a6f12d7e632666f.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {0} runtime-es2015.0dae8cbc97194c7caed4.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.0dae8cbc97194c7caed4.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.d2d6ea2818487d59afe5.js (main) 1.86 MB [initial] [rendered]
chunk {1} main-es5.d2d6ea2818487d59afe5.js (main) 1.98 MB [initial] [rendered]
chunk {4} styles.f52187462d1cfca0d78e.css (styles) 62.1 kB [initial] [rendered]
Date: 2020-07-22T10:14:36.958Z - Hash: d17c8f049f83f75a6b04 - Time: 69588ms

WARNING in budgets: Exceeded maximum budget for initial-es5. Budget 2 MB was not met by 168 kB with a total of 2.16 MB.
Removing intermediate container dca7a1305fa9
 ---> f395c253b4ed
Step 7/12 : FROM nginx:alpine
alpine: Pulling from library/nginx
Digest: sha256:ee8c35a6944eb3cc415cd4cbeddef13927895d4ffa50b976886e3abe48b3f35a
Status: Image is up to date for nginx:alpine
 ---> ecd67fe340f9
Step 8/12 : WORKDIR /usr/src/app
 ---> Running in e9a249ce0b36
Removing intermediate container e9a249ce0b36
 ---> 453af4305629
Step 9/12 : RUN rm -rf /usr/share/nginx/html/*
 ---> Running in ba40b25e4973
Removing intermediate container ba40b25e4973
 ---> f813f1d121b1
Step 10/12 : COPY nginx.conf /etc/nginx/conf.d/default.conf
 ---> a6c544d4efdd
Step 11/12 : COPY /dist/nexct-approval-ui /usr/share/nginx/html
COPY failed: stat /var/lib/docker/tmp/docker-builder401838835/dist/nexct-approval-ui: no such file or directory

问题

如何修复no such file or directory错误?

我认为这与WORKDIR /usr/src/app.

谢谢

标签: angulardocker

解决方案


我相信您要实现的是多阶段构建:

第 1 阶段:在节点容器中构建节点应用程序 - 这应该在容器中的某处创建 /dist/ 目录
第 2 阶段:从/dist/ 目录到将为您的应用程序提供服务的 nginx 容器。

你是对的:问题就在这里COPY /dist/nexct-approval-ui /usr/share/nginx/html。此行将尝试/dist/nexct-approval-ui从您的操作系统复制,而不是从在第 1 阶段构建 /dist/ 文件夹的容器中复制。

要引用在第 1 阶段创建的图像,请尝试以下操作:

COPY --from=0 /path-to-your-dist-in-the-node-container/ /usr/share/nginx/html 

为了告诉在您选择的路径而不是当前工作目录中ng build生成目录,可以使用:/dist/--output-path

RUN node_modules/.bin/ng build --prod --output-path=/path-to-your-dist-in-the-node-container/

归功于@user336233


推荐阅读