目 录CONTENT

文章目录

前端项目自动化部署(Docker+Nginx+Jenkins)

俊阳IT知识库
2023-03-16 / 0 评论 / 9 点赞 / 1,773 阅读 / 2,166 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6899002437614223368
欢迎访问😃,有任何问题都可留言评论哦~

前言

随着devops的发展,前端部署变得越来越简单,可控性也越来越高,本文基于docker🐳+nginx+jenkins来实现前端自动化部署流程,具体实现效果为开发人员在本地开发,开发push提交代码到指定分支,😊自动触发jenkins进行持续集成和自动化部署。部署完成后会收到邮件的通知,构建成功后会将打包后的文件上传到服务器,通过nginx反向代理展现页面。构建失败则打印出错误日志。而docker🐳是我们整个部署方案中很重要的一块,由docker构建镜像,保证了环境的统一🐂🍺。

部署目标

  • 搭建docker🐳、nginx、jenkins环境
  • 配置docker-compose.yml

搭建环境

本文选用centos7云服务器

deploy-docker-nginx-jenkins-1

docker环境

docker的具体使用可以参考Docker总结(命令、镜像、容器、数据卷、DockerFile、网络、Compose)

安装步骤可以参考官网,很简单:官网文档
或者参考我的文章:CentOS 安装docker & docker-compose

安装成功后,执行docker -v

如果出现一下内容,则表示安装成功

deploy-docker-nginx-jenkins-12

sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker // 启动docker

安装docker-compose

一个完整的应用程序,往往都不是一个容器组成的,而是通过容器组成一个容器群。一个容器群的搭建需要执行太多命令,更重要的是需要考虑太多应用和容器间的依赖关系处理,是一波令人头大的操作。docker-compose正是解决多个容器之间管理的问题。

输入命令安装docker-compose,安装完成后提升权限。

# 安装
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 提升权限
sudo chmod +x /usr/local/bin/docker-compose

执行完上面命令后,不出意外输入docker-compose -v显示如下页面

deploy-docker-nginx-jenkins-23

如果报错,那可能是你没下载成功,这时最好去官网,先把包下载下来

官网地址

deploy-docker-nginx-jenkins-29

下载下来后,放到你系统中的这个位置:

deploy-docker-nginx-jenkins-30

接着改一下文件名,然后重新提升下权限就可以了。

安装jenkins和nginx环境

jenkins和nginx环境从远端docker镜像库拉取

docker pull jenkins/jenkins:lts
docker pull nginx 

在这里推荐安装jenkins/jenkins这个镜像,jenkins镜像是docker官方维护的镜像,已经很久没有维护了,jenkins/jenkins是jenkins官方维护的库。更新频率非常的到位。后面跟lts表示长期支持的意思。

安装完后执行docker images,就可以看到自己下载的镜像。

deploy-docker-nginx-jenkins-31

新建目录及文件

为了便于管理,在docker下我们将Nginx和Jenkins聚集到一个文件目录之中。目录结构如下:

+ compose
  - docker-compose.yml  // docker-compose执行文件
+ nginx 
  + conf.d
    - nginx.conf        // nginx配置
+ jenkins
  - jenkins_home       // jenkins挂载卷
+ webserver            
  -static              //存放前端打包后的dist文件

webserver目录属于后期生成暂不讨论,需要手动创建的是compose,nginx和Jenkins目录及其下属文件,其中最主要的是docker-compose.yml文件和nginx.conf文件的配置,为了简单,我这边的目录结构直接放在/home下面。

deploy-docker-nginx-jenkins-32

编写docker-compose.yml

version: '3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 为了避免一些权限问题 在这我使用了root
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/:/usr/share/nginx/html

编写nginx.conf

具体nginx的简单配置,请参考文章:Nginx使用及配置

server{
  listen  80;
  root /usr/share/nginx/html;
  index index.html index.htm;
}

启动docker-compose

进入compose目录下(有yml文件),启动

docker-compose up -d

输入docker ps查看容器状态

deploy-docker-nginx-jenkins-33

如上图,则表示启动成功,不出意外的话浏览器ip地址加上端口号8080,就可以访问如下网页

