前端项目做静态加速

前端架构

基于 Nginx 单页应用 + 对象存储 + 对象存储 + 双 CDN

一、架构说明

1 核心架构

• k8s 集群中的 Pod 运行 Nginx，仅存放 index.html（入口文件）
• 所有静态资源（JS/CSS/图片等）上传至对象存储
• 配置两个CDN 加速域名
  • 主域名（如 ww.lxf.com )：加速 Nginx 中的 index.html 文件
  • 资源域名（如 static.lxf.com ) ：加速对象存储中的静态资源

2 架构图

flowchart LR
    User[用户] --> CDN1[主CDN - ww.lxf.com]
    CDN1 --> K8s[K8s集群]
    K8s --> Pod[Pod]
    Pod --> Nginx[Nginx - 仅存index.html]
    
    Nginx --> User[用户浏览器]
    User --> CDN2[资源CDN - static.lxf.com]
    CDN2 --> COS1[对象存储1 - 静态资源JS/CSS/图片]
    CDN2 --> COS2[对象存储2 - 静态资源JS/CSS/图片]

二、前置准备

组件	准备内容
域名	主域名和资源域名备案主域名和资源域名使用的SSL证书
CDN 服务	开通云厂商的 CDN 服务
COS	创建存储桶，配置跨域请求(CORS)
k8s 环境	部署 Nginx 容器的 Pod，并暴露服务

三、步骤实施

1 对象存储购买与配置

购买

配置

生成AK

2 构建基础镜像

封装一个用于前端项目打包和资源上传的基础镜像。

借助多阶段构建，在基础阶段进行资源的打包和上传：

• coscli：腾讯云 COS 的命令行上传资源工具

  参考文档：腾讯云 COS CLI 工具使用指南

• ossutil：阿里云 OSS 的命令行上传资源工具

  参考文档：阿里云 OSSutil 高级命令指南

3 构建应用镜像与资源上传

# 构建阶段
FROM registry.cn-hangzhou.aliyuncs.com/library/node:20-alpine AS builder
WORKDIR  /app
ENV TZ=Asia/Shanghai
COPY ./config/app-nginx.conf .
COPY ./config/nginx.conf .
RUN npm i --ignore-scripts --registry=https://repo.huaweicloud.com/repository/npm/ && \
    npm run build:test && \
    coscli sync ./dist cos://桶名/目录 -r && \
    echo "cos upload succeess!" && \
    ossutil sync ./dist oss://桶名/目录  -f && \
    echo "oss upload succeess!"


# 运行阶段（生成环境替换自己的镜像仓库）
FROM registry.cn-hangzhou.aliyuncs.com/library/nginx:1.29-alpine
WORKDIR /app
ENV TZ=Asia/Shanghai
COPY --from=builder /app/dist  /usr/local/openresty/nginx/html
COPY --from=builder /app/app-nginx.conf  /etc/nginx/conf.d/default.conf
COPY --from=builder /app/nginx.conf  /usr/local/openresty/nginx/conf/nginx.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g daemon off;"]

4 服务部署

deploy + svc + ingress

5 CDN购买与配置