通过源码部署前端应用

2025-02-19 07:49:51

概述

在MSAP中接入您的应用进行发布,所支持的介质类型大体上可分为源码(码云等代码仓库)、制品(JAR/WAR包等)、镜像等,您可以按实际需求选择接入的方式。

为了帮助您快速体验如何在MSAP中通过制品部署通用应用。MSAP提供了前端VUEY应用(https://gitee.com/uset/mall-front.git),您可以将应用部署到指定的环境中。

本文介绍如何通过源码部署通用应用。

源码部署通用应用

前提条件

1. 开通MSAP,具体操作请参见2购买指南。

2. 创建环境,集体操作请参见4.5.1.2创建环境。

部署通用应用

1. 在左侧导航栏,系统管理 > 服务连接管理,新建服务链接。

用户名称/令牌密:2053106420@qq.com/e29dcbad2304963cae9182403463b47e

2. 在左侧导航栏,单击持续交付 > 应用管理。

3. 在应用管理页面单击新增按钮,应用分类选择通用应用。

4. 在应用基本信息页签应用来源选择源码仓库。

• 代码源:选择码云。

• 代码仓库地址:输入 https://gitee.com/uset/mall-front.git

• 服务连接:选择上一步创建的服务连接。

5. 进入应用详情页面,新增部署配置。

• 部署环境:选择一个环境,应用会发布到环境中关联的容器云服务引擎。

6. 进入应用详情页面,新增流水线。

编译:

• 构建环境:选择npm8。

• 构建命令:

npm i

npm run build

cd dist

tar zcvf html.tar.gz ./*

• 制品版本:输入版本号。

• 构建包名:html.tar.gz 

• 包路径:/dist

镜像构建:

• 构建包:html.tar.gz

• 标签:输入标签

• 基础镜像:nginx 1.22.1

• Dockerfile:

COPY html.tar.gz /usr/share/nginx/html

RUN cd /usr/share/nginx/html/ && tar -zxvf html.tar.gz

镜像部署:

• 部署环境:选择环境。

• 命名空间:选择命名空间。

• 部署配置:选择创建的配置。

• 实例个数:输入实例个数。

7. 执行流水线

选择master分支进行执行

8.结果验证,在终端访问接口,查看返回数据。进入终端

访问http://localhost接口,返回电商页面说明部署成功,即通用应用部署成功。


.s7xyyVLSczh