Jenkins Pipeline Docker-Angular CI项目Dockerfile异常：构建成功后仅显示Nginx默认页求助

我来帮你搞定这个问题！你的Pipeline能成功跑通构建流程，但容器里只显示Nginx默认页，核心问题十有八九是Angular构建产物的路径和Dockerfile里配置的复制路径不匹配，再加上一些构建缓存和小细节的问题。下面是具体的分析和修正后的脚本：

问题根源拆解 #

1. 构建产物路径错误：你拉取的formio/angular项目，执行npm run ng build后，默认的构建输出目录是dist/angular（可以去项目根目录的angular.json文件里找outputPath字段确认），但你的Dockerfile里写的是./dist/angular-formio/，这就导致Docker复制了一个不存在的目录，自然只能显示Nginx自带的默认页面。
2. Docker缓存坑：就算后来修正了路径，Docker可能会缓存之前的构建层，导致旧的Nginx内容没被覆盖，依然显示默认页。
3. 构建顺序小瑕疵：虽然不影响最终结果，但先创建Dockerfile再构建项目的顺序逻辑上有点别扭，调整后更清晰。

修正后的完整Pipeline脚本 #

def cal = Calendar.instance 
def dateFormat = 'YYYYMMDD-hhmmss' 
def timeZone = TimeZone.getTimeZone('GMT+03:00') 
def timeStamp = Calendar.getInstance().getTime().format(dateFormat, timeZone) 
pipeline { 
    agent { 
        node { 
            label 'master' 
            customWorkspace "${params.workingDir}" 
        } 
    } 
    stages { 
        stage('Clean Workspace') { 
            steps { 
                powershell "Remove-Item * -Recurse -Force -ErrorAction SilentlyContinue" 
            } 
        } 
        stage('Clone GitHub Repository') { 
            steps { 
                powershell "git clone https://github.com/formio/angular.git ./" 
            } 
        } 
        stage('Build Angular Project') { 
            steps { 
                powershell """ 
                    Remove-Item package-lock.json -Recurse -Force -ErrorAction SilentlyContinue
                    npm install
                    # 加上--prod构建生产环境包，体积更小性能更好，不需要的话可以去掉
                    npm run ng build -- --prod
                """ 
            } 
        } 
        stage('Create Correct Dockerfile') { 
            steps { 
                powershell """ 
                    echo 'FROM nginx:latest' > Dockerfile.tmp 
                    # 这里改成项目实际的构建输出目录dist/angular
                    echo 'COPY ./dist/angular/ /usr/share/nginx/html/' >> Dockerfile.tmp 
                    # Nginx默认监听80端口，统一配置避免端口混乱
                    echo 'EXPOSE 80' >> Dockerfile.tmp 
                """ 
                powershell "Get-Content .\\Dockerfile.tmp | Set-Content -Encoding utf8 Dockerfile" 
                # 清理临时文件
                powershell "Remove-Item Dockerfile.tmp -Force"
            } 
        } 
        stage('Build Docker Image (Skip Cache)') { 
            steps { 
                # 加--no-cache确保每次都复制最新的构建产物，不会用旧缓存
                powershell "docker image build --no-cache -t ${params.imageName}${timeStamp} ." 
            } 
        } 
        stage('Run Docker Container') { 
            steps { 
                # 先清理同名容器，避免端口占用或容器已存在的错误
                powershell "docker stop ${params.containerName} -ErrorAction SilentlyContinue"
                powershell "docker rm ${params.containerName} -ErrorAction SilentlyContinue"
                # 主机端口22900映射到容器80端口，和Dockerfile的EXPOSE保持一致
                powershell "docker container run -d --name ${params.containerName} -p 22900:80 ${params.imageName}${timeStamp}" 
            } 
        } 
    } 
}

关键修改点说明 #

• 修正路径匹配：把Dockerfile里的复制路径改成./dist/angular/，和formio/angular项目的实际构建输出目录对齐。
• 统一端口配置：Nginx默认监听80端口，所以Dockerfile的EXPOSE和容器运行的端口映射都用80，避免出现“端口配置不匹配导致内容无法访问”的额外问题。
• 禁用Docker缓存：添加--no-cache参数，确保每次构建都重新复制最新的Angular产物，彻底避免缓存带来的旧内容问题。
• 调整构建顺序：先构建Angular项目生成dist目录，再创建Dockerfile，逻辑更通顺，也能避免疑惑。
• 添加错误容错：给PowerShell命令加上-ErrorAction SilentlyContinue，避免因为“文件不存在”或“容器已删除”这类小问题导致Pipeline中断。
• 容器冲突处理：运行新容器前先停止并删除同名容器，解决端口占用或容器已存在的报错。

额外验证步骤（如果还出问题的话） #

如果修正后还是显示默认页，可以手动进入容器检查内容：

# 进入运行中的容器
docker exec -it ${params.containerName} /bin/bash
# 查看Nginx html目录里的文件
ls /usr/share/nginx/html

如果目录里只有Nginx的默认文件（比如index.html、50x.html），说明Angular的构建产物没被正确复制，那就要再检查一下：

1. 本地Workspace里的dist/angular目录是否存在，里面有没有Angular构建后的文件？
2. Dockerfile里的复制路径是不是和实际路径完全一致？

内容的提问来源于stack exchange，提问作者abos