Docker部署Ionic应用访问localhost:8080显示Nginx默认页问题求助

快速排查步骤 #

• 第一步：验证容器内静态文件是否正确部署
  执行命令进入容器查看目录内容：
  docker exec -it dashboard-app-container ls /usr/share/nginx/html
  若返回结果为空、没有index.html文件，或仅存在一个dist子目录，说明构建产物拷贝路径错误。
• 第二步：确认Ionic构建产物的实际输出路径
  修改Dockerfile，在RUN npm run build后新增一行打印目录结构的指令：

  RUN npm run build
  # 新增以下行查看构建产物路径
  RUN ls -la /app
  

  重新执行docker build，观察构建日志中/app目录下的输出：
  1. 若生成的是大写Dist目录：Linux系统大小写敏感，需将COPY指令的源路径改为/app/Dist/
  2. 若dist目录下还有一层以项目名命名的子目录（Ionic Angular项目默认配置通常如此）：需将COPY指令修改为COPY --from=build /app/dist/[你的项目名称]/ /usr/share/nginx/html/
• 第三步：验证Nginx权限与配置
  若文件已存在仍显示默认页，大概率是文件权限不足，Nginx无法读取。可在COPY指令后新增权限配置：

  COPY --from=build /app/dist/ /usr/share/nginx/html/
  # 新增权限配置
  RUN chown -R nginx:nginx /usr/share/nginx/html
  

修复后参考Dockerfile #

FROM node:13-alpine as build

WORKDIR /app

COPY package*.json /app/

RUN npm install -g ionic
RUN npm install

COPY ./ /app/
RUN npm run build
# 可保留本行确认构建路径，没问题后删除
RUN ls -la /app

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/*
# 注意此处路径按你实际构建出的index.html所在路径修改
COPY --from=build /app/dist/你的项目名/ /usr/share/nginx/html/
RUN chown -R nginx:nginx /usr/share/nginx/html

内容的提问来源于stack exchange，提问作者Iuri De Barros