前言

大家好，这是一个普通的程序员学习日志。总结了搭建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压缩包，预防传输过程的失败，导致资源丢失

linux搭建h5学习日记相关推荐

Linux:搭建深度学习环境配置教程
搭建深度学习环境 1. 下载与安装anaconda wget是一个下载文件的工具 wget https://repo.anaconda.com/archive/Anaconda3-2019.10-Li ...
Linux搭建深度学习环境使用指南
本文档归纳不收悉的linux知识点,自用终端美化:https://zhuanlan.zhihu.com/p/37195261(unix终端通用) 基础linux命令:https://blog.csd ...
Linux和Windows学习日记5
1.MarkdownPad2的HTML渲染错误解析:安装Awesomium 1.6.6 SDK. 2.WinMerge 解析:WinMerge是一款运行于Windows系统下的免费开源的文件比较/合 ...
【Linux】centos7学习日记-磁盘管理
目录磁盘管理一.存储介绍二.存储概览三.磁盘分区四.交换分区五.开机挂载六.磁盘矩阵RAID 七.文件链接八.LVM逻辑卷九.文件系统磁盘管理一.存储介绍 1. ①NAS ...
《Linux运维学习日记》第二篇：Linux的安装[CentOS 7.X]
一.各硬件装置在Linux中的文件名因为在Linux中,所有东西都是一个文件,其中就包括了硬件设备,所以各硬件设置在Linux中的文件名如下图所示(更多Linux内核支持的硬件设备与文件名可以到 h ...
【linux】centos7学习日记-文件查找
which 只能查询命令 [root@localhost ~]#which rpm whereis 可以查询命令和配置文件的位置 [root@localhost ~]#whereis rpm ...
【Linux Mint 深度学习开发环境搭建】开发软件安装
系列文章目录第一章 Linux mint 深度学习开发环境搭建之Nvidia显卡相关软件安装第二章 Linux mint 深度学习开发环境搭建之开发软件安装第三章 Linux mint 深度学习 ...
Linux学习日记之文件权限
Linux学习日记之文件权限 2021-2-19 一.查看文件权限 1.查看当前目录下的文件(只显示文件名) ls 2.查看当前目录下的文件(使用较长格式列出文件) 不妨以第二行为例,来看一看这些字符 ...
liunx学习日记（一）---Linux系统的安装
Linux学习日记(一)-Linux系统的安装一.什么是Linux系统? Linux是一个优秀的操作系统,它是一个源代码开放的操作系统,并且可以在简单且硬件成本低廉的环境下运行.Linux如何产生的 ...

linux搭建h5学习日记

linux系统搭建前端h5和jenkins一键部署的学习日志

前言