从零开始用jenkins自动化部署Vue项目(包括域名配置,服务器部署等等)

        几个月前笔者从个人项目搭建,购买服务器,备案,nginx配置到pm2进程管理,最后用jenkins完成了项目的自动化构建发布。今天阿里云发来消息要在网站首页底部中间添加备案号,才再一次用到了之前的成果。特以此文,记录几个月前折腾的整个过程。

       1:第一步你需要一个github账号(jenkins需要配置项目远程地址),这里托管着我们的项目代码。没有的小伙伴可以去https://github.com这个官网上注册一个。然后创建一个仓库,下方是笔者自己个人的一些项目。下面以admin-template为例。

        2:第二步你需要下载一个git用来从本地把项目推往远程仓库。 下面是git的官方下载地址https://git-scm.com/downloads

下载完后自行进行本地部署。完了之后我们就可以在本地新建一个空文件夹,将远程的仓库利用git 克隆下来。这个时候开始在那个文件夹下创建文件,然后编写项目代码。代码写完后可以在你的项目目录下右键点击Git Bash Here进入git的命令行操作界面。将自己的项目推往远程仓库。

         下面是推送项目的截图。不熟悉git的朋友可以自行学习一下,下文会对用到的几个命令稍作解释。

        git pull 用来更新你的本地代码,这一步是将远程仓库的代码与你本地的进行同步(日常工作中提交代码前的更新代码这一步是必须要做的,在多人协同工作中,大家都会往一条分支上提交代码,如果代码不进行同步的话,在你提交代码的时候很容易出现冲突)。大家也看到了蓝色的(master)这个就是当前你所在的分支,由于是个人项目笔者就直接在主分支上提交了。日常工作中往往会有多条分支例如(test:测试分支,dev:作为master的备份,测试完成后功能分支先往dev合并代码,最后项目发版的时候再把dev合并到master上,finger: 开发当中的功能分支等等)。

        git add 用来把你修改或新增过的代码文件提交到暂存区,你可以指定提交文,也可以像笔者一样用点号(.)提交所有修改或新增过的文件。

        git commit 用来将暂存区的当前内容与描述更改的用户和日志消息一起存储在新的提交中。-m 后可以写你的日志消息。

        git push 最终会把你的提交推往远程仓库,这个时候没有代码冲突的话,你的远程代码就会更新了,在github上所属分支是会有所体现的。如下图所示,各个文件的提交记录都有所提现。所以提交代码的时候一定要写日志信息,这样便于后续的代码追踪,必要时的回退。git还有很多命令,大家可以自行学习一下,这里就讲到为止了。

 3:第三步我们开始去购买域名和服务器,然后申请备案。笔者用的是阿里云的相关服务。我们先进入阿里云官网,去购买域名。

 

 这里笔者选择了最便宜的一款域名后缀,反正不用于商用,主要是便宜。 有了域名之后你得再去买一个服务器,不然光有域名也没啥用。说到服务器,这里推荐轻量级应用服务器,或者是云服务器。轻量级应用服务器比较便宜,当然配置也低,在读学生是有优惠的。一般公司部署项目用的都是云服务器ECS,这个各方性能都很强。

云虚拟主机这个更便宜,如果你要用jenkins构建自动化项目就别选它,他没有能力做这个。笔者当时也是被便宜蒙了脑子,买了它,现在用它存放静态文件。为什么不行,我们看下面的工单,这是血与泪的教训,云虚拟主机不支持ssh,而这一点恰恰是jenkins部署需要的。

虚拟主机还有其他的问题比如虚拟主机都是没有开启ip直接访问的。

 

笔者的亲身经历告诉大家两个道理,第一就是买东西不能一味贪图便宜,事前需要做好充分的调研,这样可以少走冤枉路,少花冤枉钱。第二件事情就是有困难可以创建工单,向阿里云的售后工程师求助。笔者之前也是做了很多的调研,但是有些东西也只有用到的时候才会真正发现。本文就是本着少走冤枉路,少花冤枉钱的的理念和大家一起分享。

服务器购买到手之后先进行DNS解析,这是把你的域名和你服务器的IP地址关联起来的一步。

 解析完之后你仍然不能用过域名访问你的服务器内容,你还需要去进行备案,如下所示。

 

 

 备案的审核的时间比较长,尤其是管局审核,少则十几天,多则一个月,具体花几天就要看人品了。进入备案系统之后,会有详细的操作流程,也会有工作人员联系你求证一些东西。成功进行了dns解析和备案后你将会看到下面的信息。

 这个时候你可以随便往你的服务器上放项目代码了,也可以通过域名直接访问到服务器上的静态资源文件,比如下面的。

