阿里云-云效流水线部署RuYi前端docker镜像

阿里云-云效流水线部署RuYi前端镜像

一、ruoyi-vue目录下创建dockerfile文件

# 构建阶段
FROM node:14 as build-stage

# 设置工作目录
WORKDIR /app

# 复制 package 文件
COPY package*.json ./

# 安装依赖（使用淘宝镜像加速）
RUN npm install --registry=https://registry.npmmirror.com

# 复制所有文件
COPY . .

# 构建生产环境应用
RUN npm run build:prod

# 生产阶段
FROM nginx:alpine as production-stage

# 复制自定义nginx配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

# 从构建阶段复制构建好的文件
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露80端口
EXPOSE 80

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

二、代码仓

三、进入ruoyi前端代码 -> 点击左侧的流水线

四、新建流水线

五、选择 node.js -> 构建镜像并推送 -> 创建

六、点击“添加流水线源” 会默认选择代码仓

七、可以删除单元测试

八、构建镜像

8.1、删除掉默认的任务步骤（镜像构建并推送至ACR个人版）

8.2、选择默认环境 -> 添加步骤

8.3、选择构建 -> 镜像构建并推送至阿里云镜像仓库个人版

8.4、选择服务连接 （如果没有可以添加）

8.5、创建个人容器

8.5.1、阿里云主页面 搜索容器ACR

8.5.2、这里我选择的创建个人版

8.5.3、创建容器

8.6、这里的仓库配置刚才的容器地址

8.7、点击保存运行