前端静态站点在阿里云自建 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 里面对我们的站点进行编译。

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 前端云️原生，关注黑客下午茶。

巴特西