【部署后台管理vue项目】

1、准备工作

(0)版本kubesphere3.1.1 kubernetes1.20.4

(1)准备Dockerfile

FROM nginx

#将dist目录内容复制到nginx容器html内部
COPY dist /usr/share/nginx/html/

EXPOSE 80

(2)准备deploy.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: cyy-admin
  name: cyy-admin
  namespace: edu   #一定要写名称空间
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  selector:
    matchLabels:
      app: cyy-admin
  strategy:
    rollingUpdate:
      maxSurge: 50%
      maxUnavailable: 50%
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: cyy-admin
    spec:
      imagePullSecrets:
        - name: aliyun-docker-hub  #提前在项目下配置访问阿里云的账号密码
      containers:
        - image: $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-admin:SNAPSHOT-$BUILD_NUMBER
 #         readinessProbe:
 #           httpGet:
 #             path: /actuator/health
 #             port: 8080
 #           timeoutSeconds: 10
 #           failureThreshold: 30
 #           periodSeconds: 5
          imagePullPolicy: Always
          name: app
          ports:
            - containerPort: 80
              protocol: TCP
          resources:
            limits:
              cpu: 300m
              memory: 600Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: cyy-admin
  name: cyy-admin
  namespace: edu
spec:
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 80
      nodePort: 32248
  selector:
    app: cyy-admin
  sessionAffinity: None
  type: NodePort

(3)准备Jenkinsfile

pipeline {
    agent {
        node {
            label 'nodejs'
        }

    }
    stages {
        stage('拉取代码') {
            agent none
            steps {
                container('nodejs') {
                    git(url: 'https://gitee.com/ayu-elephant/zxjyfront.git', branch: 'master', changelog: true, poll: false)
                    sh 'ls -al'
                }

            }
        }

        stage('项目编译') {
            agent none
            steps {
                container('nodejs') {
                    sh 'npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/'
                    sh 'npm install --registry=https://registry.npm.taobao.org'
                    sh 'npm run build'
                    sh 'ls'
                }

            }
        }

        stage('构建镜像') {
            agent none
            steps {
                container('nodejs') {
                    sh 'ls'
                    sh 'docker build -t cyy-admin:latest -f Dockerfile  .'
                }

            }
        }

        stage('推送镜像') {
            agent none
            steps {
                container('nodejs') {
                    withCredentials([usernamePassword(credentialsId : 'aliyun-docker-image' ,usernameVariable : 'DOCKER_USERNAME_VAR' ,passwordVariable : 'DOCKER_PASSWORD_VAR' ,)]) {
                        sh 'echo "$DOCKER_PASSWORD_VAR" | docker login $REGISTRY -u "$DOCKER_USERNAME_VAR" --password-stdin'
                        sh 'docker tag cyy-admin:latest $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-admin:SNAPSHOT-$BUILD_NUMBER'
                        sh 'docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-admin:SNAPSHOT-$BUILD_NUMBER'
                    }

                }

            }
        }

        // stage('部署到dev环境') {
        //     agent none
        //     steps {
        //         kubernetesDeploy(configs: 'deploy/**', enableConfigSubstitution: true, kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID")
        //     }
        // }

         stage('部署到dev环境') {
              steps {
                  container ('nodejs') {
                       withCredentials([
                           kubeconfigFile(
                           credentialsId: env.KUBECONFIG_CREDENTIAL_ID,
                           variable: 'KUBECONFIG')
                           ]) {
                           sh 'envsubst < deploy/deploy.yml | kubectl apply -f -'
                       }
                  }
              }
         }

        //1、配置全系统的邮件:                   全系统的监控
        //2、修改ks-jenkins的配置,里面的邮件;   流水线发邮件
        stage('发送确认邮件') {
            agent none
            steps {
                mail(to: '2514712813@qq.com', subject: 'cyy-admin构建结果', body: "构建成功了  $BUILD_NUMBER")
            }
        }

    }
    environment {
        DOCKER_CREDENTIAL_ID = 'dockerhub-id'
        GITHUB_CREDENTIAL_ID = 'github-id'
        KUBECONFIG_CREDENTIAL_ID = 'demo-kubeconfig'
        REGISTRY = 'registry.cn-chengdu.aliyuncs.com'
        DOCKERHUB_NAMESPACE = 'ayu-edu'
        GITHUB_ACCOUNT = 'kubesphere'
        APP_NAME = 'devops-java-sample'
    }
}

2、修改请求地址为网关地址

kubectl部署Nginx kubesphere部署nginx_前端

4、修改index.html

  • 当初引入富文本的时候使用了变量 BASE_URL 这个变量在HTML-WEBPACK-PLUGIN中需要声明,但是在开发环境使用BASE_URL 打包的时候必须改成 htmlWebpackPlugin.options.url 而且二者只能存在其一 注视也会报错

kubectl部署Nginx kubesphere部署nginx_docker_02

5、使用git的方式自动生成流水线

kubectl部署Nginx kubesphere部署nginx_devops_03

部署成功:

kubectl部署Nginx kubesphere部署nginx_前端_04

kubectl部署Nginx kubesphere部署nginx_前端_05

【部署用户界面nuxt项目】

1、准备工作

(0)版本kubesphere3.1.1 kubernetes1.20.4

(1)准备Dockerfile

FROM node:14.17.6

WORKDIR /app
#把.nuxt目录下的所有内容复制到/app/.nuxt/
COPY .  /app/

