Azure DevOps中Docker镜像构建失败：无法解析FontAwesome字体文件

我使用Docker 20.x版本，在Azure DevOps中执行Docker镜像构建步骤时失败，问题出在npm install后的build阶段。以下是相关配置文件及错误日志：

Dockerfile #

FROM artifactory.global.standardchartered.com/gv-images-products/scb-bases/gts-1114/node-builder:20.11.0-micro-528704 as build

LABEL       maintainer="WM_Bolt@sc.com"
LABEL       description="Wealth Management Advisory (WMA) - RM Portfolio Application"

ENV NODE_OPTIONS=--openssl-legacy-provider

USER root

# NOTE ON PROXIES
#
# When this Dockerfile is used to build an image from DevNet,
# it is necessary to pass HTTP_PROXY and HTTPS_PROXY as --build-arg:
#
#     docker build . -t mydockerimage \
#       --build-arg HTTP_PROXY=http://10.65.1.33:8080 \
#       --build-arg HTTPS_PROXY=http://10.65.1.33:8080
#
# When running the resulting image on DevNet, again it is required to
# pass the proxy:
#
#     docker run mydockerimage \
#       --env HTTP_PROXY=http://10.65.1.33:8080 \
#       --env HTTPS_PROXY=http://10.65.1.33:8080
#
# Note that using http_proxy/https_proxy (i.e. lowercase env var names)
# will not work for _building_ the image. This is because the build arguments
# are overwritten as a result of the way gcc_node is configured.

WORKDIR     /app
COPY         .npmrc *.js *.json ./
COPY         app ./app/
COPY         config ./config/
COPY         public ./public/
COPY         resources ./resources/
COPY         src ./src/
COPY         views ./views/

# server and app have different dependencies so they are installed as separate layers
RUN         npm config set registry https://artifactory.global.standardchartered.com/artifactory/api/npm/npm-release
RUN         npm install -g npm@10.5.1
RUN         npm install --loglevel verbose
RUN         npm run server:build

# Remove node_modules and install for production only
RUN         rm -rf node_modules
RUN         npm install --production --loglevel verbose

# app dependencies are not needed after bundling, so we remove them
# package-lock.json refers to OSX native packages, so install without shrinkwrap
RUN         npm install --no-shrinkwrap --loglevel verbose --prefix app
RUN         NODE_ENV=production npm run build --prefix app
RUN         cd app && rm -rf node_modules

RUN         chmod -R 775 .

FROM artifactory.global.standardchartered.com/gv-images-products/scb-bases/gts-1114/node:20.11.0-micro-528746

WORKDIR     /app

COPY --from=build /app/build ./build

# OpenShift will make it run as a different user, we set it to `daemon` here so that we have a similar environment and can catch problems early

USER daemon

# Set default environment variables

ENV         LOG_PATH=/app/logs/wma/local/rm-portal \
            NODE_ENV=production            

EXPOSE      3000
CMD         node /build/index.js

package.json开发依赖 #

"devDependencies": {
    "copy-webpack-plugin": "^5.1.2",
    "cross-env": "^5.2.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^1.6.1",
    "sass": "^1.64.2",
    "resolve-url-loader": "^3.0.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.9.2"
}

错误日志 #

ERROR in ./scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '. ./fonts/fontawesome-webfont.eot?v=4.7.0' in '/app/app/scss'
at finishWithoutResolve (/app/app/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
at /app/app/node_modules/enhanced-resolve/lib/Resolver.js: 656:15
at /app/app/node_modules/enhanced-resolve/lib/Resolver.js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /app/app/node_modules/enhanced-resolve/lib/Resolver.js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /app/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js: 89:43
at /app/app/node_modules/enhanced-resolve/lib/Resolver.js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /app/app/node_modules/enhanced-resolve/lib/Resolver. js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /app/app/node_modules/enhanced-resolve/lib/Resolver.js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /app/app/node_modules/enhanced-resolve/lib/Resolver. js: 714:5
at eval (eval at create (/app/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /app/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js: 89:43
at processResult (/app/app/node_modules/webpack/lib/NormalModule.js:841:19)
at /app/app/node_modules/webpack/lib/NormalModule.js: 966:5
at /app/app/node_modules/loader-runner/lib/LoaderRunner. js: 400:11
at /app/app/node_modules/loader-runner/lib/LoaderRunner.js: 252:18
at context.callback (/app/app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object. loader (/app/app/node_modules/css-loader/dist/index.js: 155:5)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
@ ./index.js 9:0-26

1 ERROR in child compilations (Use 'stats.children: true' resp. ' -- stats-children' for more details)
webpack 5.91.0 compiled with 2 errors in 7761 ms
Error: building at STEP "RUN NODE_ENV=production npm run build -- prefix app": while running runtime: exit status 1

我已更新上述开发依赖，但问题仍然存在，恳请提供解决建议。

解决建议 #

• 修复字体路径的语法错误：错误日志里的路径是. ./fonts/fontawesome-webfont.eot?v=4.7.0，中间多了一个空格，这是无效路径。打开/app/app/scss/main.scss找到引用该字体的代码行，把空格删掉，改成./fonts/fontawesome-webfont.eot?v=4.7.0。
• 确认字体文件是否存在：检查项目本地的app/fonts目录下是否包含fontawesome-webfont.eot、fontawesome-webfont.ttf等全套FontAwesome字体文件，如果缺失，需要补充完整（可通过npm安装font-awesome包后复制对应文件，或直接下载字体文件）。
• 检查Dockerfile的文件复制逻辑：当前Dockerfile没有明确复制fonts目录到容器中，如果字体文件在app/fonts下，确认COPY app ./app/是否已经包含了该目录；如果字体在其他路径，需要添加单独的COPY命令，比如COPY ./path/to/fonts ./app/fonts/。
• 调整Webpack的字体文件处理配置：你使用的是Webpack 5，官方已推荐用内置的asset/resource替代file-loader。修改Webpack配置文件，添加如下规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name][ext]' // 确保输出路径和引用路径匹配
          }
        }
      ]
    }
  };
  

  如果坚持使用file-loader，要确保其配置里的outputPath和publicPath设置正确，避免路径映射错误。
• 清理构建缓存：Azure DevOps的构建可能残留旧缓存，导致依赖或文件未更新。在构建步骤中添加清理命令：npm cache clean --force，同时在Docker构建时添加--no-cache参数，确保是全新构建环境。

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