阿里云-云效流水线部署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、点击保存运行