0

我的 Angular 应用程序在本地运行良好，但我还没有弄清楚如何对 Docker 映像执行相同的操作。在 Docker 之外，UI 在端口 4200 上运行，ng serveAPI 提供来自 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和这个一起跑。看来我只能得到前端或后端，不能两者兼而有之。

4

3 回答 3

1

最后使用以下命令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，如果您仍有任何问题，请告诉我。

于 2021-07-27T23:02:02.903 回答
0

我想更新这条线

COPY . ./

和

COPY . ./app

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

否则设置 workdir 似乎也是一个解决方案：

FROM node:14

WORKDIR /usr/src/app

COPY package*.json ./
...

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

于 2021-07-27T16:19:48.647 回答
0

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

码头工人-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

于 2021-08-11T19:03:55.803 回答