阿里云效CI/CD系列（三）docker形式部署ruoyi前端项目案例

前面《阿里云效CI/CD系列（二）jar形式部署springboot项目案例（ruoyi后端）》我们演示了使用jar的形式部署ruoyi后端的项目，凑个整，我们这里使用docker的形式部署下ruoyi-vue前端的项目。

一般来说前端的项目部署比较简单，主要是使用docker进行部署，因为需要集成nginx。下面我们来演示下使用docker的形式部署前段。

一、编写dockerfile

在ruoyi的前后端分离版本里面，他没有编写Dockerfile文件，因此我们需要在ruoyi-ui项目下创建一个Dockerfile文件，然后把下面的内容填写进去

# 使用Node.js 14作为构建环境
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/node:14-alpine as build-stage

# 设置工作目录
WORKDIR /app

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

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

# 复制源代码
COPY . .

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

# 生产阶段 - 使用轻量级nginx镜像
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:alpine3.20 as production-stage

# 设置时区
#RUN apk add --no-cache tzdata && \
#    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
#    echo "Asia/Shanghai" > /etc/timezone && \
#    apk del tzdata

# 创建nginx配置目录
RUN mkdir -p /etc/nginx/conf.d

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

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

# 暴露80端口
EXPOSE 80

# 以非root用户启动nginx
CMD ["nginx", "-g", "daemon off;"]

整个文件示例图如下：

二、配置nginx文件

前面我们提到，前段的项目打包docker镜像的话，需要一个nginx，所以这里咱们需要配置一个nginx的conf文件，所以在ruoyi-ui文件夹下创建一个nginx的文件夹，然后在nginx文件夹下创建一个deffault.conf文件，把下面的内容复制进去

server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    # 开启gzip压缩
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/xml+rss text/xml image/svg+xml;
    gzip_vary on;
    gzip_disable "msie6";

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # 处理Vue路由 - SPA支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 处理API代理（如果需要连接后端）
    location /prod-api/ {
        proxy_pass http://192.168.31.234:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 30s;
        proxy_send_timeout 30s;
    }

    # 错误页面
    error_page 404 /index.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    # 安全头
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

以上两步修改完之后，咱们把代码提交到代码仓库中去。

三、创建流水线

接下来进入到阿里云效，创建一个流水线，这里可以选择空白的即可，只有简单的3部，分别是：

1、添加流水线源
2、构建镜像
3、部署

由于前面的文章我们介绍了很多填写的配置，所以这里我们不做过多的介绍，直接上截图。

1）添加流水线源

这里主要是添加当前ruoyi的git仓库地址，不做过多介绍，配置直接看图

2）构建镜像

这里需要注意一个地方，ruoyi项目下载之后，这里的dockerfile文件在ruoyi-ui目录下，所以需要修改这里的地址，千万要记住，详情看图

在下面的dockerfile路径的地方，需要把ruoyi-ui给添加上

3）docker部署

这里主要是配置需要部署的服务器信息和docker命令，

整个docker命令比较简单，直接照抄即可

到此我们的ruoyi前端项目集成+部署就完成了。

四、运行测试

最后就是把它运行和测试一下，直接运行

可以看到全部执行成功，然后去服务器上可以看到对应的docker容器已经部署好了

然后访问下38080端口

可以看到这里验证码出现了，说明访问到了后端，直接登录也能登录进去

到此我们使用阿里云效部署ruoyi前端项目就完成了。

备注：

1、这里源代码里面我们添加了nginx的default.conf文件，这里后端地址，大家在部署的时候需要改成自己实际环境中能访问到的地址哦