Ubuntu20.04 安装 kubesphere&&devops流水线部署项目(部署vue项目)

灰色皮卡丘
477 阅读6分钟

Ubuntu20.04 安装 kubesphere和 devops流水线部署项目(三)

vue我真是没想到啊！官方提供的的devops nodejs环境基础镜像 nodejs版本才14！

前言

  • 我会写三篇文章来记录 我安装 kubesphere 和 部署项目的全过程

  • 第一篇 记录了我安装 kunesphere 的过程

  • 第二篇 记录我运用 kunesphere 部署java代码的过程

  • 第三篇 记录我运用 kunesphere 部署vue代码的过程

环境介绍&部署准备

  • 我部署的是一个基于若依Cloud架构的项目(前端是基于 vue2 & element-ui)
  • 准备一个 git 选择gitlab中文汉化版(尽量不要选择docker安装涉及到邮箱和一些系统配置 你只要重新运行docker 容器就要重新配置)
  • 准备一个 jar包运行环境的基础镜像
  • 准备一个 docker镜像仓库 使用HarBor2.5.3
  • 注意这里来个友情提示 如果跟我一样使用的是HarBor 我建议你们要把 HarBor 定时清理打开
  • 每一个服务的镜像都在 400MB左右 更新几次就容易把物理机磁盘占满

先介绍一下我部署时 碰到的一个坑 升级nodejs的基础镜像

  • 开始也提到了devops nodejs环境基础镜像 nodejs版本才14
  • 这哪够啊一运行流水线就报错后来已打印才发现 nodejs版本是14的
  • 既然不够那就升级喽 问题就这么悄悄的来了
  • nodejs 基础镜像配置在哪了？怎么制作新的镜像？制作好了怎么替换？
  • nodejs基础镜像配置在 devops-jenkins 容器组里
  • 用admin用户登录kubesphere 然后选择左上角 的平台管理 然后选择 集群管理
  • 然后根据图片步骤 搜索 devops-jenkins 然后再去看看详细的配置
  • 点击 jenkins-casc-config 就可以查看
  • 注意啊这里是有两个配置文件 jenkins.yaml 和 jenkins_user.yaml
  • 所以他有两个地方配置了 registry.cn-beijing.aliyuncs.com/kubesphereio/builder-nodejs:v3.2.0
  • 截图里是我已经更改好的配置
  • 已经找到了nodejs 镜像配置在哪 也看到它是怎么配置的了
  • 现在就进行下一步 去制作一个高版本的 nodejs 镜像
  • 官方旧的Dockerfile文件
  • 官方社区同样问题的论坛
  • 通过连接工具连接到 master 节点
  • 然后把文件传输到一个目录
  • 我选择的是 /opt/nodejs
  • 先创建一个 Dockerfile 文件
root@master:/opt/nodejs# touch Dockerfile
root@master:/opt/nodejs# ll
total 144704
drwxr-xr-x 2 root root      4096 Sep 22 15:25 ./
drwxr-xr-x 9 root root      4096 Sep 20 15:18 ../
-rw-r--r-- 1 root root       434 Sep 15 16:18 Dockerfile

### nodejs基础镜像 Dockerfile 文件内容

# 声明基础镜像
FROM registry.cn-beijing.aliyuncs.com/kubesphereio/builder-base:v3.2.0

# 设置nodejs
ENV NODE_VERSION 16.17.0

RUN ARCH= && uArch="$(uname -m)" \
  && case "${uArch##*-}" in \
    x86_64) ARCH='x64';; \
    aarch64) ARCH='arm64';; \
    *) echo "unsupported architecture"; exit 1 ;; \
  esac \
  # gpg keys listed at https://github.com/nodejs/node#release-keys
  && set -ex \
  && for key in \
    4ED778F539E3634C779C87C6D7062848A1AB005C \
    141F07595B7B3FFE74309A937405533BE57C7D57 \
    94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
    74F12602B6F1C4E913FAA37AD3A89613643B6201 \
    71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
    61FC681DFB92A079F1685E77973F295594EC4689 \
    8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
    C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
    890C08DB8579162FEE0DF9DB8BEAB4DFCF555EF4 \
    C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
    DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
    A48C2BEE680E841632CD4E44F07496B3EB3C1762 \
    108F52B48DB57BB0CC439B2997B01419BD92F80A \
    B9E2F5981AA6E0CD28160D9FF13993A75599653C \
  ; do \
    gpg --batch --keyserver sks.srv.dumain.com --recv-keys "$key"; \
  done \
  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH.tar.xz" \
  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
  && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
  && grep " node-v$NODE_VERSION-linux-$ARCH.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
  && tar -xJf "node-v$NODE_VERSION-linux-$ARCH.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
  && rm "node-v$NODE_VERSION-linux-$ARCH.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt \
  && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
  && yum install -y nodejs gcc-c++ make bzip2 GConf2 gtk2 chromedriver chromium xorg-x11-server-Xvfb

