我是如何运行在云上的？-阿里云开发者社区

我是如何运行在云上的？

2022-06-10 198

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器服务 Serverless 版 ACK Serverless，317元额度多规格

容器服务 Serverless 版 ACK Serverless，952元额度多规格

简介： 我是如何运行在云上的？

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

微信图片_20220610141038.png

网站

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

域名

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

微信图片_20220610141106.png

K8S DevOps 集群

这是一个在阿里云自建的 K8S 集群，我这边主要是用于开发测试用。真正的生产集群建议直接买 AKS。

微信图片_20220610141121.png

私有 Gitlab

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

将我们的站点推送上去：

微信图片_20220610141135.png

使用 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

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

微信图片_20220610141213.png

推送镜像到 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

微信图片_20220610141226.png

Aliyun 查看镜像

微信图片_20220610141235.png

K8S 集群设置

创建 namespace

kubectl create ns hacker-linner

查看集群中的 namespace

微信图片_20220610141245.png

Cert-Manager 自动签发 TLS 证书

微信图片_20220610141254.png

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

微信图片_20220610141306.png

Helm 部署 Nginx

微信图片_20220610141321.png

添加 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。

微信图片_20220610141332.png

配置项目 Drone Secrets

微信图片_20220610141342.png

编写 .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

微信图片_20220610141354.png