#安装核心依赖  npm cache clean -f
RUN ["npm","install","--registry=https://registry.npm.taobao.org"]
RUN ["npm","run","build"]
EXPOSE 3000
CMD ["npm", "run", "start"]

(2)准备deploy.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: cyy-site
  name: cyy-site
  namespace: edu   #一定要写名称空间
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  selector:
    matchLabels:
      app: cyy-site
  strategy:
    rollingUpdate:
      maxSurge: 50%
      maxUnavailable: 50%
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: cyy-site
    spec:
      imagePullSecrets:
        - name: aliyun-docker-hub  #提前在项目下配置访问阿里云的账号密码
      containers:
        - image: $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-site:SNAPSHOT-$BUILD_NUMBER
 #         readinessProbe:
 #           httpGet:
 #             path: /actuator/health
 #             port: 8080
 #           timeoutSeconds: 10
 #           failureThreshold: 30
 #           periodSeconds: 5
          imagePullPolicy: Always
          name: app
          ports:
            - containerPort: 3000
              protocol: TCP
          resources:
            limits:
              cpu: 300m
              memory: 600Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: cyy-site
  name: cyy-site
  namespace: edu
spec:
  ports:
    - name: http
      port: 3000
      protocol: TCP
      targetPort: 3000
      nodePort: 32070
  selector:
    app: cyy-site
  sessionAffinity: None
  type: NodePort

(3)准备Jenkinsfile

pipeline {
    agent {
        node {
            label 'nodejs'
        }

    }
    stages {
        stage('拉取代码') {
            agent none
            steps {
                container('nodejs') {
                    git(url: 'https://gitee.com/ayu-elephant/zxjy-nuxt-front.git',  branch: 'master', changelog: true, poll: false)
                    sh 'ls -al'
                }

            }
        }

        stage('项目编译') {
            agent none
            steps {
                container('nodejs') {
                    sh 'ls'
                    sh 'npm install --registry=https://registry.npm.taobao.org'
					sh 'npm run build'
                }

            }
        }

        stage('构建镜像') {
            agent none
            steps {
                container('nodejs') {
                    sh 'ls '
                    sh 'docker build -t cyy-site:latest -f Dockerfile  .'
                }

            }
        }

        stage('推送镜像') {
            agent none
            steps {
                container('nodejs') {
                    withCredentials([usernamePassword(credentialsId : 'aliyun-docker-image' ,usernameVariable : 'DOCKER_USERNAME_VAR' ,passwordVariable : 'DOCKER_PASSWORD_VAR' ,)]) {
                        sh 'echo "$DOCKER_PASSWORD_VAR" | docker login $REGISTRY -u "$DOCKER_USERNAME_VAR" --password-stdin'
                        sh 'docker tag cyy-site:latest $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-site:SNAPSHOT-$BUILD_NUMBER'
                        sh 'docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/cyy-site:SNAPSHOT-$BUILD_NUMBER'
                    }

                }

            }
        }

        // stage('部署到dev环境') {
        //     agent none
        //     steps {
        //         kubernetesDeploy(configs: 'deploy/**', enableConfigSubstitution: true, kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID")
        //     }
        // }

         stage('部署到dev环境') {
              steps {
                  container ('nodejs') {
                       withCredentials([
                           kubeconfigFile(
                           credentialsId: env.KUBECONFIG_CREDENTIAL_ID,
                           variable: 'KUBECONFIG')
                           ]) {
                           sh 'envsubst < deploy/deploy.yml | kubectl apply -f -'
                       }
                  }
              }
         }


        //1、配置全系统的邮件:                   全系统的监控
        //2、修改ks-jenkins的配置,里面的邮件;   流水线发邮件
        stage('发送确认邮件') {
            agent none
            steps {
                mail(to: '2514712813@qq.com', subject: 'cyy-site构建结果', body: "构建成功了  $BUILD_NUMBER")
            }
        }

    }
    environment {
        DOCKER_CREDENTIAL_ID = 'dockerhub-id'
        GITHUB_CREDENTIAL_ID = 'github-id'
        KUBECONFIG_CREDENTIAL_ID = 'demo-kubeconfig'
        REGISTRY = 'registry.cn-chengdu.aliyuncs.com'
        DOCKERHUB_NAMESPACE = 'ayu-edu'
        GITHUB_ACCOUNT = 'kubesphere'
        APP_NAME = 'devops-java-sample'
    }
}

2、修改请求地址为后台网关地址

kubectl部署Nginx kubesphere部署nginx_前端_06

3、修改nuxt监听端口(这个框架默认只监听localhost端口改成0.0.0.0)

kubectl部署Nginx kubesphere部署nginx_kubectl部署Nginx_07

4、部署结果

(网关服务active=prod就会调用不到其他服务,不知道什么原因)

kubectl部署Nginx kubesphere部署nginx_运维_08

5、补充

1、之前springgateway一直读取不到配置中心的配置,后面我尝试更换nacos的版本和项目依赖的nacos版本一致,然后就能读取到配置了,或者重启nacos服务;服务器内存小的朋友不要限制每个服务的内存大小,可能是设置的内存不够,kubesphere提示无法调度的问题,但是不设置内存会把服务器卡死,可以先设置好内存限制,然后出现无法调度的时候手动打开内存限制,但是多了也会卡死。

2、nuxt打包过后,aliyunplayer 引入不成成功,要写在nuxt.config.js里面才行

script:[{src:"https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js",type:"text/javascript"}]

kubectl部署Nginx kubesphere部署nginx_kubectl部署Nginx_09