从零开始Docker+Nginx+Jenkins实现前端自动化部署

前言

主要是觉得之前写的webhooks太蠢了，会有宕机事件，更新包的时候，网站会打不开，详情可以看我这篇文章从零开始通过webhooks实现前端自动化。

现在不是都在用docker么，然后就找找看有没有docker，nginx自动化的，更新完代码直接就发布的东西，也不会有宕机时间，所以就整了一个这么Docker+Nginx+Jenkins的自动化部署，算是减轻手动的时间吧，借鉴了几位大佬的文章，自己摸索着搞出来了，但是也有不同的地方，所以干脆自己写个资料，省的以后再G了，方便一点

装Docker环境

  1. 安装Docker的依赖库。
yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 添加Docker CE的软件源信息。
sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo
  1. 安装Docker CE。
 sudo yum install docker-ce
  1. 启动Docker服务。
sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker //  启动docker

Docker安装docker-compose

方式一 | curl

docker-compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。下载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

方式二 | yum

主要是url死活没下载成功，没办法只能通过yum装了

yum install -y docker-compose

查找安装目录

rpm -ql docker-compose

image.png

一样的提权

sudo chmod +x /usr/bin/docker-compose

验证安装成功

输入指令

docker-compose -v

image.png

Docker安装Nginx和Jenkins服务

安装Nginx和Jenkins

docker镜像拉取nginx和jenkins环境命令如下：

docker pull nginx:stable-alpine
docker pull jenkins/jenkins:lts

安装完成后执行docker images可以清晰的看到当前docker下存在的镜像。

image.png

Nginx和Jenkins目录编写

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

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

webserver目录属于后期生成暂不讨论，需要手动创建的是compose,nginx和Jenkins目录及其下属文件，其中最主要的是docker-compose.yml文件和nginx.conf文件的配置。

image.png
这里的四个文件夹，我是放在opt下面的web-auto文件夹

docker-compose.yml文件配置

在compose文件夹下创建docker-compose文件

vim docker-compose.yml

内容如下

version: '3.3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 为了避免一些权限问题 在这我使用了root
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8077:8080                              # 外部访问端口：容器端口
      - 50000:50000                            # 外部访问端口：容器端口
    volumes:                                   # 卷挂载路径
      - /opt/web-auto/jenkins/jenkins_home/:/var/jenkins_home  # 服务器的jenkins_home环境地址:容器内环境地址(复制内容到容器内，“：”是间隔符，左边是外部，右边是容器内)
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令
      - /usr/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx:stable-alpine                 # 下载稳定版nginx
    container_name: nginx
    ports:
      - 7070:80                                # 外部访问端口：容器内端端口
    volumes:
      - /opt/web-auto/nginx/conf.d/:/etc/nginx/conf.d                        # 服务器文件：容器内文件(复制外部配置文件到容器内，“：”是间隔符，左边是外部，右边是容器内)
      - /opt/web-auto/webserver/static/jenkins/dist/:/usr/share/nginx/html/  # 同上

default.conf文件配置

在conf.d文件夹下创建default.conf文件

vim default.conf

内容如下

server{
  listen  80;
  server_name localhost;
  root /usr/share/nginx/html;
  index index.html index.htm;
  
  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

启动项目

上述两个文件配置完成之后，需要进入compose目录下面输入以下命令，进行环境的启动：

docker-compose up -d
docker-compose stop //停止nginx和jenkins 两者结合可以进行重启

上述两个文件配置完成之后，需要进入/home/compose目录下面输入以下命令，进行环境的启动：

docker-compose up -d
docker-compose stop //停止nginx和jenkins 两者结合可以进行重启

输入docker ps -a 查看容器的情况：

image.png
状态显示up，后面的端口号显示如上为正常状态。在浏览器输入你云服务器的公网IP加上8077的端口号就可以显示如下页面：

image.png

注意点：

在此步骤之前，切记一定要开放云服务器的安全组，就是之前设定的50000，8077，7070端口

上图所需要的密码就是我们之前映射的服务器地址，就是在在docker-compose.yml中的volumes

image.png

具体的就是/opt/web-auto/jenkins/jenkins_home/secrets/initAdminPassword文件

安装Jenkins插件

选择推荐安装就行，然后等待安装结束

image.png

安装插件

进入插件配置
image.png
jenkins中Manage Plugins搜索以下插件gitee、Publish Over SSH、nodejs并安装

image.png

安装完成后配置nodejs环境和ssh参数 在首页选择global tool Configuration
image.png

配置插件-nodejs

NodeJS | 选择自动安装和对应的nodejs版本号，选择成功后点击保存。
image.png

配置插件-Git

Git | 选择自动安装和对应的git版本号，选择成功后点击保存。

这里需要安装git，我这里是通过指令安装的git

yum -y install git

查看版本号

git --version

image.png
查看git安装位置

whcih git

image.png

安装完成后配置git环境
image.png

配置ssh信息

Manage Jenkins>configure System填写服务器的相关信息

image.png

image.png

关联Jenkins和gitee

生成密钥

在根目录下执行一下命令：

ssh-keygen -t rsa
复制代码

一般默认两次回车，如下图所示：

添加ssh凭证

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

image.png

image.png

添加git凭证

image.png

登陆码云，配置id_rsa.pub公钥

image.png

新建项目

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

源码管理

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

image.png

构建触发器

在构建触发器中选择我们触发构建的时机，你可以选择队友的钩子，比如push代码的时候，Merge Request的时候

image.png

往下拉，点击生成，生成一个token值

image.png

配置成功后，还需要到码云中增加对应的钩子。

上图红线划的地址就是webhook中对应的地址，生成的密码就是webhook密码

image.png
image.png

构建环境及构建配置


配置shell命令

image.png

完成上述配置后，jenkins就和gitee关联起来，在本地push文件时，就会自动构建，访问云服务器的公网IP地址就可以访问修改完成后的项目，同样也可以在Jenkins上手动构建，如图所示：

检查结果

更新仓库的master分支，然后进去nginx的代理ip地址

image.png

失败处理

按着教程走也会出错，没办法自己找了改吧，切记百度，和谷歌，真的有用，搜报错关键词就行
image.png

参考资料

Docker+Nginx+Jenkins实现前端自动化部署

jenkins 无法连接仓库

Jenkins中连接Git仓库时提示:无法连接

Docker安装Jenkins及配置详细教程

posted @ 2021-12-23 14:33  rookieM  阅读(1110)  评论(0)  编辑  收藏  举报