手摸手打造前端Jenkins自动化部署趁着双十一入手了一个云端服务器，为了使自己写的前端代码更方便部署，便使用了 Jen

一、前言

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

本篇文章是对这次实践的一个记录，同时也希望通过这篇文章，能帮助更多的同学快速部署自己的前端代码，提高开发效率。

二、前期准备

首先肯定需要一台属于自己的服务器，可以是云端的也可以把旧的电脑当作服务器，我使用了腾讯云，操作系统为CentOS 7.5；
终端模拟软件，可以通过 ssh 访问到自己的服务器，我在 Windows 中使用了 Xshell 4 社区版来进行 ssh 连接，如果使用 Mac 或者 Linux 可以通过 Terminal 来进行操作，总之，只要可以连接到自己的服务器就行；
注册一个 Gitee 的账号，因为 GitHub 访问有些慢，所以我使用了 Gitee 作为自己的代码仓库；
最后，来杯热水，就开工吧。

三、部署过程

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

首先我们通过 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-keygen -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

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

八、总结

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

本次实践，完~

手摸手打造前端Jenkins自动化部署