前端静态站点在阿里云自建 K8S DevOps 集群上优雅的进行 CI/CD 。
网站
这里选择 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
