diff --git a/Dockerfile b/Dockerfile index 7693eed9c5d5373b277f7b4aba56a0ba9f769d58..53e0abeaae50eb1f8ca1af05438a73d209a5590d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,21 +1,64 @@ +# ==================== # 构建前端静态资源 -FROM harbor.jianmucloud.com:30003/n9e/node:16 as builder -RUN npm config set registry https://mirrors.cloud.tencent.com/npm/ +# ==================== +FROM harbor.jianmucloud.com:30003/n9e/node:16 as builder + +# 设置元信息 +LABEL maintainer="ai-liuys@outlook.com" \ + organization="浙江大学 ACES 实验室" \ + project="BridgeKube JOB Frontend" + +# 设置 npm 源为腾讯云，加快依赖安装 +RUN npm config set registry https://registry.npmmirror.com + +# 设置 npm 版本（可选） ENV NPM_VERSION 6.14.4 + +# 项目信息 +ENV PROJECT_NAME="BridgeKube JOB Frontend" \ + ORGANIZATION="浙江大学 ACES 实验室" \ + CREATED_BY="ai-liuys@outlook.com" + +# 添加所有文件并执行构建 ADD . /data + +# 设置工作目录 WORKDIR /data RUN npm i RUN npm run build -# 构建前端静态资源 + +# ==================== +# 部署到 Nginx +# ==================== FROM harbor.jianmucloud.com:30003/n9e/nginx:stable-alpine -## 设置工作目录 + +# 设置元信息 +LABEL maintainer="ai-liuys@outlook.com" \ + organization="浙江大学 ACES 实验室" \ + project="BridgeKube JOB Frontend" + +# 设置工作目录 WORKDIR /data/job/job-frontend + +# 复制前端构建的静态资源到 Nginx 容器 COPY --from=builder /data/dist/index.html /data/job/job-frontend/ COPY --from=builder /data/dist/static /data/job/job-frontend/static COPY --from=builder /data/dist/js /data/job/job-frontend/js -## 暴露 Nginx 服务的端口 + +# 设置时区为 Asia/Shanghai，并创建日志目录 +RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \ + echo 'Asia/Shanghai' > /etc/timezone && \ + mkdir -p /data/job/logs/job-frontend/nginx + +# 暴露 Nginx 服务端口 EXPOSE 80 -## 启动 Nginx 服务 + +# 设置运行时环境变量 +ENV PROJECT_NAME="BridgeKube JOB Frontend" \ + SERVICE_PORT=80 \ + ORGANIZATION="浙江大学 ACES 实验室" \ + CREATED_BY="ai-liuys@outlook.com" + +# 启动 Nginx 服务 CMD ["nginx", "-g", "daemon off;"] -RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' > /etc/timezone && mkdir -p /data/job/logs/job-frontend/nginx \ No newline at end of file diff --git a/Makefile b/Makefile index fec11261d7f7e884a1923959c8d848e075a5dba6..bba765cd29ef0e6b15853c9eb34e7b49bde1fc4c 100644 --- a/Makefile +++ b/Makefile @@ -1,15 +1,69 @@ +# ======================== +# 项目信息 +# ======================== +# 项目名称 PROJECT_NAME = job-frontend +# 镜像名称 IMAGE_NAME = $(PROJECT_NAME) +# 镜像仓库地址 REGISTRY = hub.jianmucloud.com:5000/jianmu +# ======================== +# 构建版本信息 +# ======================== +# 如果 CI_COMMIT_SHORT_SHA 未定义，使用 'dev' 作为默认标记 ifndef CI_COMMIT_SHORT_SHA - TAG = dev + TAG = dev else - TAG = ${CI_COMMIT_SHORT_SHA} + TAG = ${CI_COMMIT_SHORT_SHA} endif +# 用户与组织信息（可选） +ORGANIZATION = 浙江大学 ACES 实验室 +MAINTAINER = ai-liuys@outlook.com + +# ======================== +# 目标规则 +# ======================== +# 构建镜像 image: - docker build -t $(REGISTRY)/$(IMAGE_NAME):$(TAG) . + @echo "Building Docker image for $(PROJECT_NAME)" + @echo "Organization: $(ORGANIZATION)" + @echo "Maintainer: $(MAINTAINER)" + docker build \ + --label "maintainer=$(MAINTAINER)" \ + --label "organization=$(ORGANIZATION)" \ + --label "project=$(PROJECT_NAME)" \ + -t $(REGISTRY)/$(IMAGE_NAME):$(TAG) . +# 推送镜像 push: - docker push $(REGISTRY)/$(IMAGE_NAME):$(TAG) \ No newline at end of file + @echo "Pushing Docker image to $(REGISTRY)" + docker push $(REGISTRY)/$(IMAGE_NAME):$(TAG) + +# 清理本地镜像和临时文件 +clean: + @echo "Cleaning up local Docker images and temporary files..." + -docker image rm -f $(REGISTRY)/$(IMAGE_NAME):$(TAG) + -docker image prune -f + @echo "Clean up completed!" + +# 帮助信息 +help: + @echo "Makefile for managing Docker images for $(PROJECT_NAME)" + @echo "" + @echo "Available targets:" + @echo " image Build the Docker image with organizational metadata" + @echo " push Push the Docker image to the registry" + @echo " clean Remove the local Docker image and prune dangling images" + @echo " help Show this help message" + @echo "" + @echo "Environment Variables:" + @echo " TAG The tag for the Docker image (default: 'dev' or CI_COMMIT_SHORT_SHA)" + @echo " REGISTRY Docker registry URL" + @echo " IMAGE_NAME Docker image name" + @echo "" + @echo "Example usage:" + @echo " make image" + @echo " make push" + @echo " make clean" diff --git a/readme.md b/readme.md index f1097f6458f2a440e795c4a09a69d8ea4251bffb..e1d16cc1d566bce9451a8e63955da3e576acee3c 100644 --- a/readme.md +++ b/readme.md @@ -1,38 +1,91 @@ -job -=== +# BridgeKube JOB -## 使用 +## 简介 + +BridgeKube JOB 是一个基于 Vue.js 框架的前端项目，用于展示 BridgeKube 平台的功能和数据。 + +## 使用说明 ### 本地开发 -- 1，执行命令（本地启动http服务） +为了便于调试和开发，Job 提供了两种本地开发模式：HTTP 服务模式和 HTTPS 服务模式。 + +#### 1. 本地 HTTP 服务模式 +* 启动 HTTP 服务 ``` bash npm run dev ``` -- 需要在 /frontend 目录下面创建 .env.development 文件 + +* 环境文件配置 ``` +// 在项目的 /frontend 目录下创建一个名为 .env.development 的环境配置文件，并在其中配置 API 请求的域名，例如： // 配置 api 域名 AJAX_URL_PREFIX = "http://api.xxx.yyy.com" ``` -- 2，执行命令（本地启动https服务） +#### 2. 本地 HTTPS 服务模式 +* 启动 HTTPS 服务 ``` bash npm run dev-external ``` -- 需要在 /frontend 目录下面创建 .env.external 文件 + +* 环境文件配置 ``` -// 配置 api 域名 +// 在项目的 /frontend 目录下创建一个名为 .env.development 的环境配置文件，并在其中配置 API 请求的域名，例如： +// 配置 API 域名 AJAX_URL_PREFIX = "https://api.xxx.yyy.com" ``` +> 提示： 确保 .env.development 和 .env.external 文件正确配置了域名地址，以便与后端服务正常通信。 对于 HTTPS 模式，需要确保域名配置指向支持 HTTPS 的后端 API 服务。 -### 生产环境构建 +### 研发环境构建 +生产环境构建用于生成项目的静态资源文件，供部署到 Web 服务器上运行。 +* 构建生产环境资源 ``` bash - npm run build +``` + +* 输出内容 + 构建完成后，生成的静态资源文件会存储在 dist 目录下，包括： ``` +index.html：项目的入口 HTML 文件。 +/static：静态资源文件目录（如 CSS 和图片）。 +/js：打包生成的 JavaScript 文件。 +``` + +### 容器镜像编译构建 + +生产环境构建用于生成项目的容器镜像，供部署到容器平台（如 Docker 或 Kubernetes）上运行。需要在 Dockerfile 中配置相应的构建指令并且在特定的编译环境中进行镜像构建。 + +* 构建容器镜像 +```shell +make image +``` + +* 容器镜像推送 +```shell +make push +``` + +* 容器镜像清理 +```shell +make clean +``` + +### 注意事项 + +* Node.js 版本要求： 请确保使用支持的 Node.js 版本（建议 16.x 及以上）来运行项目。 +* 环境变量管理： 环境变量文件如 .env.development 和 .env.external 是项目的重要组成部分，用于配置运行时依赖的 API 域名。请根据环境的不同，正确设置这些变量。 +* 依赖安装： 项目首次启动前，需在项目根目录下执行以下命令安装依赖：npm install +* 构建优化： 生产环境构建过程中，项目会通过 Webpack 等工具对资源进行压缩和优化，以减小资源体积和提升加载速度。 + +### 支持和反馈 +* 如果在使用过程中遇到问题，请联系维护团队或提交问题到项目的 Issue 页面。 +* 维护团队联系方式： + * 组织: 浙江大学 ACES 实验室 + * 维护者: ai-liuys@outlook.com