.drone.yml

@@ -0,0 +1,37 @@
+kind: pipeline
+type: docker
+name: build-and-run-frontend
+
+trigger:
+  branch:
+    include:
+      - master
+  event:
+    include:
+      - push
+      - custom
+      - merge_request
+
+steps:
+  - name: build frontend image
+    image: docker
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - docker build -t alert-front:latest -f scripts/Dockerfile .
+
+  - name: run frontend container
+    image: docker
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - docker stop alert-front || true
+      - docker rm alert-front || true
+      - docker run -d --restart always --name alert-front -p 8080:8080 alert-front:latest
+
+volumes:
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock

script/Dockerfile

@@ -0,0 +1,32 @@
+# scripts/Dockerfile
+
+FROM node:20-slim AS builder
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+ENV NODE_OPTIONS=--max-old-space-size=8192
+ENV TZ=Asia/Shanghai
+
+RUN corepack enable
+
+WORKDIR /app
+COPY . .
+
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+RUN echo "Builder Success 🎉"
+
+FROM nginx:stable-alpine AS production
+
+# 支持 .mjs 类型
+RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
+
+# 拷贝构建产物
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# 拷贝 nginx 配置
+COPY --from=builder /app/scripts/deploy/nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

script/nginx.conf

@@ -0,0 +1,50 @@
+http {
+  include mime.types;
+  default_type application/octet-stream;
+
+  types {
+    application/javascript  js mjs;
+    text/css                css;
+    text/html               html;
+  }
+
+  sendfile on;
+
+  server {
+    listen 8080;
+    server_name localhost;
+
+    # 静态资源和前端页面
+    location / {
+      root /usr/share/nginx/html;
+      try_files $uri $uri/ /index.html;
+      index index.html;
+
+      # CORS
+      add_header 'Access-Control-Allow-Origin' '*';
+      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+      if ($request_method = 'OPTIONS') {
+        add_header 'Access-Control-Max-Age' 1728000;
+        add_header 'Content-Type' 'text/plain charset=UTF-8';
+        add_header 'Content-Length' 0;
+        return 204;
+      }
+    }
+
+    # ✅ 新增：代理 API 请求到后端容器
+    location /api/ {
+      proxy_pass http://host.docker.internal:48080;  # 如果 nginx 容器与后端同宿主机
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+
+    location = /50x.html {
+      root /usr/share/nginx/html;
+    }
+  }
+}