前端静态站点在阿里云自建 K8S DevOps 集群上优雅的进行 CI/CD

目录

• 网站
• 域名
• K8S DevOps 集群
• 私有 Gitlab
• 使用 Docker 编译站点
  
  * Dockerfile
  
  * 构建编译 Image
  
  * 测试编译 Image
  
  * 推送镜像到 Aliyun
• K8S 集群设置
  
  * 创建 namespace
  
  * 查看集群中的 namespace
  
  * Cert-Manager 自动签发 TLS 证书
  
  * ClusterIssuer
  
  * Certificate
  
  * 查看证书
• Helm 部署 Nginx
  
  * 添加 bitnami 仓库
  
  * 配置 PVC
  
  * 配置 values.yaml
  
  * 一键部署
• Drone CI 设置
  
  * 配置项目 Drone Secrets
  
  * 编写 .drone.yml CI Pipeline
• 上云
  
  * 触发 Drone CI

网站

这里选择 Docusaurus 静态网站生成器，React 生态。

域名

这里我的是——https://hacker-linner.com|黑客下午茶：

K8S DevOps 集群

这是一个在阿里云自建的 K8S 集群，我这边主要是用于开发测试用。

真正的生产集群建议直接买 AKS。

私有 Gitlab

这个我已部署到 黑客下午茶 K8S DevOps 集群。

将我们的站点推送上去：

使用 Docker 编译站点

Dockerfile

FROM node:10-slim

ENV SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
ENV PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/

WORKDIR /drone/

COPY ./package.json /drone/

RUN yarn

构建编译 Image

docker build -t registry.cn-shenzhen.aliyuncs.com/hacker-linner/hacker-site:build .

测试编译 Image

清除 .docusaurus 和 node_modules 文件夹

rm -rf .docusaurus node_modules

进入容器

docker run -it -v $(pwd):/drone/app registry.cn-shenzhen.aliyuncs.com/hacker-linner/hacker-site:build bash

进入 app 目录

cd /drone/app

软链接镜像中已缓存的 node_modules

ln -sfn /drone/node_modules node_modules

执行编译

npm build

看到如下图，表明镜像没有问题：

推送镜像到 Aliyun

后面，我们会使用这个基础镜像在 Drone CI 里面对我们的站点进行编译。

登录 Aliyun 私有仓库

docker login --username=hacker@aliyun.com registry.cn-shenzhen.aliyuncs.com
# hacker@aliyun.com -- 你的阿里云账号

推送镜像

docker push registry.cn-shenzhen.aliyuncs.com/hacker-linner/hacker-site:build

Aliyun 查看镜像

K8S 集群设置

创建 namespace

kubectl create ns hacker-linner

查看集群中的 namespace

Cert-Manager 自动签发 TLS 证书

ClusterIssuer

apiVersion: cert-manager.io/v1alpha2
kind: ClusterIssuer
metadata:
  labels:
    name: letsencrypt-prod
  name: letsencrypt-prod
  namespace: cert-manager
spec:
  acme:
    email: hackerlinner@gmail.com
    solvers:
    - dns01:
        webhook:
          config:
            accessKeyIdRef:
              key: accessKeyId
              name: alidns-access-key-id
            accessKeySecretRef:
              key: accessKeySecret
              name: alidns-access-key-secret
            regionId: 'cn-shenzhen'
            ttl: 600
          groupName: certmanager.webhook.alidns
          solverName: alidns
    privateKeySecretRef:
      name: letsencrypt-prod
    server: https://acme-v02.api.letsencrypt.org/directory

Certificate

apiVersion: cert-manager.io/v1alpha2
kind: Certificate
metadata:
  name: hacker-linner-cert
spec:
  secretName: hacker-linner-cert-tls
  issuerRef:
    name: letsencrypt-prod
    kind: ClusterIssuer
  commonName: '*.hacker-linner.com'
  dnsNames:
  - hacker-linner.com
  - "*.hacker-linner.com"

查看证书

kubectl describe certificate -n hacker-linner

Helm 部署 Nginx

添加 bitnami 仓库

helm repo add bitnami https://charts.bitnami.com/bitnami

配置 PVC

这里用的是 NFS

# hacker-linner
apiVersion: v1
kind: PersistentVolume
metadata:
  name: hacker-linner
  labels:
    app: hacker-linner
spec:
  storageClassName: ""
  capacity:
    storage: 1Gi
  accessModes:
    - ReadWriteOnce
  persistentVolumeReclaimPolicy: Retain
  mountOptions:
    - hard
    - nfsvers=4.1
  nfs:
    path: /nfs/nginx-static/hacker-linner
    server: 172.18.37.25
---
# hacker-linner
kind: PersistentVolumeClaim
apiVersion: v1
metadata:
  name: hacker-linner
spec:
  storageClassName: ""
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi
  selector:
    matchLabels:
      app: hacker-linner

配置 values.yaml

staticSitePVC: hacker-linner

ingress:
  enabled: true
  hostname: hacker-linner.com
  annotations:
    ingress.kubernetes.io/ssl-redirect: "true"
    ingress.kubernetes.io/proxy-body-size: "0"
    kubernetes.io/ingress.class: "traefik"
    traefik.ingress.kubernetes.io/router.tls: "true"
    traefik.ingress.kubernetes.io/router.entrypoints: websecure
  tls:
    - hosts:
        - hacker-linner.com
      secretName: hacker-linner-cert-tls

一键部署

helm install hacker-linner bitnami/nginx -f values-hacker-linner.yaml -n hacker-linner

Drone CI 设置

当前集群已部署到 K8S。已经关联到 Gitlab。

配置项目 Drone Secrets

编写 .drone.yml CI Pipeline

global-variables:
  - &clone
    name: 克隆源码
    image: alpine/git
    commands:
    - git clone -b "$DRONE_BRANCH" "$DRONE_REMOTE_URL" .

  - &build_code
    name: 构建站点
    image: registry.cn-shenzhen.aliyuncs.com/hacker-linner/hacker-site:build
    pull: always
    commands:
    - ls -la
    - ln -sfn /drone/node_modules node_modules
    - npm run build
    - ls -la

  - &deploy
    name: 上云 ️
    image: appleboy/drone-scp
    settings:
      host:
        from_secret: cloud_host
      port:
        from_secret: cloud_port
      username:
        from_secret: cloud_user
      password:
        from_secret: cloud_pw
      target: /nfs/nginx-static/hacker-linner
      source: build

kind: pipeline
type: kubernetes
name: release

clone:
  disable: true

steps:
  - <<: *clone

  - <<: *build_code

  - <<: *deploy

trigger:
  branch:
  - release/cloud
  event:
  - push

上云

触发 Drone CI

# 首次
git checkout -b release/cloud
git push --set-upstream origin release/cloud

## 之后
git checkout release/cloud
git merge master
git push

一起 K8S DevOps 前端云️原生，关注黑客下午茶。