Initialize Vue docker branch with Drone pipeline

2026-06-19 23:46:25 +08:00
commit e4b754045f
9 changed files with 144 additions and 0 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -0,0 +1,32 @@
+kind: pipeline
+type: docker
+name: frontend-docker
+
+trigger:
+  branch:
+    - docker
+  event:
+    - push
+
+steps:
+  - name: build-image
+    image: docker:27-cli
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - docker build -t cdchen-frontend:docker .
+
+  - name: deploy
+    image: docker:27-cli
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - docker rm -f cdchen-frontend || true
+      - docker run -d --name cdchen-frontend --restart unless-stopped -p 8088:80 cdchen-frontend:docker
+
+volumes:
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
--- a/10
+++ b/10
@@ -0,0 +1,10 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:1.27-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frontend</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+  </html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5173",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4173"
+  },
+  "dependencies": {
+    "vue": "^3.5.18"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.0.5"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <main class="app-shell">
+    <section class="card">
+      <p class="eyebrow">cdchen/frontend</p>
+      <h1>Vue Docker Branch</h1>
+      <p class="copy">
+        This branch is initialized for Drone-driven Docker deployment.
+      </p>
+    </section>
+  </main>
+</template>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,47 @@
+:root {
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #e5eef6;
+  background: #0f1720;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: linear-gradient(135deg, #0f1720, #1f2937);
+}
+
+.card {
+  width: min(100%, 560px);
+  padding: 32px;
+  border-radius: 8px;
+  background: rgba(15, 23, 32, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  color: #7dd3fc;
+  font-size: 14px;
+}
+
+h1 {
+  margin: 0 0 12px;
+  font-size: 32px;
+}
+
+.copy {
+  margin: 0;
+  color: #cbd5e1;
+  line-height: 1.6;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})