如何编写 Dockerfile 来服务 Angular 应用程序和 Node 服务器

Question

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

我的 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

我找到了一个可以运行完整应用程序的解决方案。这里的大多数答案都集中在运行前端（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