如何编写 Dockerfile 来为 Angular 应用程序和节点服务器提供服务

Question

我的 Angular 应用程序在本地运行良好，但我还没有弄清楚如何对 Docker 映像执行相同的操作。在 Docker 之外，UI 使用 ng serve 在端口 4200 上运行，API 使用 node server.js 提供来自 8080 的数据。

我的 Dockerfile 已设置好，因此它可以让 Node 服务器运行并在 8080 上可用，但 Angular UI 不会运行。我已经尝试了几个选项，但现在我有：

FROM node:14.17.3
COPY package*.json ./
EXPOSE 4200 8080
RUN npm install -g @angular/cli
RUN npm install --only=production
COPY . ./
RUN ng serve
CMD ["node", "server.js"]

它在ng serve 上失败，错误为：The serve command requires to be run in an Angular project, but a project definition could not be found。我在根目录中有一个 angular.json 文件。我不确定我错过了什么。我读到ng serve 不应该在这种情况下使用，但我看到的替代品并没有产生任何影响。

工作区：

编辑 8/10/21：根据此处的答案和大量研究，这将显示带有 nginx 的 UI：

FROM node:12.16.1-alpine as build
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
# RUN npm install -g @angular/cli
# RUN npm run build --prod
FROM nginx:1.15.8-alpine
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
# CMD ["node", "server.js"]

但是，npm run build 步骤失败，因为尽管安装了 @angular/cli，但未找到 ng。我必须手动运行它来构建 dist 文件夹。我不能同时运行node server.js。看来我只能得到前端或后端，而不是两者。

Answer 1

我想更新这一行

COPY . ./

与

COPY . ./app

应该可以解决这个错误。似乎节点“卷”在该文件夹中。

否则设置工作目录似乎也是一种解决方案：

FROM node:14

WORKDIR /usr/src/app

COPY package*.json ./
...

来源：https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

Answer 2

最后使用下面的命令运行ng serve 和主机0.0.0.0，这意味着它监听所有接口。

CMD ["ng","serve","--host", "0.0.0.0"]

但我建议使用 ngInx。

要遵循的步骤：

1. 在项目的根目录下创建一个 docker 文件，并添加以下代码。它负责：下载依赖项、构建 Angular 项目并将其部署到 ngInx 服务器。

#Download Node Alpine image
FROM node:12.16.1-alpine As build

#Setup the working directory
WORKDIR /usr/src/ng-app

#Copy package.json
COPY package.json package-lock.json ./

#Install dependencies
RUN npm install

#Copy other files and folder to working directory
COPY . .

#Build Angular application in PROD mode
RUN npm run build

#Download NGINX Image
FROM nginx:1.15.8-alpine

#Copy built angular files to NGINX HTML folder
COPY --from=build /usr/src/ng-app/dist/pokemon-app/ /usr/share/nginx/html

1. 构建 docker 镜像：

docker build -t my-ng-app .

1. 使用以下命令旋转 docker 容器，将您的应用程序暴露在端口 80

docker run -dp 3000:80 my-ng-app

查看我关于此的文章 - https://askudhay.com/how-to-dockerize-an-angular-application，如果您仍有任何问题，请告诉我。

Answer 3

我想出了一个可以运行完整应用程序的解决方案。这里的大多数答案都集中在运行前端（nginx 建议很有帮助）。似乎 Docker 容器可以启用 UI 或服务器，但不能同时启用两者。我遇到了 Docker Compose，它将在单独的图像中运行前端和后端。我的解决方案：

Dockerfile.ui

# Define node version
FROM node:12.16.1-alpine as build
# Define container directory
WORKDIR /usr/src/app
# Copy package*.json for npm install
COPY package*.json ./
# Run npm clean install, including dev dependencies for @angular-devkit
RUN npm ci
# Run npm install @angular/cli
RUN npm install -g @angular/cli
# Copy all files
COPY . .
# Run ng build through npm to create dist folder
RUN npm run build --prod
# Define nginx for front-end server
FROM nginx:1.15.8-alpine
# Copy dist from ng build to nginx html folder
COPY --from=build /usr/src/app/dist /usr/share/nginx/html

Dockerfile.server

# Define node version
FROM node:12.16.1-alpine
# Define container directory
WORKDIR /usr/src/app
# Copy package*.json for npm install
COPY package*.json ./
# Run npm clean install, prod dependencies only
RUN npm ci --only=production
# Copy all files
COPY . .
# Expose port 8080 for server
EXPOSE 8080
# Run "node server/run.js"
CMD ["node", "server/run.js"]

docker-compose.yml

version: '3'
services:
  server:
    build: 
      context: ./
      dockerfile: Dockerfile.server
    container_name: server
    ports:
      - 8080:8080

  ui:
    build: 
      context: ./
      dockerfile: Dockerfile.ui
    container_name: ui
    ports:
      - 4200:80
    links:
      - server

docker-compose up 将为服务器和 UI 构建映像并同时部署。我还通过安装开发依赖项解决了ng not found 错误，尤其是@angular-devkit/build-angular。

本教程帮助我了解了 Docker Compose：https://wkrzywiec.medium.com/how-to-run-database-backend-and-frontend-in-a-single-click-with-docker-compose-4bcda66f6de