5分钟打造前端Jenkins自动化部署
趁着双十一入手了一个云端服务器，为了使自己写的前端代码更方便部署，便使用了 Jenkins 进行自动化部署。
本篇文章是对这次实践的一个记录，同时也希望通过这篇文章，能帮助更多的同学快速部署自己的前端代码，提高开发效率。
二、前期准备
CentOS 7.5
三、部署过程
在正式实践之前，我们先来了解一下整个自动化部署的流程。
- 首先我们通过 Jenkins 从代码仓库拉取代码；
- 然后我们对代码进行编译打包，之后将打包后的静态文件推送到部署的服务器（本文中 Jenkins 和部署服务器使用同一服务器）；
- 在部署的服务器中，我们通过 Nginx 进行反向代理，使用户可以进行访问。
了解了整个流程之后我们就开始实践吧~
四、服务器配置
4.1 设置用户
首先我们通过 ssh 连接服务器，通常第一次使用的账号都为 root 账号，我们最好再创建新的用户并赋予新用户 sudo 权限。
adduser user1 # 1.创建用户user1 passwd user1 # 2.设置user1的密码 chmode -v u+w /etc/sudoers # 3.增加sudoers文件的写权限，默认为只读权限 vi /etc/sudoers # 4.修改sudoers文件，按i进入编辑模式，找到下面对应行，进行修改，修改完成后，按esc推出编辑模式，并输入 :wq 保存退出 ----------------------------------------------------------------------------------- ## Allow root to run any commands anywhere root ALL=(ALL) ALL user1 ALL=(ALL) ALL （添加这一行） ----------------------------------------------------------------------------------- chomd -v u-w /etc/sudoers # 5.删除sudoers的读写权限 复制代码
现在我们就可以使用用户 user1 进行登录了，并且 user1 拥有了 sudo 权限。
4.2 安装 Java
通过以下命令进行 Java 的安装，通过 javac 命令可以验证安装是否成功。
yum -y install java-1.8.0-openjdk-devel 复制代码
4.3 安装 Jenkins
- 如果之前使用 Jenkins 导入过 key，忽略此步骤，如果第一次安装则输入如下命令；
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key 复制代码
- 安装 Jenkins；
yum -y install jenkins 复制代码
- 启动 Jenkins，并设置为开机启动；
systemctl start jenkins.service chkconfig jenkins on 复制代码
通过访问IP地址:8080来验证启动是否成功。 - 进入Jenkins，查看初始密码，复制之后进入；
cat /var/lib/jenkins/secrets/initialAdminPassword 复制代码
- 选择默认的
install suggested plugins安装插件； - 创建 Jenkins 用户。
4.4 配置 Jenkins 权限
现在如果在 Jenkins 中执行 Shell 脚本，Jenkins 并不具备相应权限，需要 sudo vi /etc/sysconfig/jenkins ，找到 JENKINS_USER 并将其修改为 root。
JENKINS_USER="root" 复制代码
之后，修改 Jenkins 相关文件夹用户权限。
chown -R root:root /var/lib/jenkins chown -R root:root /var/cache/jenkins chown -R root:root /var/log/jenkins service jenkins restart 复制代码
4.5 安装 Git
因为需要从 git 仓库拉取代码，所以需要安装 git。
sudo yum install git 复制代码
4.6 安装 node
因为需要对前端代码进行构建，需要用到 npm，所以需要对 node 进行安装，默认安装的node版本会比较低，可以使用 nvm 安装高版本的 node，本文不再赘述。
sudo yum install nodejs 复制代码
4.7 生成部署用的 ssh 公钥
因为从 Gitee 进行部署需要配置对应的部署公钥，所以先生成对应公钥。
ssh-kengen -t rsa -C "user1@123.com" 复制代码
根据提示完成三次回车即可生成 ssh key， 通过 cat ~/.ssh/id_rsa.pub 即可查看服务器的公钥。
五、Gitee配置
5.1 创建代码仓库
创建代码仓库，上传自己的代码。
5.2 为仓库配置部署公钥
点击仓库的 管理 ，在侧边栏选择 部署公钥管理 ，点击 添加公钥 ，复制4.7中的服务器公钥，进行添加。
六、Jenkins配置
第一步：点击左侧边栏 New Item 新建项目；
ok
按钮；
Source Code Management 中，选择
Git ，输入对应的仓库地址，并在
Branches to build
中填写需要编译的分支；
第四步：在 Build Environment 中选中 Provide Node & npm bin/ folder to PATH ；
Build 中选择
Execute shell
；
第六步： 编写 shell 脚步，我为了方便起见，只是安装了以下npm包，然后进行编译，最后将编译出来的dist文件夹移动到了 /work 中；
build
进行编译，成功之后应该可以在/work文件夹中看到我们编译出来的静态文件了。
七、Nginx配置
7.1 安装Nginx
sudo yum install nginx -y 复制代码
7.2 通过 nginx 命令启动Nginx
此时，访问 IP 地址会显示 Nginx 的测试页面。
7.3 配置 nginx.conf 文件
通过 sudo vi /etc/nginx/nginx.conf 进行编辑，为方便起见，主要修改了 server 。
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /work/dist; # 编译出的静态文件的地址
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
复制代码
7.4 重启Nginx
修改完成之后，我们还需要做以下两步操作。
sudo nginx -t // 验证书写是否正确 nginx -s reload // 重启Nginx 复制代码
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
