同一URL下GKE部署Vue SPA与SFTP更新静态页面的实现方案

绝对有办法解决这个问题！核心思路是把Webflow制作的静态页面（首页、联系页）和你的Vue SPA+Django API完全解耦部署，让设计师只需要通过SFTP上传文件就能更新，不用碰任何容器或K8s配置。下面是几个经过验证的方案，按推荐度排序：

方案1：GKE独立部署静态页面服务（Nginx+SFTP） #

这个方案最直接，把静态页面放到一个带SFTP功能的Nginx容器里，和Vue SPA分属不同的K8s服务，通过Ingress路由区分流量。

步骤1：构建自定义Nginx+SFTP镜像 #

创建一个简单的Dockerfile，集成Nginx和SFTP服务：

FROM nginx:alpine

# 安装SFTP依赖
RUN apk add --no-cache openssh-server

# 创建SFTP用户目录和Nginx静态文件目录
RUN mkdir -p /var/www/static /home/designer/upload \
    && chown -R designer:designer /home/designer/upload \
    && ln -s /home/designer/upload /var/www/static

# 配置SFTP权限
RUN echo "Subsystem sftp internal-sftp" >> /etc/ssh/sshd_config \
    && echo "Match User designer" >> /etc/ssh/sshd_config \
    && echo "    ForceCommand internal-sftp" >> /etc/ssh/sshd_config \
    && echo "    PasswordAuthentication yes" >> /etc/ssh/sshd_config \
    && echo "    ChrootDirectory /home/designer" >> /etc/ssh/sshd_config \
    && echo "    PermitTunnel no" >> /etc/ssh/sshd_config \
    && echo "    AllowAgentForwarding no" >> /etc/ssh/sshd_config

# 添加SFTP用户（密码后续用K8s Secret管理）
RUN adduser -D designer

# 替换Nginx默认配置，指向静态文件目录
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 启动脚本：同时启动SSH和Nginx
COPY start.sh /usr/local/bin/start.sh
RUN chmod +x /usr/local/bin/start.sh

CMD ["start.sh"]

对应的nginx.conf：

server {
    listen 80;
    root /var/www/static;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location /contact {
        try_files $uri $uri/ /contact.html =404;
    }
}

start.sh脚本：

#!/bin/sh
# 从环境变量读取并设置SFTP用户密码
echo "designer:$SFTP_PASSWORD" | chpasswd
# 启动SSH服务
/usr/sbin/sshd
# 启动Nginx
nginx -g "daemon off;"

步骤2：部署到GKE #

1. 创建K8s Secret存储SFTP密码：

kubectl create secret generic sftp-credentials --from-literal=password=YourSecureDesignerPassword!

2. 编写Deployment和Service：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: static-pages
spec:
  replicas: 1
  selector:
    matchLabels:
      app: static-pages
  template:
    metadata:
      labels:
        app: static-pages
    spec:
      containers:
      - name: nginx-sftp
        image: gcr.io/your-project-id/nginx-sftp:latest # 替换成你的GCR镜像地址
        ports:
        - containerPort: 80
        - containerPort: 22
        env:
        - name: SFTP_PASSWORD
          valueFrom:
            secretKeyRef:
              name: sftp-credentials
              key: password
        volumeMounts:
        - name: static-files
          mountPath: /home/designer/upload
      volumes:
      - name: static-files
        persistentVolumeClaim:
          claimName: static-pages-pvc
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: static-pages-pvc
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 10Gi
---
apiVersion: v1
kind: Service
metadata:
  name: static-pages-service
spec:
  selector:
    app: static-pages
  ports:
  - port: 80
    targetPort: 80
    name: http
  - port: 22
    targetPort: 22
    name: sftp
  type: LoadBalancer # 追求安全的话可以用NodePort+Cloud NAT

3. 配置Ingress路由：
   让/和/contact指向静态页面服务，其他路径指向你的Vue SPA服务：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
  annotations:
    kubernetes.io/ingress.class: "gce" # GKE默认Ingress类
spec:
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: static-pages-service
            port:
              number: 80
      - path: /contact
        pathType: Prefix
        backend:
          service:
            name: static-pages-service
            port:
              number: 80
      - path: /app
        pathType: Prefix
        backend:
          service:
            name: vue-spa-service # 你的Vue SPA服务名
            port:
              number: 80

步骤3：给设计师配置SFTP访问 #

把Load Balancer的外部IP、端口22、用户名designer和密码（你设置的）告诉设计师，他们用FileZilla这类工具就能直接上传Webflow导出的静态文件到/upload目录，Nginx会自动加载更新后的页面，完全不用重新构建或部署主应用。

方案2：用Cloud Storage托管静态页面+SFTP网关 #

如果不想管理容器存储，GCP Cloud Storage是更省心的选择，搭配一个轻量的SFTP网关让设计师上传文件。

步骤1：托管静态页面到Cloud Storage #

1. 创建一个Cloud Storage桶，命名为your-domain-static-pages，设置为公开可读（或者通过Ingress的后端服务配置权限）。
2. 上传Webflow导出的首页、联系页文件到桶里。

步骤2：配置GKE Ingress转发到Cloud Storage #

修改Ingress配置，让/和/contact指向Cloud Storage桶：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
  annotations:
    kubernetes.io/ingress.class: "gce"
    networking.gke.io/managed-certificates: your-domain-cert # 如果你用HTTPS
spec:
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: gcs-static-service
            port:
              number: 80
      - path: /contact
        pathType: Prefix
        backend:
          service:
            name: gcs-static-service
            port:
              number: 80
      # 其他路径指向Vue SPA
---
# 定义指向Cloud Storage的Service
apiVersion: v1
kind: Service
metadata:
  name: gcs-static-service
spec:
  type: ExternalName
  externalName: storage.googleapis.com
---
# 对应的Endpoints
apiVersion: v1
kind: Endpoints
metadata:
  name: gcs-static-service
subsets:
- addresses:
  - ip: 172.217.164.128 # storage.googleapis.com的IP，可通过nslookup获取
  ports:
  - port: 80
    name: http

步骤3：部署SFTP到GCS网关 #

用Cloud Run部署一个现成的SFTP网关镜像，让设计师通过SFTP上传文件直接同步到Cloud Storage桶：

gcloud run deploy sftp-gcs-gateway \
  --image=ghcr.io/danielgtaylor/sftp-gcs:latest \
  --set-env-vars=GCS_BUCKET=your-domain-static-pages \
  --service-account=sftp-gcs-sa@your-project-id.iam.gserviceaccount.com \
  --allow-unauthenticated # 建议限制设计师的IP访问

然后给设计师配置SFTP连接信息：Cloud Run的服务URL（去掉https://）、端口22、预设的用户名，他们上传的文件会自动同步到GCS，Ingress会立刻加载最新页面。

关键注意事项 #

• 缓存问题：静态页面更新后，浏览器可能会缓存旧版本。可以让设计师给静态文件加版本号（比如index-v2.html），或者在Ingress配置Cache-Control: no-cache；如果用了Cloud CDN，手动触发缓存刷新即可。
• 安全：
  • 限制SFTP访问的IP范围：GKE Load Balancer或Cloud Run可以配置防火墙规则，只允许设计师的办公IP访问。
  • 用K8s Secret或GCP Secret Manager存储SFTP密码，不要硬编码。
  • SFTP用户只拥有静态文件目录的读写权限，避免误操作。
• 简化操作：给设计师准备好FileZilla的导出配置文件，他们导入就能直接连接，不用手动输入所有参数。

内容的提问来源于stack exchange，提问作者Michael Hays