前端实现自动化部署docker+Jenkins

用户6986032756826
0 阅读2分钟

 一、环境

        部署环境为Ubuntu18.04版本

image.png

二、下载docker

1.安装命令
sudo apt-get install docker-ce
2.启动
sudo systemctl start docker
3.检查是否成功
docker --version

三、下面所需用到的docker命令

1.查找镜像名称

        docker search 镜像名称

2.查看本地镜像
docker images 

3.远程仓库拉镜像
docker pull 镜像名

4.使用镜像生成容器
docker run 镜像名

5.进入容器

        docker exec -it 容器ID /bin/bash:进入容器

6.退出容器
ctrl+P+Q

7.  删除所有容器

       docker rm $(docker ps -a -q)

8.重新启动已停止的容器

        docker start 容器名(也可以使用容器ID)

附：常用参数

        -i：以交互模式运行容器，通常与 -t 同时使用
-t：为容器重新分配一个伪输入终端，通常与 -i 同时使用
-p : 端口映射 格式为[主机端口：容器端口]
-d : 后台模式运行
-name : 给容器一个新的名称
-v：挂载主机的目录
-e： username="ritchie": 设置环境变量
-m：设置容器使用内存最大值
--env-file=[]：从指定文件读入环境变量

四、拉取并创建Jenkins镜像和做对应的配置

        1.拉取jenkins

        docker pull  jenkins/jenkins  

       2.查看拉取

            docker pull  jenkins/jenkins  

       3.启动jenkins

docker run -it -p 9090:8080 -v /opt/jenkinsData:/var/jenkins_home --name jenkensTest jenkins/jenkins

注：

  • -p 9090:8080    是将8080端口映射到9090端口
  • -v /opt/jenkinsData:/var/jenkins_home  是将jenkins工作目录映射到服务器/opt/jenkinsData目录下
        4.查看访问jenkins（服务器ip+映射端口）http://服务器ip:9090/

image.png

        5.如图所示将管理员密码复制到输入框（管理员密码将在启动jenkins生成）

image.png

         6.点击继续后进入安装所需插件页面，默认选择推荐插件点击安装

image.png

image.png

        7.安装好后，创建用户（记住密码和用户以后登录要用）

image.png 填写完成点击保存并完成

           8.实例配置（一般默认）点击保存并完成即可

image.png

        9.开始使用jenkins（完成jenkins安装配置）

image.png

 五、安装node和 Generic Webhook Trigger 插件

        1.点击Manage Jenkins

image.png

        2.选择Plugins

image.png

        3.选择Available plugins勾选node并点安装

image.png         同样步骤安装Generic Webhook Trigger

        安装成功如下图所示 image.png

        4.配置node

在Manage Jenkins中选择tools

image.png

然后点击新增node

image.png 选择版本和项目使用版本一致避免打包报错然后保存应用

注：需要填写别名用来区分不同版本

image.png

六、配置自动打包（新建item）

        1.选择新建item

image.png

        2.选择Freestyle project和填写任务名称

image.png

点击确定进入任务配置

        3.任务配置（General）

        General中填写描述和勾选丢弃旧的构建

image.png

        配置git账号和密码

image.png

选择配置的账号信息

image.png

        4.任务配置（源码管理）

        源码管理需要填写git提交代码地址

        注：指定分支（为空时代表any）具体打包分支以自己代码需部署为准 image.png

image.png         4.任务配置（Triggers）

        配置Triggers

       4.1 勾选Generic Webhook Trigger image.png

        4.2配置token

        先点击save保存一下配置

image.png

        点击设置进入Manage Jenkins然后点击Users

image.png         点击用户列表中设置 image.png         点击Security在点击生成新的Token image.png

        输入名称并得到token

image.png

        4.3设置token

        复制设置的token然后回到任务列表在名称中点击配置继续配置

image.png

将得到的token填入token输入框中 image.png

        5.任务配置（Environment）

        勾选Provide Node & npm bin/ folder to PATH并选择之前配置的node（项目所使用的node版本）

image.png

        6.任务配置（Build Steps）

        在增加构建步骤中选择执行shell

image.png

image.png         填写shll脚本

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '开始安装依赖'
npm i
echo '依赖安装完毕'
echo '开始打包'
npm run build
echo '打包完毕'

注： cd /var/jenkins_home/workspace/testAutoBuild   /var/jenkins_home/workspace后面必须为配置的任务名称不然打包报错（cd /var/jenkins_home/workspace/任务名称）

image.png

        7.测试配置

点击构建即可实现拉取代码并打包

image.png 可选择在控制台查看构建流程日志

image.png

构建成功

image.png

        8.查看打包

在服务器映射文件夹中查看拉取代码及打包（文件地址为启动jenkins配置映射的地址）

具体地址在workspace+任务名称及映射地址+workspace+任务名称即可

image.png

        9.配置nginx (服务器端口为8003)

image.png

  server {
    		listen       8003;
        server_name  localhost;
    		root   /opt/jenkinsData/workspace/testAutoBuild/dist;  
    		
         add_header 'Access-Control-Allow-Origin' '*';
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header 'Access-Control-Allow-Headers' 'Origin,X-Requested-Width,Content-Type,Accept';
         add_header 'Access-Control-Allow-Methods' '*';
         if ($request_method = 'OPTIONS') {
               return 204;
         }
        #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题
        location / {
		    index index.html index.htm index.php;
  			try_files $uri $uri/ /index.php?$query_string;
              if (!-e $request_filename) {
                  rewrite ^(.*)$ /index.html?s=$1 last;
                  break;
              }
          }


        location ~ .php(.*)$  {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

将root文件地址配置为打包dist路径即可

测试

image.png

七、在gitee中配置WebHooks（实现push后自动构建）

        1.在所配置项目git上选择管理

image.png         2.在管理中找到WebHooks并选择添加WebHooks

image.png

        3.配置触发链接及密码

  •  触发链接为http://JENKINS_URL/generic-webhook-trigger/invoke?token=TOKEN_HERE
  • http://服务器地址:Jenkens映射端口/generic-webhook-trigger/invoke?token=TOKEN_HERE
  • TOKEN_HERE为之前配置的token（如下图所示）

如：http://127.0.01:9090/generic-webhook-trigger/invoke?token=11e90c04d5cbf6ab3034cb749316f27f81 image.png webhook密码为Jenkens登录密码 image.png 配置成功后push即可实现自动化构建

八、优化

为了避免出现打包过程中出现403现象

在shell脚本中将打包后的代复制到其他文件夹就可以避免在打包过程中删除dist目录出现网站403

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '开始安装依赖'
npm i
echo '依赖安装完毕'
echo '开始打包'
npm run build
echo '打包完毕'
echo '准备部署'
cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild
echo '部署完成'

转存失败，建议直接上传图片文件

只需要添加 cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild

注：需要在映射文件夹创建好web文件夹和web文件夹下新建号testAutoBuild文件夹并设置可读写权限

修改后需重新修改nginx配置文件路径

image.png

​

avatar
文章
阅读
粉丝