前端靜態站點在阿里雲自建 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 前端雲☁️原生，關注黑客下午茶。