使用Tekton在OpenShift 4.13部署React应用遇缓存目录权限问题

问题根源 #

OpenShift默认以随机UID运行容器，你的镜像中npm全局缓存目录/.npm属于root用户，随机运行用户没有读写权限，启动时触发权限错误，进而引发CrashLoopBackOff。你之前仅设置了/app目录权限，未处理/.npm目录的权限问题。

修复方案 #

方案1：将npm缓存目录指定到可写工作目录 #

修改Dockerfile，把npm缓存目录指向/app/.npm，复用你已设置的/app目录组权限（组0可读写），让随机用户正常访问缓存：

# Use an official Node.js image as the base
FROM node:alpine

# Set the working directory in the container
WORKDIR /app

# 指定npm缓存目录到当前工作目录，规避全局目录权限问题
ENV NPM_CONFIG_CACHE=/app/.npm

RUN npm cache clean --force

# Copy the package.json and package-lock.json files
COPY --chown=node:node package*.json ./

# Install the dependencies
RUN npm install

# Copy the entire project directory into the container
COPY --chown=node:node . .

# Build the React app
RUN npm run build

RUN npm cache clean --force

# Set ownership and permissions for the app directory
RUN chgrp -R 0 /app && chmod -R g=u /app

# 切换到非root用户（OpenShift会覆盖为随机UID，保留组权限）
USER node

# Set the command to run the application
CMD ["npm", "start"]

方案2：提前修复全局/.npm目录权限 #

若不想修改缓存目录，可在构建镜像时直接调整/.npm目录权限，让组0拥有读写权限：

# Use an official Node.js image as the base
FROM node:alpine

# Set the working directory in the container
WORKDIR /app

# 提前创建并设置/.npm目录权限，确保组0可读写
RUN mkdir -p /.npm && chgrp -R 0 /.npm && chmod -R g=u /.npm

RUN npm cache clean --force

# Copy the package.json and package-lock.json files
COPY --chown=node:node package*.json ./

# Install the dependencies
RUN npm install

# Copy the entire project directory into the container
COPY --chown=node:node . .

# Build the React app
RUN npm run build

RUN npm cache clean --force

# Set ownership and permissions for the app directory
RUN chgrp -R 0 /app && chmod -R g=u /app

USER node

# Set the command to run the application
CMD ["npm", "start"]

生产环境优化建议 #

npm start是React开发服务器，不适合生产环境。建议构建静态文件后，用nginx镜像部署，既解决权限问题又提升性能：

# 构建阶段
FROM node:alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
# 复制构建好的静态文件到nginx默认目录
COPY --from=builder /app/build /usr/share/nginx/html

# 设置nginx目录权限适配OpenShift随机UID
RUN chgrp -R 0 /usr/share/nginx/html /var/log/nginx /var/cache/nginx && \
    chmod -R g=u /usr/share/nginx/html /var/log/nginx /var/cache/nginx

# 暴露端口
EXPOSE 8080

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

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