5分钟打造前端Jenkins自动化部署

1、前言

趁着双十一入手了一个云端服务器，为了使本身写的前端代码更方便部署，便使用了 Jenkins 进行自动化部署。

本篇文章是对此次实践的一个记录，同时也但愿经过这篇文章，能帮助更多的同窗快速部署本身的前端代码，提升开发效率。

2、前期准备

• 首先确定须要一台属于本身的服务器，能够是云端的也能够把旧的电脑看成服务器，我使用了腾讯云，操做系统为CentOS 7.5；
• 终端模拟软件，能够经过 ssh 访问到本身的服务器，我在 Windows 中使用了 Xshell 4 社区版来进行 ssh 链接，若是使用 Mac 或者 Linux 能够经过 Terminal 来进行操做，总之，只要能够链接到本身的服务器就行；
• 注册一个 Gitee 的帐号，由于 GitHub 访问有些慢，因此我使用了 Gitee 做为本身的代码仓库；
• 最后，来杯热水，就开工吧。

3、部署过程

在正式实践以前，咱们先来了解一下整个自动化部署的流程。

1. 首先咱们经过 Jenkins 从代码仓库拉取代码；
2. 而后咱们对代码进行编译打包，以后将打包后的静态文件推送到部署的服务器（本文中 Jenkins 和部署服务器使用同一服务器）；
3. 在部署的服务器中，咱们经过 Nginx 进行反向代理，使用户能够进行访问。

了解了整个流程以后咱们就开始实践吧~

4、服务器配置

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

1. 若是以前使用 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
   复制代码

2. 安装 Jenkins；

   yum -y install jenkins
   复制代码

3. 启动 Jenkins，并设置为开机启动；

   systemctl start jenkins.service
   chkconfig jenkins on
   复制代码

   经过访问 IP地址:8080 来验证启动是否成功。
4. 进入Jenkins，查看初始密码，复制以后进入；

   cat /var/lib/jenkins/secrets/initialAdminPassword
   复制代码

5. 选择默认的install suggested plugins安装插件；
6. 建立 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-keygen -t rsa -C "user1@123.com"
复制代码

根据提示完成三次回车便可生成 ssh key， 经过 cat ~/.ssh/id_rsa.pub 便可查看服务器的公钥。

5、Gitee配置

5.1 建立代码仓库

建立代码仓库，上传本身的代码。

5.2 为仓库配置部署公钥

点击仓库的管理，在侧边栏选择部署公钥管理，点击添加公钥，复制4.7中的服务器公钥，进行添加。

6、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文件夹中看到咱们编译出来的静态文件了。

7、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
复制代码

7.5 访问咱们的公网IP，此时应该出现咱们的页面了

8、总结

在之后每次咱们修改代码提交以后，咱们均可以在 Jenkins 中进行自动部署了。

本次实践，完~