115 lines
3.1 KiB
Docker
115 lines
3.1 KiB
Docker
# 构建阶段
|
|
FROM node:18-alpine as build-stage
|
|
|
|
# 切换 Alpine 镜像源为阿里云
|
|
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
|
|
|
|
# 设置工作目录
|
|
WORKDIR /app
|
|
|
|
# 设置环境变量
|
|
ARG NODE_ENV
|
|
ENV NODE_ENV=${NODE_ENV}
|
|
|
|
# 添加构建时间戳，用于破除缓存
|
|
ARG BUILD_TIMESTAMP=$(date +%s)
|
|
ENV BUILD_TIMESTAMP=${BUILD_TIMESTAMP}
|
|
|
|
# 输出构建环境信息
|
|
RUN echo "Building for environment: ${NODE_ENV}"
|
|
RUN echo "Build timestamp: ${BUILD_TIMESTAMP}"
|
|
|
|
# 安装 pnpm
|
|
RUN npm install -g pnpm
|
|
|
|
# 设置 pnpm 镜像
|
|
RUN pnpm config set registry http://mirrors.cloud.tencent.com/npm/
|
|
|
|
# 复制依赖文件
|
|
COPY package.json ./
|
|
|
|
# 安装依赖
|
|
RUN pnpm install && \
|
|
echo "Installed dependencies:" && \
|
|
pnpm list -g
|
|
|
|
# 安装 webpack 和 babel 相关依赖以及 Ant Design 图标
|
|
RUN pnpm add -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env babel-loader css-loader style-loader html-webpack-plugin vue-loader@17 @vue/compiler-sfc && \
|
|
pnpm add ant-design-vue@3 @ant-design/icons-vue vue@3 vue-router@4 vuex@4 axios
|
|
|
|
# 确保babel配置文件存在
|
|
RUN echo '{ "presets": ["@babel/preset-env"] }' > .babelrc
|
|
|
|
# 复制项目文件
|
|
COPY . .
|
|
|
|
# 创建或更新环境文件
|
|
RUN echo "VUE_APP_API_URL=${API_URL:-/api}" > .env.production
|
|
|
|
# 显示安装的依赖
|
|
RUN echo "Installed dependencies:" && pnpm list
|
|
|
|
# 构建应用
|
|
# 根据环境变量选择构建命令
|
|
RUN if [ "${NODE_ENV}" = "production" ]; then \
|
|
pnpm run build:prod; \
|
|
elif [ "${NODE_ENV}" = "testing" ]; then \
|
|
pnpm run build:test; \
|
|
else \
|
|
pnpm run build:dev; \
|
|
fi
|
|
|
|
# 生产阶段
|
|
FROM nginx:stable-alpine as production-stage
|
|
|
|
# 安装基础工具
|
|
RUN apk add --no-cache bash curl net-tools iputils
|
|
|
|
# 创建必要的目录并设置权限
|
|
RUN mkdir -p /var/cache/nginx/client_temp && \
|
|
mkdir -p /var/cache/nginx/proxy_temp && \
|
|
mkdir -p /var/cache/nginx/fastcgi_temp && \
|
|
mkdir -p /var/cache/nginx/uwsgi_temp && \
|
|
mkdir -p /var/cache/nginx/scgi_temp && \
|
|
mkdir -p /var/run && \
|
|
mkdir -p /usr/share/nginx/html
|
|
|
|
# 删除默认配置
|
|
RUN rm -f /etc/nginx/conf.d/default.conf
|
|
|
|
# 复制自定义nginx配置
|
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
|
|
# 复制构建文件
|
|
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
|
|
|
# 设置权限 - 确保nginx用户可以访问所有需要的目录和文件
|
|
RUN chown -R nginx:nginx /var/cache/nginx && \
|
|
chown -R nginx:nginx /var/run && \
|
|
chown -R nginx:nginx /usr/share/nginx/html && \
|
|
chown -R nginx:nginx /etc/nginx/conf.d && \
|
|
touch /var/run/nginx.pid && \
|
|
chown nginx:nginx /var/run/nginx.pid && \
|
|
chmod -R 755 /var/cache/nginx && \
|
|
chmod -R 755 /var/run && \
|
|
chmod -R 755 /usr/share/nginx/html && \
|
|
chmod -R 755 /etc/nginx/conf.d
|
|
|
|
# 创建启动脚本
|
|
RUN echo '#!/bin/sh\n\
|
|
echo "=== 容器网络信息 ==="\n\
|
|
ip addr\n\
|
|
echo "=== Nginx 配置检查 ==="\n\
|
|
nginx -t\n\
|
|
echo "=== 启动 Nginx ==="\n\
|
|
nginx -g "daemon off;"\n\
|
|
' > /start.sh && chmod +x /start.sh
|
|
|
|
# 暴露端口
|
|
EXPOSE 80
|
|
|
|
# 使用root用户运行nginx
|
|
USER root
|
|
|
|
# 启动nginx
|
|
CMD ["/start.sh"] |