这是笔者那个云虚拟服务器上的静态资源文件。 

4: 第四步我们讲如何把文件放到服务器上,因为项目代码我们可以走jenkins自动化构建(过程复杂,使用次数多,所以我们要自动化),但是一些静态文件的上传用手动方式会更加合适(过程简单,使用次数少)。我们需要下载一款可以向远程服务器推送文件的软件,下面笔者选择了FileZilla 

安装完FileZilla之后,我们打开它。操作面板如下:

填完主机名,用户名,和密码端口之后你就可以点击快速链接,成功之后会如下图所示:

右边远程站点部分就是服务器上的文件。这个时候你可以去左边的本地站点选择文件,然后直接拖拽到右边就行了。比如我随便拖了一个文件,上传成功后会有信息展示,你也会看到远程站点多了一个文件。

这是笔者的云虚拟服务器,htdocs文件下的所有静态文件都可以通过域名访问,这是服务器自己就设置好的,我们不需要操心。

下面是刚刚拖过去的文件访问情况:

 这里为止我们就讲完了如何往服务器上推送文件。除了云虚拟服务器我们可以利用htdocs文件夹这一特性,其他的轻量应用服务器和云服务器ECS都需要我们自己去配置nginx来指定访问的目录映射。这个我们后面会讲。

5: 第五步我们需要一个客户端去链接我们的轻量应用服务器,以便我们可以方便的进入控制台去操作服务器。如下图你可以选择远程链接,这个时候会出现一个linux的操作面板。直接在网站中使用远程连接失败概率很大,这个时候你可以选择创建工单,向售后工程师求救。或者用客户端进入。

下面我们下载putty客户端,就是下面那个小东西:

成功部署完后我们双击putty进入他的操作面板:

 

写完相关信息,记得save一下保留当前配置,后面再进入的话只有load加载配置就行了,配置完后我们可以用open进入下一步:

 

按照提示输入完用户名和密码,我们就可以在这个linux面板 操作服务器了,比如新建文件,下载软件啊等等。这里需要有一点linux知识,不熟悉的朋友可以先去自行补充一下。

6:第六步下载jenkins。用putty连接好我们的远程服务器后,我们进入linux操作面板。这里我们可以自行选择如何安装jenkins,这里笔者是用了wget http://mirrors.jenkins.io/war/latest/jenkins.war这个指令去下载jenkins.war。下面是笔者新建了一个test目录展示一下下载过程的截图:

下文是笔者之前下完的jenkins.war,这里笔者将所有下载的资源都放入了/usr/local/src中,这个是个人习惯而已。

 jenkins下载完之后,还需要下载jdk,因为我们需要jdk去运行我们jenkins。这个大家自行去下载部署,看上面的截图笔者用的jdk是jdk-11.0.4版本。jdk下载完后就可以运行我们的jenkins了,下面是运行jenkins的命令:

                                  /usr/java/jdk-11.0.4/bin/java -jar /usr/local/src/jenkins.war --httpPort=8888

前面是你的jdk解压完之后的java所在路径 /usr/local/src/jenkins.war是你的jenkins.war 所在路径, httpPort是你的jenkins启动后的访问端口。这里笔者为了方便就把这个命令写成了一个脚本,后来发现还是不太方便,就把启动jenkins的指令设置成了全局命令,这样你无论在哪个文件夹下就都能快速的启动jenkins了。下面是笔者特地建了一个script目录用来存放脚本。

 

下面教大家怎么把命令设置成全局指令。

如上图所示执行命令 vim ~/.bashrc ,编辑这个文件,添加·alias,保存退出,然后source 更新这个文件。比如你要运行jenkins,只要输入jenk回车就行了,这就相当于在执行/usr/java/jdk-11.0.4/bin/java -jar /usr/local/src/jenkins.war --httpPort=8888这个命令了。这里笔者还写了一些操作nginx的全局指令,主要还是为了方便。注意改完文件之后一定要再用source更新一下,不然是不会生效的,命令如下source ~/.bashrc。

        这个时候我们用命令启动jenkins,成功之后还需要去服务器那里开通一下端口,不然是无法访问的,因为被防火墙拦截掉了。

如图所示,笔者直接把8000~8999的端口都开通了,我们的jenkins占用的端口是8888刚好在这个范围内。这个时候我们就可以在jenkins启动成功之后,通过服务器的IP+8888端口访问了。

 

