用于部署我的 Angular 应用程序的 dockerfile 不会使用 NodeJs 或 nginx 的 Web 服务器启动应用程序

问题描述 投票:0回答:1

我已经完成了一个 Angular 项目的工作,我需要使用 docker 来部署它,我按照说明进行操作,并使用多个源确保 dockerfile 是正确的。 我尝试使用 nginx 或 nodejs,但它不起作用(对于 nginx,它显示了 nginx 服务器的默认页面)。

对于构建器,它的 ' "builder": "@angular-devkit/build-angular:application", ' 对于我正在使用的项目版本:Angular CLI: 17.3.8 Node: 20.15.1 .

这是我现在用来创建图像的 dockerfile:

# Stage 1: Build Angular application
FROM node:latest as build

WORKDIR /app

COPY package*.json ./

RUN npm install

RUN npm install -g @angular/cli

COPY . .

RUN ng build --configuration=production

# Stage 2: Serve Angular application with Nginx
FROM nginx:latest

COPY --from=build /app/dist/projet-daret /usr/share/nginx/html

EXPOSE 80

这是我的 docker-compose:

     version: '3.8'
    services:
      angular-app:
        build: .
        ports:
          - "4300:80"
      nginx:
        image: nginx:latest
        ports:
          - "4300:80"
        volumes:
          - ./nginx.conf:/etc/nginx/nginx.conf
        depends_on:
          - angular-app

注意:我有一个使用 Nodejs 作为 Web 服务器的版本的 Dockerfile。

当我仅将 docker 与 Angular 应用程序一起使用并使用 ngserve 运行它时,它工作正常,但是当我使用 nginx 或 nodejs 时,它不会运行 Angular 应用程序,我尝试了多种修改,我可以找到 docker 文件,但没有结果,我尝试使用 compose 事件,但也没有产生任何结果。我现在被困住了。

node.js angular docker nginx deployment
1个回答
0
投票

您正在使用新的应用程序生成器。文件夹结构现在如下所示:

dist/
  <your-app-name>/
    browser/
      index.html
      main.js
      ...

但是,您的 Dockerfile 似乎仍然期待浏览器构建器提供的旧结构:

dist/
  <your-app-name>/
    index.html
    main.js
    ...

请注意,没有

browser
文件夹。您需要调整 dockerfile 以复制
browser
文件夹:

COPY --from=build /app/dist/projet-daret/browser /usr/share/nginx/html

额外的上下文:对于客户端渲染的应用程序,这似乎是不必要的。但对于服务器端渲染的应用程序,将有两个文件夹:包含预渲染页面的

browser
文件夹,以及包含 NodeJS 服务器代码的
server
文件夹。

© www.soinside.com 2019 - 2024. All rights reserved.