jenkins 搭建 uniapp h5部署服务

项目中需要使用 jenkins 搭建 uniapp h5部署服务，初次接触，踩了很多坑，记录下

主要分为两步骤：

1.创建uniapp打包环境

由于创建打包环境的步骤有手动确定步骤，所以不能通过jenkins自动创建，需要先到目录中手动配置环境

2.搭建jenkins自动化部署任务

把jenkins工作目录配置为刚才的环境目录 src下，并进行后续的打包步骤

参考文档：

https://www.jianshu.com/p/9345321c9980

一、创建uniapp打包环境

1.安装vue/cli

#进入项目目录
cd /var/jenkins_home/workspace/uniapp-compile
#安装vue/cli
npm install -g @vue/cli --registry=http://registry.npmmirror.com

从警告信息可以看出 -g命令被废弃了，改成这样更好

npm install --location=global @vue/cli  --registry=http://registry.npmmirror.com

2.创建uniapp打包容器（uni-cli）

# 选择默认模板
vue create -p dcloudio/uni-preset-vue uniapp-compile

结果报错了

我是通过docker运行的 jenkins环境，这里安装完找不到vue了

就在我一筹莫展的时候，找到了这个 https://blog.csdn.net/transtanv/article/details/133673925

问题：执行npm install --global vue-cli 后使用vue出现 -bash: vue: command not found

原因：需要手动设置npm 全局路径及node_modules的路径

步骤：

1.查看npm全局路径：npm root -g

2.得出/usr/local/node/lib/node_modules

3.根据全局路径设置$PATH

vue路径找到了

后面配置环境变量步骤懒得做了，所以直接写死路径，也是可行的

然后执行命令创建uniapp打包容器（uni-cli）

/data/nodejs/nodejs/lib/node_modules/@vue/cli/bin/vue.js create -p dcloudio/uni-preset-vue  uniapp-compile --registry=http://registry.npmmirror.com

这里会跳出uni安装界面，按提示选择默认模板安装即可

有时候会因为网络问题无法安装，可以先下载uni安装包，再指定本地路径安装的方式

参考文档：https://blog.csdn.net/lxb1113220682/article/details/128390601

解决方式

创建cli工程，会远程下载 dcloudio/uni-preset-vue，拉取失败时，可以通过手动下载来创建项目。

模板地址：GitHub - dcloudio/uni-preset-vue: uni-app preset for vue

下载后文件放入的文件夹

下载后使用如下命令创建项目，其中test就是我的项目名称。命令为vue create -p GitHub上下载项目的路径项目名称

执行命令类似于

/data/nodejs/nodejs/lib/node_modules/@vue/cli/bin/vue.js create -p ./uni-preset-vue-master  uniapp-compile

至此uniapp 编译环境搭建完成

二、搭建jenkins自动化部署步骤任务

这里只记录要点

1.指定jenkins工作目录为uniapp打包环境下的src目录，因为uniapp编译源码默认在src目录

由于src目录下有默认文件

这里配置自动清空

2.配置编译命令

#npm install --location=global @vue/cli  --registry=http://registry.npmmirror.com
#/data/nodejs/nodejs/lib/node_modules/@vue/cli/bin/vue.js -V
#/data/nodejs/nodejs/lib/node_modules/@vue/cli/bin/vue.js create -p dcloudio/uni-preset-vue  uniapp-compile
cd ..
npm i -D stylus less sass stylus-loader less-loader --registry=http://registry.npmmirror.com --legacy-peer-deps
yarn build:h5

cp -f src/.dockerignore .
docker build  -f src/Dockerfile -t 10.30.30.114/$REGISTRY/$APP_NAME:v0.$BUILD_NUMBER .

docker login -u admin -p xxx 10.30.30.114
docker push 10.30.30.114/$REGISTRY/$APP_NAME:v0.$BUILD_NUMBER
docker rmi 10.30.30.114/$REGISTRY/$APP_NAME:v0.$BUILD_NUMBER

编译命令详解：

（1）前三个为搭建uniapp编译环境，由于需要手动选择安装，故注释掉了

（2）cd ..为需要在编译环境的根目录进行编译而不是src里面

（3）npm i -D 为运行 yarn build:h5报的错，一般少什么装什么就可以

安装缺少组件参考文档：https://blog.csdn.net/weixin_49066399/article/details/137643889

（4）cp -f 为拷贝git目录里的 .dockeringnore到编译目录，主要为了制作docker镜像的时候屏蔽 node_modules文件夹

（5）docker build -f 编译docker镜像命令

dockerfile

这里编译完项目之后，生成的文件在 dist/build/h5 目录下

FROM nginx
COPY dist/build/h5 /usr/share/nginx/html
ADD src/public/default.conf /etc/nginx/conf.d/default.conf
RUN chmod -R 755 /usr/share/nginx/html

default.conf

主要是加了 try_files

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

关于try_files

参考文档：https://www.cnblogs.com/niuben/p/18217185

nginx 配置 vue History模式

需要加一行 try_files $uri $uri/ /index.html;，其中 /index.html 是你自己的目录中的入口文件

server {
        listen [::]:80 default_server;

        #root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                root /root/test/dist;
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.html;
        }
……
}

try_files file... uri

这个语法的意思是：

try_files 后面可以定义多个文件路径和最后一个作为内部跳转的 uri，其中文件路径是和 alias 和 root 两个指令合在一起构造而成；
多个文件以第一个找到的文件作为请求；
而文件后面以"/"结尾，会检查目录是否存在；
当文件都找不到时，就会去以最后一个uri进行内部跳转请求。

(6)最后为上传docker镜像到镜像仓库

3.部署命令配置

docker image prune -af


PORT=1053
docker login -u admin -p xxx 10.30.30.114
docker pull 10.30.30.114/$REGISTRY/$APP_NAME:v0.$BUILD_NUMBER
docker container stop $APP_NAME
docker container rm $APP_NAME  
docker run --restart always  --name $APP_NAME -p $PORT:80\
      -v /data/$APP_NAME/logs:/app/log/ \
      -d 10.30.30.114/$REGISTRY/$APP_NAME:v0.$BUILD_NUMBER;