Refactor and Add ARM Support

Author: springjk

Dockerfile

@@ -1,38 +1,48 @@
-ARG NODE_VERSION=latest
+# 显式指定 Node.js LTS 版本（建议固定如 20/18，避免版本波动，ARM 架构需匹配官方支持版本）
+ARG NODE_VERSION=20
 
+# 基于官方 Node 多架构镜像（slim 版轻量，自动适配 ARM/x86，无需额外配置架构）
 FROM node:${NODE_VERSION}-slim
 
-# system local config
-RUN true \
-  && ln -sf /usr/share/zoneinfo/PRC /etc/localtime
-
-RUN apt-get update \
-  && apt-get install -y \
-  # 命令行工具
-  zsh curl wget vim git
-
+# 1. 配置时区（避免时间相关问题，无额外依赖）
+RUN ln -sf /usr/share/zoneinfo/PRC /etc/localtime
+
+# 2. 安装核心工具集（curl/wget/vim/git/zsh）+ 清理缓存（修复注释位置：注释需在续接符 \ 之前）
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+        curl \ 
+        wget \ 
+        vim \
+        git \ 
+        zsh && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# 3. 安装 oh-my-zsh（zsh 扩展工具，使用官方脚本，适配 ARM 架构）
+# 注：|| true 避免脚本中非致命错误导致构建失败（如提示 Shell 切换）
 RUN wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh || true
 
-
+# 4. 配置三大包管理工具 + 国内源（核心需求，确保 ARM 环境依赖拉取加速）
 RUN true \
-  # npm china mirrors
-  && npm config set registry https://registry.npmmirror.com || true \
-  # fix yarn permission denied  https://github.com/nodejs/docker-node/issues/661
-  && chmod a+x /usr/local/bin/yarn \
-  # yarn china mirrors  https://github.com/nodejs/docker-node/issues/386
-  && yarn config set registry https://registry.npmmirror.com || true \
-  # install pnpm
-  && npm install -g pnpm \
-  && pnpm config set registry https://registry.npmmirror.com || true
-
-RUN apt-get clean autoclean
-
-RUN mkdir /workspace
-
+    # npm 配置 npmmirror 国内源
+    && npm config set registry https://registry.npmmirror.com || true \
+    # 修复 yarn 权限问题（官方预安装 yarn 可能存在执行权限不足，ARM 环境同样适用）
+    && chmod a+x /usr/local/bin/yarn /usr/local/lib/node_modules/yarn/bin/yarn.js || true \
+    # yarn 配置 npmmirror 国内源
+    && yarn config set registry https://registry.npmmirror.com || true \
+    # 全局安装 pnpm（Node 官方镜像默认不含，通过 npm 内置命令安装，ARM 兼容）
+    && npm install -g pnpm || true \
+    # pnpm 配置 npmmirror 国内源 + 优化存储（可选：减少重复依赖占用空间）
+    && pnpm config set registry https://registry.npmmirror.com || true \
+    && pnpm config set store-dir ~/.pnpm-store || true
+
+# 5. 基础环境配置（工作目录+数据卷，方便开发时挂载本地代码）
+RUN mkdir -p /workspace
 WORKDIR /workspace
-
 VOLUME /workspace
 
+# 6. 暴露常用端口（如前端 8080/后端 3000，根据项目需求调整，仅为声明作用）
 EXPOSE 8080
 
-CMD ["zsh"]
+# 7. 默认启动 zsh（符合工具集使用习惯，若需 bash 可改为 ["bash"]）
+CMD ["zsh"]

build-image.sh

@@ -3,6 +3,7 @@
 #### halt script on error
 set -xe
 
+# 1. 克隆代码（保持原逻辑）
 git clone https://github.com/springjk/web-dev-docker.git
 cd web-dev-docker
 
@@ -12,42 +13,56 @@ docker --version
 echo '##### Print environment'
 env | sort
 
