如何改进我的 Dockerfile 以完美地为 Angular 应用程序创建 Docker 映像？答案

【问题标题】：How to improve my Dockerfile to create an Docker image for Angular application perfectly?如何改进我的 Dockerfile 以完美地为 Angular 应用程序创建 Docker 映像？
【发布时间】：2021-04-19 10:08:16
【问题描述】：

我很困惑如何为任何类型的 Node.js 或 Angular 应用程序创建 Dockerfile。我做了很多搜索来实现这一点，但我做不到。我不明白下面的 Dockerfile 有什么问题。我该如何改进它？

FROM node:12.18-alpine as build

# set working directory
WORKDIR /usr/src
COPY src/ ./src/



# install and cache app dependencies
COPY package.json /app/package.json

RUN cd src/app && npm install @angular/cli && npm install && npm run build


# # start app
# CMD ng serve --host 0.0.0.0 --port 80 --disableHostCheck true

# generate build
RUN ng build --output-path=dist --configuration=production

############
### prod ###
############

# base image
FROM nginx:1.16.0-alpine

COPY ./nginx-config.conf /etc/nginx/conf.d/default.conf

# copy artifact build from the 'build environment'
COPY --from=build /app/dist /usr/share/nginx/html

# expose port 80
EXPOSE 80

# run nginx
CMD ["nginx", "-g", "daemon off;"]

nginx-config.conf：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /usr/share/nginx/html;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

在 Azure 管道中构建后出错：

【问题讨论】：

您收到的错误信息是什么？（我无法从图像中看出，您应该将图像替换为错误消息的实际文本。）Dockerfile 中似乎有很多不同的路径——/usr/src、/usr/src/src、@987654329 @ - 将所有内容复制到 . 可能会更好，这将被解释为相对于 WORKDIR。
@DavidMaze 抱歉我的回复迟了，我改进了我的问题。请再检查一遍好吗？

标签： node.js angular docker azure-devops devops

【解决方案1】：

如何改进我的 Docker 文件以完美地为 Angular 应用程序创建 Docker 映像？

我可以通过您的 dockerfile 重现此问题。那是因为您将WORKDIR 设置为WORKDIR /usr/src 并将package.json 复制到/app/package.json。在这种情况下，文件package.json会被复制到WORKDIR，路径应该是：

/usr/src/app/package.json

但是，你在工作文件夹中使用命令RUN cd src/app，会切换到路径/usr/src/src/app。这与文件中存在的路径不同/usr/src/app。

因此，要解决此问题，您需要更改命令行：

COPY package.json /app/package.json

收件人：

COPY package.json ./src/app/package.json

作为测试，我使用RUN cd src/app && ls 列出路径/usr/src/src/app 中的文件：

【讨论】：