创见真知，共赴云端：VueJS、Docker、Kubernetes 与 Github Actions 实现自动化部署

开发工具

2023-10-24 00:44:34

使用 Vue.js、Docker、Kubernetes 和 GitHub Actions 实现个人博客的自动化部署

踏上个人博客搭建的迷人旅程，拥抱 Kubernetes 和 GitHub Actions 的强大组合。本文将指导您逐步构建、测试和部署您的博客，让您省时省力，专注于内容创作。

准备工作：奠定基础

踏上自动化部署之旅之前，确保您的系统具备以下必备组件：

Node.js 和 npm
Docker
Kubernetes 集群
GitHub 账户

项目设置：创建骨架

使用 Vue CLI 创建您的 Vue.js 项目，这是快速构建 Vue.js 应用程序的最佳途径：

npm install -g @vue/cli
vue create my-project

别忘了安装必要的 Docker 和 Kubernetes 依赖项：

npm install --save-dev @vue/cli-plugin-docker @vue/cli-plugin-kubernetes

构建 Docker 镜像：打包您的应用程序

创建 Dockerfile，它将指导 Docker 构建您的应用程序镜像：

FROM node:latest
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
CMD npm run serve

编写 Kubernetes 清单文件：部署

Kubernetes 清单文件了您的应用程序在 Kubernetes 集群中的部署和管理方式：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my-app
  template:
    metadata:
      labels:
        app: my-app
    spec:
      containers:
      - name: my-app
        image: my-app:latest
        ports:
        - containerPort: 8080

配置 GitHub Actions：自动化部署

在 GitHub Actions 中创建一个新的工作流，实现自动部署：

name: Deploy to Kubernetes

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: '16'
    - run: npm ci
    - run: npm run build
    - uses: google-github-actions/deploy-to-kubernetes@main
      with:
        cluster: my-cluster
        namespace: default
        deployment: my-app-deployment