-
-#### Build the Docker Images
-
-echo  build version is ${NODE_VERSION}
-
-
-docker build  --build-arg NODE_VERSION=${NODE_VERSION}  -t webdev .
-#####################################
-
-# push to docker hub
-echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
-
-docker tag webdev:latest ${DOCKER_USERNAME}/webdev:latest
-
-docker images
-
-docker push ${DOCKER_USERNAME}/webdev
-
+# 2. 定义关键变量（新增：指定需要支持的架构列表，如 ARM64 + x86_64）
+TARGET_ARCHITECTURES="linux/arm64,linux/amd64"  # 多架构列表（arm64对应ARM，amd64对应x86_64）
+DOCKER_HUB_REPO="${DOCKER_USERNAME}/webdev"     # Docker Hub 仓库地址
+ALIYUN_REPO="registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev"  # 阿里云仓库地址
+NODE_VERSION=${NODE_VERSION:-"latest"}          # 默认Node版本为latest
+
+echo "##### Build version: ${NODE_VERSION}, Target architectures: ${TARGET_ARCHITECTURES}"
+
+# 3. 配置 Docker Buildx（启用多架构构建能力）
+#  - 创建构建器实例（若不存在）
+#  - 启用构建器（切换到多架构构建模式）
+docker buildx create --name multiarch-builder --use || true
+# 加载 qemu 模拟器（用于跨架构构建，如在x86机器上构建ARM镜像）
+docker run --privileged --rm tonistiigi/binfmt --install all
+
+# 4. 多架构构建并推送至 Docker Hub（核心修改：用 buildx build --platform 指定多架构，--push 直接推送）
+# 推送 latest 标签（无论 Node 版本是否为 latest，都推送 latest 作为默认标签）
+docker buildx build \
+  --platform "${TARGET_ARCHITECTURES}" \  # 指定多架构
+  --build-arg NODE_VERSION="${NODE_VERSION}" \  # 传递 Node 版本参数
+  -t "${DOCKER_HUB_REPO}:latest" \  # Docker Hub latest 标签
+  --push .  # 直接推送（无需本地 tag，Buildx 会自动处理多架构镜像索引）
+
+# 若 Node 版本不是 latest/NA，额外推送版本标签（如 webdev:20）
 if [[ ${NODE_VERSION} != "latest" && ${NODE_VERSION} != "NA" ]]; then
-    # push build version
-    docker tag ${DOCKER_USERNAME}/webdev:latest ${DOCKER_USERNAME}/webdev:${NODE_VERSION}
-    docker push ${DOCKER_USERNAME}/webdev:${NODE_VERSION}
+    docker buildx build \
+      --platform "${TARGET_ARCHITECTURES}" \
+      --build-arg NODE_VERSION="${NODE_VERSION}" \
+      -t "${DOCKER_HUB_REPO}:${NODE_VERSION}" \  # 版本标签
+      --push .
 fi
 
+# 5. 多架构构建并推送至阿里云镜像仓库（逻辑与 Docker Hub 一致）
+docker buildx build \
+  --platform "${TARGET_ARCHITECTURES}" \
+  --build-arg NODE_VERSION="${NODE_VERSION}" \
+  -t "${ALIYUN_REPO}:latest" \
+  --push .
 
-# push to aliyun docker hub
-echo "$ALIYUN_DOCKER_PASSWORD" | docker login -u "$ALIYUN_DOCKER_USERNAME" --password-stdin registry.cn-hangzhou.aliyuncs.com
-
-docker tag webdev:latest registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:latest
-
-docker images
+if [[ ${NODE_VERSION} != "latest" && ${NODE_VERSION} != "NA" ]]; then
+    docker buildx build \
+      --platform "${TARGET_ARCHITECTURES}" \
+      --build-arg NODE_VERSION="${NODE_VERSION}" \
+      -t "${ALIYUN_REPO}:${NODE_VERSION}" \
+      --push .
+fi
 
-docker push registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev
+# 6. 验证推送结果（可选：查看仓库中的多架构镜像信息）
+echo "##### Check Docker Hub multi-arch image info"
+docker buildx imagetools inspect "${DOCKER_HUB_REPO}:latest"
 
-if [[ ${NODE_VERSION} != "latest" && ${NODE_VERSION} != "NA" ]]; then
-    # push build version
-    docker tag ${DOCKER_USERNAME}/webdev:latest registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:${NODE_VERSION}
-    docker push registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:${NODE_VERSION}
-fi
+echo "##### Check Aliyun multi-arch image info"
+docker buildx imagetools inspect "${ALIYUN_REPO}:latest"