访问之前,需要开启你的云服务器安全组8080和80端口,也把服务器的防火墙中8080和80端口开启,详细开启方法请参考:CentOS防火墙配置

deploy-docker-nginx-jenkins-34

因为我的域名绑定了我得服务器ip,所以我直接用域名访问了

注:如果你docker正常启动后,觉得自己还需要修改某些地方,再启动的话,那就把你启动的两个容器删除,还有把生成的文件也删除,然后重新启动docker-compose up -d

如果启动报错的话,可能是你的端口已被占用,这时候执行一下两条命令:

docker network prune

service docker restart

再重新启动即可。

这边注意哈,你的密码不在/var/jenkins/jenkins_home/下,在当初配置docker-compose.yml中的volumes/home/jenkins/jenkins_home/secrets/initialAdminPassword

输入以下命令获取:

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword 

安装jenkins插件

在此之前,先准备一个vue-cli生成的vue项目,将项目放到gitlab中。

deploy-docker-nginx-jenkins-2

输入密码登录后,安装 推荐的插件。

deploy-docker-nginx-jenkins-3

正在安装,需要等一会:

deploy-docker-nginx-jenkins-4

安装成功,需要进行设置,当然也可以暂时不设置,我这边设置了:

deploy-docker-nginx-jenkins-5

deploy-docker-nginx-jenkins-6

jenkins安装必要的插件gitlabPublish Over SSHnodejs

deploy-docker-nginx-jenkins-7

deploy-docker-nginx-jenkins-8

点击直接安装进行安装插件。安装完成后配置nodejs环境和ssh参数 在首页选择global tool Configuration>NodeJS选择自动安装和对应的nodejs版本号,选择成功后点击保存

deploy-docker-nginx-jenkins-9

配置ssh信息,Manage Jenkins>configure System填写服务器的相关信息

deploy-docker-nginx-jenkins-10

jenkins与gitlab集成

生成及绑定密钥

在服务器中生成ssh密钥(如果已经存在不需要生成)

命令:ssh-keygen -t rsa

注:多按几次回车

deploy-docker-nginx-jenkins-11

使用cd ~/.ssh查看生成的文件。将生成的密钥id_rsa复制粘贴到jenkins中的凭证

deploy-docker-nginx-jenkins-13

deploy-docker-nginx-jenkins-14

登陆gitlab,在gitlab中配置id_rsa.pub公钥

deploy-docker-nginx-jenkins-15

项目构建及测试

准备完毕后,开始新建一个任务,选择新建item>freestyle project构建一个自由风格的项目。

deploy-docker-nginx-jenkins-16

源码管理

新建完成后,在源码管理中配置git信息,credentials选择我们刚刚添加的凭证。

deploy-docker-nginx-jenkins-17

构建触发器

构建触发器中选择我们触发构建的时机,比如push代码的时候,Merge Request的时候(我这边选择了push代码后自动构建)。

deploy-docker-nginx-jenkins-18

点击高级选项找到secret token>Generate生成一个token值

deploy-docker-nginx-jenkins-19

在这边配置成功后,还需要到gitlab中增加对应的钩子。记下上图的webhookURLsecret token值,到gitlab中进行配置。

deploy-docker-nginx-jenkins-20

构建环境及配置

如果你之前已经保存了,这次点击配置即可。

deploy-docker-nginx-jenkins-21

deploy-docker-nginx-jenkins-22

deploy-docker-nginx-jenkins-24

测试

完成上述配置后,jenkins就和gitlab关联起来,在本地push文件时,就会自动构建(可以手动刷新Jenkins页面),访问云服务器的公网IP地址就可以访问修改完成后的项目,同样也可以在Jenkins上手动构建,步骤如图所示:

deploy-docker-nginx-jenkins-25

接着可看到正在构建,也可以手动构建

deploy-docker-nginx-jenkins-26

点进去看一下控制台输出,可以看到打包成功:

deploy-docker-nginx-jenkins-27

测试结果:

deploy-docker-nginx-jenkins-28

以后只要往仓库推代码,Jenkins就会自动打包上线

当然也可以配置邮件通知等…可以自己在Jenkins中配置

U_U

9

评论区