zoukankan      html  css  js  c++  java
  • Ubuntu下实现Jenkins利用Docker自动化部署vue项目

    环境说明:

    • 操作系统:Ubuntu 18.04 64位(阿里云服务器)
    • Jenkins:2.235.1
    • Docker:19.03.12

    整体流程:

    1. Linux服务器上安装Docker
    2. Linux服务器上安装Jenkins
    3. 准备一个VUE项目,代码传到GitHub上
    4. 配置jenkins,build项目
    5. 访问浏览器可以看到VUE项目成功部署

    说明:

      宿主机上的Jenkins会先到你的GitHub代码位置去拉取代码到Jenkins自己的工作目录,Compile前端代码后生成dist目录,然后Jenkins会通过docker命令创建一个基于nginx的image,通过该image运行一个container(将配置及dist目录中文件进行挂载),最终达到自动化部署VUE项目。其实还是将你的静态资源文件放在nginx上去提供服务的。

    1.Ubuntu安装Docker

    # 更换国内软件源(略)
    # 安装所需要的包
    sudo apt install apt-transport-https ca-certificates software-properties-common curl
    
    # 添加 GPG 密钥,并添加 Docker-ce 软件源,这里中国科技大学的 Docker-ce 源
    curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
    sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu 
    $(lsb_release -cs) stable"
    
    # 添加成功后更新软件包缓存
    sudo apt update
    
    # 安装 Docker-ce
    sudo apt install docker-ce
    
    # 设置开机自启动并启动 Docker-ce(安装成功后默认已设置并启动,可忽略)
    sudo systemctl enable docker
    sudo systemctl start docker
    
    # 测试运行
    sudo docker run hello-world
    
    # 添加当前用户到 docker 用户组,可以不用 sudo 运行 docker(可选)
    sudo groupadd docker
    sudo usermod -aG docker $USER
    
    # 测试添加用户组
    docker run hello-world

      测试运行结果如图,则安装成功:

     

      参考:https://www.runoob.com/docker/ubuntu-docker-install.html

    2.Ubuntu安装Jenkins

      p.s.我这里没有用docker部署jenkins,是直接在宿主机中安装的。主要是考虑到docker中的jenkins再运行docker有种套娃的感觉,比较绕,所以干脆直接在宿主机安装了。

    # 判断是否安装jdk
    java -version
    
    # 如果没有安装jdk,则安装jdk
    sudo apt-get install openjdk-8-jdk
    
    # 再次查看jdk
    java -version
    
    # 将存储库密钥添加到系统
    wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
    
    # 将Debian包存储库地址附加到服务器的sources.list
     echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list
    
    sudo apt-get update
    
    sudo apt-get install jenkins

    # 启动Jenkins
    sudo systemctl start jenkins

    # 使用status命令验证是否成功启动
    sudo systemctl status jenkins # 查看jenkins进程
    ps -ef | grep jenkins

      进程如图,此时访问你的地址:8080就可以看到jenkins的页面了,安装成功:

       这里还需要将jenkins用户添加到docker组,不然后面jenkins执行脚本使用docker命令的时候会报权限不足类似的错:

    # 查看docker用户组成员
    root@Colin:~# cat /etc/group |grep docker
    docker:x:999:root
    # 将jenkins用户添加到docker组 root@Colin:
    ~# sudo gpasswd -a jenkins docker Adding user jenkins to group docker
    # 查看docker用户组成员 root@Colin:
    ~# cat /etc/group |grep docker docker:x:999:root,jenkins
    # 重新启动docker服务 root@Colin:
    ~# sudo systemctl restart docker
    # 赋予权限 root@Colin:
    ~# sudo chmod a+rw /var/run/docker.sock

    3.准备一个VUE项目,代码传到GitHub上

      我这里是用Vue CLI脚手架初始化了一个项目,可以参考官网:https://cli.vuejs.org/

      按照官网生成项目后,注意,还需要在项目根目录加几个文件,参考官网:https://cli.vuejs.org/guide/deployment.html#docker-nginx

      目录如图:

        .dockerignore

    **/node_modules
    **/dist

      Dockerfile

    FROM nginx
    EXPOSE 80

      nginx.conf

    user  nginx;
    worker_processes  1;
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    
    events {
      worker_connections  1024;
    }
    
    http {
      include       /etc/nginx/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  /var/log/nginx/access.log  main;
      sendfile        on;
      keepalive_timeout  65;
      server {
        listen       80;
        server_name  localhost;
        location / {
          root   /usr/share/nginx/html;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          root   /usr/share/nginx/html;
        }
      }
    }

      项目准备好build后,进入生成的dist文件夹,浏览器打开index.html,类似下图则没有问题,提交代码到自己的GitHub上:

     4.配置jenkins,build项目

       修改jenkins端口:修改/etc/default下的jenkins即可,这里修改端口号为8082。然后重启service jenkins restart即可,访问8082端口就可以看到jenkins的页面了。

     

        进入/var/lib/jenkins/secrets查看密码输入

      可以选择安装建议的插件

      插件安装完成后,创建一个Jenkins用户

     

        进入控制台页面

       安装node插件

      点击左边Manage Jenkins --> Manage Plugins --> available 上面搜索nodejs,选择然后install without restart,我这里已经安装过了

     

      选择安装nodejs版本

       点击左边Manage Jenkins --> Global Tool Configuration,拉到页面最下方,名字随意,然后save

     

        新建任务

      左边New Item,如图,然后OK。(我这里已经创建过一个同名的了)

     

      

      

       

    echo $PATH 
    node -v 
    npm -v 
    npm install 
    npm run build
    docker stop vuenginxapp || true 
     && docker rm vuenginxapp || true 
     && cd /var/lib/jenkins/workspace/booking-centre 
     && docker build -t vuenginxapp . 
     && docker run -d -p 8083:80 --name vuenginxapp -v /var/lib/jenkins/workspace/booking-centre/dist:/usr/share/nginx/html -v /var/lib/jenkins/workspace/booking-centre/nginx.conf:/etc/nginx/nginx.conf vuenginxapp
      /var/lib/jenkins需要替换为你自己的路径,我这里就是jenkins默认的工作目录位置。

       配置好之后save,然后构建项目

     

        可以查看控制台输出

      

      5.访问浏览器可以看到VUE项目成功部署

      p.s.需要你把云服务器的8083端口放开

     

      完成

      参考:https://www.cnblogs.com/aoping/articles/11770410.html

    P.S.

      进入Jenkins工作目录可以看到拉取的代码,以及Compile后生产的dist目录。

       通过docker命令可以看到生成的images和container。

  • 相关阅读:
    判断pc端或移动端并跳转
    拖动验证码插件
    angularjs 简易模态框
    angularjs 设置全局变量的3种方法
    摄影之HDR
    CentOS上使用yum安装Apache
    CentOs6.5中安装和配置vsftp简明教程
    python 安装easy_install和pip
    linux mysql 操作命令
    .net源码分析
  • 原文地址:https://www.cnblogs.com/ZYTZ/p/13223257.html
Copyright © 2011-2022 走看看