前言

大家好，这是一个普通的程序员学习日志。总结了搭建h5页面至linux 服务器，并开通访问权限过程中，对新手可能有用的技术要点和遇到的问题以及解决方案，希望各位看官看后能有收获。

搭建流程

1、进入目标服务器linux系统，创建好目录文件并给予root用户最高操作权限，方便jenkins打包：

mkdir /data/h5/目标文件夹名
chmod -R 777 /data/h5/目标文件夹名

2、jenkins 编写脚本语言：拉远程代码仓库+分支配置+执行脚本语言+执行后的操作

3、目标服务器的linux系统 nginx 域名申请和请求转发的配置

jenkins一键部署

Jenkins–H5前端部署自动化（Jenkins在Linux系统）

由于H5前端打包需要用到npm，所以Jenkins服务器需要先安装好nodejs及npm

所幸jenkins已经帮我们准备好了各类脚本语言，我们只需要提供node版本和输出目录即可

Job工程配置及脚本

一、参数配置：

git参数配置（远程仓库+构建分支）

二、构建步骤

执行命令:

#!/bin/bash
remove_ip=0.0.0.0 (目标服务器ip地址)
# h5打包并压缩，压缩文件名自定义
cnpm install
npm run build:dev
cd dist
zip -q -r test.zip * 
#传输h5压缩包
sudo ssh -p 22 $remove_ip  "rm -rf /data/apps/目标文件名/*"
find -name test.zip -exec sudo scp  -P 22  {} $remove_ip:/data/apps/目标文件名/  \;
#解压
sudo ssh -p 22 $remove_ip  "unzip -o /data/apps/目标文件名/test.zip -d /data/apps/目标文件名"

Nignx转发规则配置

域名配置

域名这里是直接找运维申请的，以test.domain.com 为例：

h5根目录访问规则:

server {
        listen 80;
        server_name test.domain.com;
        location / {
                alias  /data/apps/目标文件名/;
                index  index.html;
        }
}

index.html为h5页面根目录入口

alias 设置域名和指定的根目录映射关系

默认页面跳转的设置

location / {
                try_files $uri $uri/ /index.html;
}

设置以上规则，若被访问文件不存在时，默认会跳转至以上设置的默认index.html文件

遇到的问题及解决方案:

1、nginx配置的域名对应下的根目录，不能是在root目录下，否则会出现无权限访问403提示，所以改用/data 或者其他有权限访问的目录即可

2、npm打包一般要在本地环境预演一下，如打包时间过长，会影响jenkins服务器性能和其他条线的工作进度

3、打包后传输压缩包前，可以先备份一下当前的h5压缩包，预防传输过程的失败，导致资源丢失