uniapp项目持续集成部署

日期：2024-07-22 分类：1 人气：274

uniapp项目打包一般使用Hbuilder，这个工具很方便，但是有一个缺点，不能使用命令行，因此做持续集成和持续部署的时候就不能用Hbuilder了。

因此持续集成的打包需要使用另一套方法`vue-cli`

先说结论吧：用vue-cli新建一套空的项目，打包时将uniapp项目的代码拷贝到新的项目中，在新项目上打包。

那接下来就说明一下准备工作。

#### 新建docker镜像用于打包

- 基于node基础镜像新建一个vue-cli环境
- 安装vue-cli
- 初始化项目，这一步要拉取项目，国外速度较慢，而且在初始化的时候要人机交互选择模版。
> 我的办法是将一个空的模版在本地建好，然后将这个项目上传到镜像中
- 安装依赖

Dockerfile如下
```
# 下载node镜像
FROM node:latest
# 新镜像构建成功以后创建指定目录存放打包文件
RUN mkdir /jar
RUN mkdir /html
# 设置工作目录
WORKDIR /html
# 安装vue-cli
RUN npm --version
RUN npm config set registry https://registry.npmmirror.com
# 删除旧版本
#RUN npm uninstall -g @vue/cli
# 安装新版本
# RUN npm install -g cnpm --registry=https://registry.npmmirror.com
RUN npm install -g @vue/cli
RUN vue -V
# 创建初始化项目
# RUN vue create -p dcloudio/uni-preset-vue#vite compile-base
# RUN npx degit dcloudio/uni-preset-vue#vite compile-base
COPY compile-base.zip /html/compile-base/
WORKDIR /html/compile-base
RUN unzip compile-base.zip
RUN npm install
```

镜像建好之后，上传到gitlab容器仓库中，这样我们在gitlib-ci中就可以使用我们这个镜像来打包了。

#### 使用镜像打包

- 基于镜像创建容器
- 指定标签和分支
- 将项目代码拷贝到上面新建的初始项目的src目录下
- 安装依赖，在这一步需要再次安装，在构建镜像的时候如果有些依赖可能没有安装，例如：sass（不要用node-sass）。
- 产物打包拷贝，在这一步将打包的产物拷贝到宿主机中
> 我的做法是使用gitlab-runner的volumn映射

此阶段的gitlab-ci如下：
```
build-app: # APP项目打包
  # 当前阶段的执行镜像，这是我们自己构建的镜像
  image: 192.168.1.33:5050/soochow/patrolfrontend
  # 属于上面定义的哪一个阶段
  stage: build
  # 是否允许失败，允许的话如果当前阶段运行失败还会继续执行下一个阶段
  allow_failure: false
  # 只在哪个分支生效
  only:
    - test-app
  # 这里就是你要选择哪个runner来执行了，填写我们创建runner时候指定的标签
  tags:
    - xuncha-backend-test
  # 运行脚本
  script:
    - cp -R LD-Patrol-App/* /html/compile-base/src/
    - cd /html/compile-base/src/
    - npm install
    - cd ../
    # 在安装一边依赖
    # - npm install node-sass@7.0.0
    - npm install sass
    - npm run build:h5
  # 打包的产物拷贝到/jar目录下，docker-runner配置/jar映射到宿主容器的目录
  after_script:
    - pwd
    - cd /html/compile-base/dist/build
    - tar -czf h5.tar.gz h5
    - mkdir -p /jar/xuncha-test/h5
    - cp h5.tar.gz /jar/xuncha-test/h5/h5.tar.gz
```

### 部署打包后的产物

这一步比较简单，基本原理就是文件的移动和解压，因此gitlab-runner选择的执行器为`shell`，上一步的执行器为`docker`，这是两个不同的执行器，使用tags区分执行器

此阶段的gitlab-ci如下：
```
deploy-app: # 部署服务
  stage: deploy
  # 只在哪个分支生效
  only:
    - test-app
  # 只有那个runner运行
  tags:
    - xuncha-backend-test-deploy
  script:
    # 删除原文件
    - cd /docker/nginx/html
    - rm -rf xuncha-test-app
    # 拷贝打包文件
    - cp /docker/ci-cd/compile/data/xuncha-test/h5/h5.tar.gz /docker/nginx/html
    # 解压
    - tar -xzvf h5.tar.gz
    - mv h5 xuncha-test-app
    # 删除临时包
    - rm -rf h5.tar.gz
```

### 鸣谢

- [简书](https://www.jianshu.com/p/9345321c9980)
- [csdn**gblfy**](https://blog.csdn.net/weixin_40816738/article/details/130236602)
- [安科网**歆萌**](https://www.ancii.com/ax8ndua4u/)
- [csdn**北秋zone**](https://blog.csdn.net/qq_45349018/article/details/139420333)
- [博客园**枫树湾河桥**](https://www.cnblogs.com/fswhq/p/16498857.html)

标签： gitlab nuniapp

上一篇：vscode使用Community Server Connector运行JDK1.8项目报错下一篇：cnpm镜像更改

uniapp项目持续集成部署

随便看看

留言