如图所示就是成功访问到了我们的jenkins了。第一次安装jenkins的时候还需要去设置一下管理员,页面上会有相应的提示的。初始的密码在安装过程中会打印出来也可以去/root/.jenkins/secrets/initialAdminPassword这个文件下找 。

7:第七步我们开始配置jenkins。

我们选择自由风格的软件项目。 这里要配置的东西有点多,笔者会逐一讲解。

如上图进入配置页面,选择参数化构建,添加选项时选择 Git Parameter。如果没有Git Parameter这个选项,需要我们自己去jenkins的插件管理里面去下载相关的插件(位置在系统管理-->插件管理)。

 

 没有凭证的朋友请点击添加去添加一个。

接下来我们开始写构建脚本如下图所示:

这里简单说明一下脚本内容。echo Branch: $BRANCH 是输出所选的分支,会打印到控制台上。可以不写。笔者的前端项目放在了/workspace/web文件夹下,master,dev,test 对应着github上的分支,web下有这三个目录,需要提前创建。下面以$BRANCH为'origin/master'为例讲解。

 这里的脚本内容是根据你前端项目来编写的,这里笔者是用Vue脚手架搭的项目,所以项目需要进行打包。node_modules文件夹很大,为了提高打包速度,我们不会去删除它。项目打包完成之后,我们需要的文件都在dist文件夹下,所以这时我们把dist中的内容拷贝并复制到/workspace/dist/master(当前构建的是master分支)下,拷贝之前记得先删除该文件夹下的文件,因为文件覆盖有时候会无效,删除是最保险的。这一步完成后我们的jenki部署就完成了,记得点击保存和应用。然后我们可以去构建我们的项目了,如下图所示:

 

 

 

 

 项目构建成功之后是蓝色,构建失败是红色。

8: 第八步我们来配置nginx,让我们访问域名的时候可以访问到我们指定的网页文件。前面我们经过jenkins构建后的文件存放在

/workspace/dist/master 目录下我们的nginx配置的目的就是当访问网站域名的时候,可以访问到/workspace/dist/master/index.html文件。首先我们先下载nginx。下载完成后我们去修改nginx的配置文件。

下面是笔者nginx的配置文件:


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
    #server {
    #    listen      8711;
    #    server_name  shellcode.site1;
    #	rewrite ^/(.*) http://182.92.6.5:8888 permanent;
    # }
    server {
	listen      80;
	listen      443 default ssl;
        server_name  shellcode.site;
        #ssl on;
	ssl_certificate cert/2689225_shellcode.site.pem;
	ssl_certificate_key cert/2689225_shellcode.site.key;
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;   
	
        #charset koi8-r;

        #access_log  logs/host.access.log  main;        
	
        location / {
          root   /workspace/dist/master/;
          index  index.html index.htm;
        }

	location /jenkins/ {
          rewrite ^/(.*) http://182.92.6.5:8888 permanent;
        }

	location /api/ {
	  proxy_pass https://182.92.6.5:8008;
	}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

 配置完之后。我们就可以启动nginx了。之前我们把nginx的操作命令都封装成了全局命令忘记的朋友可以往上看‘把命令设置成全局指令。’这一步。我们用ng启动nginx,完成之后我们可以成功访问到我们的网站页面了。如下图:

到此位置我们的自动化构建就完成了。但是美中不足的就是,我们退出linux控制面板的时候 jenkins就停掉了,我们无法在通过IP+8888端口访问jenkins了。解决方法就是让jenkins 运行在后台,这个时候我们就需要pm2去做进程管理了。

9:第九步我们来用pm2做进程管理,让jenkins和nginx可以运行在后台。先下载pm2,下载成功之后我们用pm2 的指令去启动jenkins和nginx。

这个时候我们即使退出linux控制面板jenkins仍然会在后台运行了。大功告成。

        做个小小的总结,经历过这一次项目的自动化构建,里面最头大的地方就是各种配置,所以写下此文以后自己忘记了也可以过来看看。项目做好自动化,以后发版只要代码上传完,点击一下构建就完成了,这是工作中很重要的一环。我想没有人喜欢重复的工作,所以才出现了自动化构建。前期的配置的确很多,但是一旦完成就很香了。你说你有那精力去手动部署,自动化构建他能不香吗?本文虽然提到了所有自动化构建的过程,但还是有一些无关紧要的细节还是省略了。如果各位有什么疑问,可以在下方留言。

        最后说一句,大家请注意后面开发网站时一定要加备案号,并且提供跳转链接到工信部,不然可是要罚款的。

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值