RUN npm i -g watch-cli vsce typescript

# Yarn 设置yarn版本安装yarn 
ENV YARN_VERSION 1.22.19
RUN curl -f -L -o /tmp/yarn.tgz https://github.com/yarnpkg/yarn/releases/download/v${YARN_VERSION}/yarn-v${YARN_VERSION}.tar.gz && \
        tar xf /tmp/yarn.tgz && \
        mv yarn-v${YARN_VERSION} /opt/yarn && \
        ln -s /opt/yarn/bin/yarn /usr/local/bin/yarn && \
        yarn config set cache-folder /root/.yarn
  • 把上述 文件内容添加到 文件里 记得保存
  • 保存完 执行下面这两个语句
  • 最好用一个能上外网的机器执行 因为我写的是从外网下载
  • 有能力的可以自己改成境内的地址下载
  • 其中 for key in 下面的 好像是用 nodejs 开发者的 recv-keys 集合交验之类的
  • 下面我附上链接 如果执行失败请更新 那一段 recv-keys
  • recv-keys
## 看情况是否执行这句登录
## 如果你的镜像仓库是公开的就不用执行    
docker login docker仓库地址  -u docker仓库用户名 -p docker仓库密码
## 制作 镜像    
docker build -f dockerfile -t docker仓库地址/docker仓库项目名/builder-nodejs:v3.3.0 .
## 推送镜像    
docker push docker仓库地址/docker仓库项目名/builder-nodejs:v3.3.0
  • 这样 nodejs 运行环境镜像就制作完了
  • 完成后就去 配置的位置修改一下配置
  • 然后尝试一下能不能用 如果发现还是用的旧版本 nodejs 镜像
  • 那就进入 jenkins 刷新一下配置
  • 还是在集群管理 左侧菜单的 应用负载 -> 服务 -> 搜索 jenkins
  • 红框内的就是jenkins 服务端口 然后用主节点IP:服务端口 访问
  • jenkins 的登录名 和密码就是 kubesphere admin 的登录名和密码
  • 登录到页面 选择左侧菜单的 系统管理 -> 然后选择 configuration-as-code 图二红圈
  • 然后进入到 图三的页面 点击重新加载配置 然后查看配置 到更新过来了就好
  • 到这里 前端项目的打包环境就ok了

制作nginx基础镜像

  • 下一步还要做一个 nginx 基环境
  • 首先通过连接工具连接到 master 节点
  • 然后选择一个目录创建dockerfile
  • 我选择的是 /opt/java
root@master:/opt/java# touch Dockerfile
root@master:/opt/java# ll
total 144704
drwxr-xr-x 2 root root      4096 Sep 22 15:25 ./
drwxr-xr-x 9 root root      4096 Sep 20 15:18 ../
-rw-r--r-- 1 root root       434 Sep 15 16:18 Dockerfile

