容器环境下ExtJS生产环境构建失败问题求助

问题场景 #

基于Ubuntu 18.04构建ExtJS应用的Docker容器，Dockerfile配置如下：

FROM ubuntu:18.04
RUN apt update -y
RUN apt install git -y
RUN apt install openjdk-8-jdk -y
RUN apt install unzip -y
RUN apt install curl -y
COPY cmd-7.4.0.39-linux-64-no_jre.zip .
RUN unzip cmd-7.4.0.39-linux-64-no_jre.zip
RUN chmod +x SenchaCmd-7.4.0.39-linux-amd64.sh
RUN ./SenchaCmd-7.4.0.39-linux-amd64.sh -q -a
RUN rm SenchaCmd-7.4.0.39-linux-amd64.sh
RUN rm cmd-7.4.0.39-linux-64-no_jre.zip

开发构建命令/root/bin/Sencha/Cmd/sencha app build development执行正常，但生产构建命令/root/bin/Sencha/Cmd/sencha app build production抛出以下错误：

[ERR] loading page file:///root/bin/Sencha/Cmd/7.4.0.39/ant/build/slicer/theme.html?_baseDir=%2Fdesktop-client%2Fsrc%2Fbuild%2Ftemp%2Fproduction%2FMyAppName%2Fslicer-temp
setting base href to : file:///desktop-client/src/build/temp/production/MyAppName/slicer-temp/
== Unhandled Error ==
TypeError: undefined is not a function (evaluating '''Ext.define''')

  file:///desktop-client/src/ext/classic/theme-neptune/overrides/Component.js:1 in global code

[ERR] 
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: phantomjs process exited with code 2
[ERR]   at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMetho
[ERR] dAccessorImpl.java:62)
[ERR] 
[ERR] Total time: 17 seconds
[ERR] /root/bin/Sencha/Cmd/7.4.0.39/plugin.xml:333: The following error occurred while executing this line:
/root/bin/Sencha/Cmd/7.4.0.39/ant/build/app/build-impl.xml:341: The following error occurred while executing this line:
/root/bin/Sencha/Cmd/7.4.0.39/ant/build/app/slice-impl.xml:378: The following error occurred while executing this line:
/root/bin/Sencha/Cmd/7.4.0.39/ant/build/app/slice-impl.xml:379: The following error occurred while executing this line:
/root/bin/Sencha/Cmd/7.4.0.39/ant/build/app/slice-impl.xml:220: com.sencha.exceptions.ExProcess: phantomjs process exited with code 2
[ERR] A log is available in the file "/desktop-client/src/sencha-error-20220919.log"

问题根源 #

生产构建的主题切片步骤依赖PhantomJS渲染页面，但Ubuntu 18.04默认环境缺少PhantomJS运行必需的图形依赖库，导致无法正确加载ExtJS核心代码，进而触发Ext.define未定义的错误。

解决方案 #

1. 补充PhantomJS系统依赖 #

在Dockerfile中添加PhantomJS运行所需的库：

RUN apt install -y libfontconfig1 libfreetype6 libx11-6 libxext6 libxrender1

2. （可选）替换兼容版本的PhantomJS #

若Sencha Cmd自带的PhantomJS仍存在兼容性问题，可手动安装2.1.1版本（与Sencha Cmd 7.4兼容）：

RUN curl -L https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 -o phantomjs.tar.bz2
RUN tar xjf phantomjs.tar.bz2
RUN mv phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/
RUN chmod +x /usr/local/bin/phantomjs
RUN rm -rf phantomjs.tar.bz2 phantomjs-2.1.1-linux-x86_64

3. 完整Dockerfile示例 #

整合后的Dockerfile如下：

FROM ubuntu:18.04
RUN apt update -y
RUN apt install -y git openjdk-8-jdk unzip curl libfontconfig1 libfreetype6 libx11-6 libxext6 libxrender1
# 若自带PhantomJS有问题，取消下方注释手动安装兼容版本
# RUN curl -L https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 -o phantomjs.tar.bz2
# RUN tar xjf phantomjs.tar.bz2
# RUN mv phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/
# RUN chmod +x /usr/local/bin/phantomjs
# RUN rm -rf phantomjs.tar.bz2 phantomjs-2.1.1-linux-x86_64
COPY cmd-7.4.0.39-linux-64-no_jre.zip .
RUN unzip cmd-7.4.0.39-linux-64-no_jre.zip
RUN chmod +x SenchaCmd-7.4.0.39-linux-amd64.sh
RUN ./SenchaCmd-7.4.0.39-linux-amd64.sh -q -a
RUN rm SenchaCmd-7.4.0.39-linux-amd64.sh cmd-7.4.0.39-linux-64-no_jre.zip

4. 验证修复 #

重新构建Docker镜像，启动容器后再次执行生产构建命令：

/root/bin/Sencha/Cmd/sencha app build production

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