EKS 训练营-vue 项目实战(16)

wzlinux 2023-03-28 原文

介绍

我演示的这个项目使用 vue-element-admin 模版编写，是一个前端项目，相对来说比较简单。

官方地址为：https://panjiachen.github.io/vue-element-admin-site/

代码不过多介绍，我们直接部署 CI/CD 流程。

Continuous Integration

编写 Dockerfile

因为是前端项目，我们只需要 nginx 提供 web 服务即可，并且只需要把打包好的文件 dist 放入镜像就行，所以 Dockerfile 可以这样编写。

# Version 0.0.1
FROM nginx
MAINTAINER wzlinux "admin@wzlinux.com"
COPY ["backend.wzlinux.com.conf","/etc/nginx/conf.d/default.conf"]
COPY ["dist/","/usr/share/nginx/html/"]
EXPOSE 80

编写 nginx conf

默认的 nginx 配置文件不满足我们的代码需要，我们需要定制自己的 conf 文件 backend.wzlinux.com.conf

server
    {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name  _;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /usr/share/nginx/html;

        #关键解决vue路由丢失问题
        location / {
           try_files $uri $uri/ /index.html;
        }

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

        #access_log /var/log/nginx/access.log;
        #error_log /var/log/nginx/error.log;
        access_log /dev/stdout;
        error_log /dev/stderr;
    }

以上两个文件放在代码根目录即可。

编写 Jenkins pipeline

我们的 jenkins 已经配置过 EKS，这里不再介绍，可以查看前面的文档，这里直接贴出 pipeline，其他项目都可以按照这个结构，更好自己需要的镜像或者命令即可。

podTemplate(
    containers: [
        containerTemplate(name: 'node', image: 'wangzan18/node:12-slim', ttyEnabled: true, command: 'cat'),
        containerTemplate(name: 'docker', image: 'docker:latest', ttyEnabled: true, command: 'cat'),
		containerTemplate(name: 'awscli', image: 'amazon/aws-cli:latest', ttyEnabled: true, command: 'cat')
    ], 
    volumes: [
        hostPathVolume(mountPath: '/var/run/docker.sock', hostPath: '/var/run/docker.sock'),
        hostPathVolume(mountPath: '/usr/bin/docker', hostPath: '/usr/bin/docker')
    ],
    serviceAccount: 'jenkins-agent'
) 
{
	node(POD_LABEL) {
		stage('Clone and Build') {
			git branch: 'master', credentialsId: 'd38f927d-9152-4083-9e48-c312a07d230e', url: 'http://git.wzlinux.net/BMC/backend.wzlinux.com.git'
			container('node') {
				sh 'npm install'
				sh 'npm run build:prod'
			}
		}
		stage('Build Docker image') {
			container('docker') {
				sh 'docker build -t backend:v${BUILD_NUMBER} .'
				sh 'docker tag backend:v${BUILD_NUMBER} 921283538843.dkr.ecr.eu-west-1.amazonaws.com/backend:v${BUILD_NUMBER}'
			}
		}
		stage('Push') {
			container('awscli') {		    
				sh 'aws sts get-caller-identity'
				sh 'aws ecr get-login-password --region eu-west-1 | docker login --username AWS --password-stdin 921283538843.dkr.ecr.eu-west-1.amazonaws.com'
				sh 'docker push 921283538843.dkr.ecr.eu-west-1.amazonaws.com/backend:v${BUILD_NUMBER}'					
			}	
		}		
	}
}

在 podTemplate 里面定义整个过程需要的镜像，针对这个 vue，我们使用到 node 镜像，因为 vue 里面一些资源需要 git 命令下面，我自己在 node:12-slim 里面安装了 git，重新制作了一个公共镜像，大家可以使用。

在 node 里面的 stage 就是我们真正的构建过程，第一个 stage 主要是拉取代码，已经进行 build 打包，打包完成之后会生成一个 dist 目录，我们 Dockerfile 里面会把这个 dist 目录文件复制到 nginx 的文件目录。

第二个 stage 就是制作镜像，并且给镜像加一个 BUILD_NUMBER 的版本，然后改为我们 ECR 的标签，这里应该注意到我们里面有一个 serviceAccount 的参数，因为后面上传镜像到 ECR 需要权限，我们根据 EKS IRSA 的功能，为这个 serviceAccount 赋予了 ECR 上传代码的权限。

第三个 stage 就是上传镜像了，在上传镜像之前，首先需要登录 ECR，可以直接使用 awscli 提供的指令进行登录，然后使用 docker push 进行镜像上传。

然后就可以直接指向 Jenkins task，查看镜像上传。

查看我们上传的镜像。

到此为止，我们整个 CI 流程已经完成，后面我们进行 CD 的演示。

Continuous Deployment

编写 k8s 清单文件

在 EKS 中，node 节点所赋予的 Role 默认有 ECR 镜像的拉取，这里我们不需要再单独授权。在代码的根目录，我们创建一个k8s文件夹，然后创建两个清单：

deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-wzlinux
  labels:
    k8s-app: backend-wzlinux
  namespace: default