### nginx基础镜像 Dockerfile 文件内容
# 基础镜像
FROM centos:7
# 作者
MAINTAINER picachu
#执行下面命令，安装基础环境
RUN yum install -y gcc gcc-c++ make \
    openssl-devel pcre-devel gd-devel \
    iproute net-tools telnet wget curl && \
    yum clean all && \

    rm -rf /var/cache/yum/*
#nginx到容器里 并编译安装
RUN wget http://nginx.org/download/nginx-1.23.1.tar.gz && \
    tar zxf nginx-1.23.1.tar.gz && \
    cd nginx-1.23.1 && \
    ./configure --prefix=/usr/local/nginx \
    --with-http_ssl_module \
    --with-http_stub_status_module && \
    make -j 4 && make install && \

    rm -rf /usr/local/nginx/html/* && \
    echo "ok" >> /usr/local/nginx/html/index.html && \
    cd / && rm -rf nginx-2* && \
#做软连接
    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 
#设置环境变量
ENV PATH $PATH:/usr/local/nginx/sbin
#拷贝
#COPY nginx.conf /usr/local/nginx/conf/nginx.conf
#指定工作目录
WORKDIR /usr/local/nginx
#暴露端口
EXPOSE 80
#运行这个镜像，默认执行的命令
CMD ["nginx", "-g", "daemon off;"]
  • 把上述 文件内容添加到 文件里 记得保存
  • 保存完 执行下面这两个语句
## 看情况是否执行这句登录
## 如果你的镜像仓库是公开的就不用执行    
docker login docker仓库地址  -u docker仓库用户名 -p docker仓库密码
## 制作 镜像    
docker build -f dockerfile -t docker仓库地址/docker仓库项目名/nginx:1231 .
## 推送镜像    
docker push docker仓库地址/docker仓库项目名/nginx:1231
  • 这样 前端运行环境镜像就制作完了

接下来 在项目里添加 Dockerfile 和 deploy.yaml 和 nginx 配置

  • 我们需要在项目里添加一些配置文件
  • 404.html,default.conf,nginx.conf,Dockerfile,deploy.yaml,fastcgi.conf
  • 我选择在前端项目根目录添加 config 文件夹里放入配置文件 方便管理
  • 404.html 配置项目的错误页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404-对不起！您访问的页面不存在</title>
<style type="text/css">
.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/head404.png) no-repeat; }
.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/txtbg404.png) no-repeat;}
.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}
.txtbg404 .txtbox .paddingbox { padding-top:15px;}
.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}
.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
</style>
</head>

<body bgcolor="#494949">
   	<div class="head404"></div>
   	<div class="txtbg404">
  <div class="txtbox">
      <p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>
      <p class="paddingbox">请点击以下链接继续浏览网页</p>
      <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>
      <p>》<a href="https://www.daixiaorui.com">返回网站首页</a></p>
    </div>
  </div>
</body>
</html>
  • default.conf 配置项目的 nginx 页面代理配置
server {
    listen       80; # 端口
    server_name  localhost; #ip 或者 域名
    
    # 转发后台配置
    location /api/ {
      proxy_pass http://10.104.209.88:33472/;
    }
    
    # 转发前台页面
    location / {
      root   html;
      index  index.html index.htm;
      #try_files $uri $uri/ /index.html;
    }
    # 500 错误页面
    location = /50x.html {
      root   html;
    }
}
  • nginx.conf 配置项目的 nginx 基本配置
worker_processes  4;

error_log  logs/error.log warn;
pid        /var/run/nginx.pid;


events {
  worker_connections  16384;
}


http {
  client_max_body_size 50m;
  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;


  server_tokens   off;
  sendfile        on;
    
  keepalive_timeout  65;

  gzip  on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary off;
  gzip_disable "MSIE [1-6]\.";

  error_page  404              /404.html;
  error_page   500 502 503 504  /50x.html;


  include /usr/local/nginx/conf.d/*.conf;
}
  • Dockerfile 配置项目的 打包文件配置
# 基础镜像
FROM 10.104.209.80:38088/library/nginx:1231
#复制项目文件
COPY dist/ /usr/local/nginx/html
#复制404页面
COPY config/404.html /usr/local/nginx/html
#复制 错误页没有版本号配置
COPY config/fastcgi.conf /usr/local/nginx/conf/fastcgi.conf
# 给文件夹赋权限
RUN chmod -R 777 /usr/local/nginx/html
#复制 nginx配置
COPY config/nginx.conf /usr/local/nginx/conf/nginx.conf
#复制 nginx配置
COPY config/default.conf /usr/local/nginx/conf.d/default.conf

EXPOSE 80
  • deploy.yaml 配置项目的 部署文件配置
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: iamui # 服务名
  name: iamui # 服务名
  namespace: smxiam # 项目名
spec:
  replicas: 1
  selector:
    matchLabels:
      app: iamui # 服务名
  template:
    metadata:
      labels:
        app: iamui # 服务名
    spec:
      containers:
        - name: iamui # 服务名
          image: 10.104.209.80:38088/smxiam/iamui:latest # 服务 镜像地址
          imagePullPolicy: Always
          ports:
            - containerPort: 80
              protocol: TCP
          resources:
            requests: 
              memory: 600Mi
              cpu: 1000m
            limits: 
              memory: 2Gi
              cpu: 3000m
      imagePullSecrets:
        - name: harbor-secret # kube 的harbor 密钥
---
apiVersion: v1
kind: Service
metadata:
  name: iamui # 服务名
  labels:
    app: iamui # 服务名
  namespace: smxiam # 项目名
spec:
  ports:
    - port: 8092
      targetPort: 80
      nodePort: 30780 # 固定访问端口
      #name: shop-front
  type: NodePort
  selector:
    app: iamui # 服务名

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: iamreact-ingress
  namespace: smxiam
spec:
  ingressClassName: nginx
  rules:
    - http:
        paths:
          - path: /iamui # 域名外网 外网访问端口
            pathType: Prefix
            backend:
              service:
                name: iamui # 服务名
                port:
                  number: 8092
  • fastcgi.conf 配置项目的 404不显示版本号设置

fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
fastcgi_param  QUERY_STRING       $query_string;
fastcgi_param  REQUEST_METHOD     $request_method;
fastcgi_param  CONTENT_TYPE       $content_type;
fastcgi_param  CONTENT_LENGTH     $content_length;

fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
fastcgi_param  REQUEST_URI        $request_uri;
fastcgi_param  DOCUMENT_URI       $document_uri;
fastcgi_param  DOCUMENT_ROOT      $document_root;
fastcgi_param  SERVER_PROTOCOL    $server_protocol;
fastcgi_param  REQUEST_SCHEME     $scheme;
fastcgi_param  HTTPS              $https if_not_empty;

fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
fastcgi_param  SERVER_SOFTWARE    nginx;

fastcgi_param  REMOTE_ADDR        $remote_addr;
fastcgi_param  REMOTE_PORT        $remote_port;
fastcgi_param  SERVER_ADDR        $server_addr;
fastcgi_param  SERVER_PORT        $server_port;
fastcgi_param  SERVER_NAME        $server_name;

# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param  REDIRECT_STATUS    200;
  • 到这里项目的配置工作完成

接下来就是 在企业空间上配置 devops 运行脚本了

  • 以企业空间管理员身份 登录系统
  • 选择 左侧菜单的 devops -> 然后选择刚刚创建的 devops 项目
  • 进入项目后如下操作
  • 下面是 jenkinsfile 的代码
pipeline {
  agent {
    node {
      label 'nodejs'
    }

  }
  stages {
    stage('拉取代码') {
      agent none
      steps {
        git(url: 'git地址', credentialsId: 'git 凭证', branch: 'master', changelog: true, poll: false)
        sh 'ls'
      }
    }

    stage('打包') {
      agent none
      steps {
        container('nodejs') {
          sh 'node -v'
          sh 'npm -v'
          sh 'ls'
          sh 'npm config set registry https://registry.npm.taobao.org' # 设置国内镜像
          sh 'yarn config set registry https://registry.npm.taobao.org'# 设置国内镜像
          sh 'npm install --save core-js'
          sh 'npm install --save qrcodejs2'
          sh 'yarn'
          sh 'npm run build:prod '
          sh 'tar -zcvf dist.gz.tar dist '
          archiveArtifacts '*.gz.tar'
        }

      }
    }
    
     stage('构建镜像') {
      steps {
        container('nodejs') {
          withCredentials([usernamePassword(passwordVariable : 'REGISTRY_PASSWORD' ,usernameVariable : 'REGISTRY_USERNAME' ,credentialsId : "$DOCKER_CREDENTIAL_ID" ,)]) {
            sh 'echo "$REGISTRY_PASSWORD" | docker login $REGISTRY -u "$REGISTRY_USERNAME" --password-stdin'
          }
          sh 'ls'
          sh 'cat $dockerFile'
          sh 'docker build -f $dockerFile -t $remoteImage:$ImageTag .'
        }

      }
    }

    stage('推送镜像') {
      steps {
        container('nodejs') {
          sh 'docker push $remoteImage:$ImageTag '
        }

      }
    }

    stage('kubernetes') {
      steps {
        container('nodejs') {
          sh 'cat $deployFile'
          withCredentials([
          kubeconfigFile(credentialsId: '  K8S凭证 ',variable: 'KUBECONFIG')
          ]) {
              sh 'envsubst < $deployFile | kubectl apply -f -'
            }

          }

        }
      }

  }
  environment {
    DOCKER_CREDENTIAL_ID = 'dockerhub' # docker镜像仓库凭证名称
    KUBECONFIG_CREDENTIAL_ID = 'kubeconfig-id' # K8S 镜像仓库凭证名称
    REGISTRY = '10.104.209.80:38088' # docker镜像仓库地址
    REGISTRY_USERNAME = 'iam' # docker镜像仓库用户名
    REGISTRY_PASSWORD = 'A81JP3BUYK'# docker镜像仓库密码
    dockerFile = 'config/Dockerfile' # docekrfile 位置
    deployFile = 'config/deploy.yaml'# deplo(K8S部署文件) 位置
    ImageTag = 'latest' #版本号
    remoteImage = '10.104.209.80:38088/smxiam/iamui' # docker镜像仓库地址 + 项目名
  }
  parameters {
    string(name: 'TAG_NAME', defaultValue: 'latest', description: '')
  }
}
  • 保存好文件后点击运行 执行部署流水线
  • 在执行记录页面点击啊记录 可以查看日志 这里就不做介绍了 可以自行尝试
  • 等一会到他 执行完成
  • 执行完 在项目 -> 应用负载 -> 服务 就能看到了
  • 这里贴图是执行成功的 服务
  • 最后让我们试一下 内网是不是能访问了
  • 访问规则就是 主节点ip:服务端口号/路径

到这了 一个前端（VUE）服务也就部署完成了

avatar
文章
阅读
粉丝