spec:
  replicas: 3
  selector:
    matchLabels:
      k8s-app: backend-wzlinux
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      labels:
        k8s-app: backend-wzlinux
      annotations:
        fluentbit.io/parser: nginx
    spec:
      containers:
      - image: 921283538843.dkr.ecr.eu-west-1.amazonaws.com/backend:v10
        imagePullPolicy: Always
        name: backend-wzlinux
        env:
        - name: TZ
          value: Asia/Shanghai        
        resources:
          limits:
            cpu: 500m
            memory: 500Mi
          requests:
            cpu: 100m
            memory: 200Mi
        ports:
        - containerPort: 80
          protocol: TCP

service.yaml

apiVersion: v1
kind: Service
metadata:
  name: backend-wzlinux
spec:
  selector:
    k8s-app: backend-wzlinux
  ports:
   -  protocol: TCP
      port: 80
      targetPort: 80
  type: ClusterIP
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  namespace: default
  name: backend-ingress
  annotations:
    kubernetes.io/ingress.class: alb
    alb.ingress.kubernetes.io/listen-ports: '[{"HTTP": 80}, {"HTTPS": 443}]'
    alb.ingress.kubernetes.io/target-group-attributes: stickiness.enabled=true,stickiness.lb_cookie.duration_seconds=600
    alb.ingress.kubernetes.io/scheme: internet-facing
    alb.ingress.kubernetes.io/conditions.backend-wzlinux: >
      [{"field":"host-header","hostHeaderConfig":{"values":["backend.wzlinux.com"]}}]
    alb.ingress.kubernetes.io/group.name: wzlinux
    alb.ingress.kubernetes.io/ssl-redirect: '443'
    alb.ingress.kubernetes.io/certificate-arn: arn:aws:acm:eu-west-1:921283538843:certificate/e55a72ae-d9b5-4f77-bf6d-242691105231
    alb.ingress.kubernetes.io/target-type: ip
spec:
  rules:
  - http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: backend-wzlinux
            port:
              number: 80

在 service 里面，我使用了 Ingress，为了使用 ALB，并且添加证书，具体的 annotations 含义，请查看下面的文档：https://kubernetes-sigs.github.io/aws-load-balancer-controller/v2.2/guide/ingress/annotations/

上面的 ingress 清单，可以使用 Headless Service，也可以写成下面这样：

apiVersion: v1
kind: Service
metadata:
  name: backend-wzlinux
spec:
  selector:
    k8s-app: backend-wzlinux
  ports:
   -  protocol: TCP
      port: 80
      targetPort: 80
  type: ClusterIP
  clusterIP: None
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  namespace: default
  name: backends-ingress
  annotations:
    kubernetes.io/ingress.class: alb
    alb.ingress.kubernetes.io/listen-ports: '[{"HTTP": 80}, {"HTTPS": 443}]'
    alb.ingress.kubernetes.io/target-group-attributes: stickiness.enabled=true,stickiness.lb_cookie.duration_seconds=600
    alb.ingress.kubernetes.io/scheme: internet-facing
    alb.ingress.kubernetes.io/group.name: wzlinux
    alb.ingress.kubernetes.io/ssl-redirect: '443'
    alb.ingress.kubernetes.io/certificate-arn: arn:aws:acm:eu-west-1:921283538843:certificate/e55a72ae-d9b5-4f77-bf6d-242691105231
    alb.ingress.kubernetes.io/target-type: ip
spec:
  rules:
  - host: backends.wzlinux.com
    http:
      paths:
      - pathType: ImplementationSpecific
        backend:
          service:
            name: backend-wzlinux
            port:
              number: 80

配置 argocd

首先为 argocd 配置 Repositories。

创建 app。

当然在 Argo CD 里面也可以查看日志，也是很方便的。

这样设置的话，当我们更新清单就会自动发布。

整个流程大概就是这样。

日志查看

登陆到我们的 Kibana，可以看到相关 Pod 的日志信息，因为我们把 nginx 访问日志和错误日志都输出到终端了。

目前还没有什么访问量，基本都是 ALB 健康检查的日志。

监控查看

欢迎大家扫码关注，获取更多信息

训练 EKS backend wzlinux image K8S云平台云计算

有关EKS 训练营-vue 项目实战(16)的更多相关文章

ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
Ruby 从大范围中获取第 n 个项目 - 2
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？最佳答案一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
在VMware16虚拟机安装Ubuntu详细教程 - 2
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
微信小程序开发入门与实战（Behaviors使用） - 2
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
ruby - 如何在 Ruby 字符串中插入项目符号字符？ - 2
我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？最佳答案你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195
ruby - 在 Rails 项目中测试本地版本的 gem - 2
我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时，我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意，我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR，但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好，但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb，这看起来不对或者b)升级版本，推送到Github，然后运行bundleup，这除了耗时之外显然是一场灾难，因为我不确定我所做的promise是否正
ruby - 合并 nanoc 中的项目 - 2
我一直在尝试使用nanoc用于生成静态网站。我需要组织一个复杂的排列页面，我想让我的内容保持干燥。包含或合并的概念在nanoc系统中如何运作？我已阅读文档，但似乎找不到我想要的内容。例如:我如何获取两个部分内容项并将它们合并到一个新的内容项中。在staticmatic您可以在您的页面中执行以下操作。=partial('partials/shared/navigation')类似的约定在nanoc中如何运作？最佳答案这里是nanoc的作者。在nanoc中，部分是布局。因此，您可以拥有layouts/partials/shared/