静态网站
部署静态网站和单页应用 (SPA)
静态网站
使用 Senate 部署静态网站、文档站点和单页应用 (SPA)。
使用 Nginx 快速部署
创建服务
进入 Services → New Service
输入服务名称：my-website 并点击 Create
配置源
- 进入 Source 标签页
- 选择 Docker Image 作为源类型
- 输入镜像：
nginx:alpine - 点击 Save
添加站点
挂载静态文件：
| 主机路径 | 容器路径 |
|---|---|
/path/to/site | /usr/share/nginx/html:ro |
添加域名
在 Domains 标签页添加域名。
部署
点击 Create 部署。
预构建静态镜像
构建自己的镜像
创建 Dockerfile：
FROM nginx:alpine
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf构建并推送：
docker build -t myuser/mysite:latest .
docker push myuser/mysite:latest然后使用镜像 myuser/mysite:latest 部署。
SPA 配置
单页应用需要特殊路由：
SPA 的 Nginx 配置
创建 nginx.conf：
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 缓存静态资源
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}SPA 的 Dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80框架示例
React (Vite)
# 构建阶段
FROM node:20-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# 服务阶段
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.confVue
FROM node:20-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.confNext.js（静态导出）
用于 next export：
FROM node:20-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/out /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.confAstro
FROM node:20-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html替代方案：Caddy
Caddy 配置更简单且自动 HTTPS：
Caddyfile
:80 {
root * /srv
file_server
try_files {path} /index.html
}Caddy 的 Dockerfile
FROM caddy:alpine
COPY dist/ /srv/
COPY Caddyfile /etc/caddy/Caddyfile压缩
启用 gzip 压缩：
Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_min_length 1000;Caddy
Caddy 默认通过 encode 启用压缩：
:80 {
root * /srv
encode gzip
file_server
}安全头部
在 nginx 中添加安全头部：
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;CI/CD 集成
GitHub Actions
name: Deploy Static Site
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Install and build
run: |
npm ci
npm run build
- name: Build and push image
run: |
docker build -t myuser/mysite:${{ github.sha }} .
docker push myuser/mysite:${{ github.sha }}
- name: Deploy to Senate
run: curl "${{ secrets.SENATE_WEBHOOK }}文档站点
VitePress
FROM node:20-alpine as build
WORKDIR /app
COPY . .
RUN npm ci && npm run docs:build
FROM nginx:alpine
COPY --from=build /app/docs/.vitepress/dist /usr/share/nginx/htmlDocusaurus
FROM node:20-alpine as build
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html性能提示
- 启用缓存：为静态资源设置长缓存头
- 使用 CDN：在前面放置 Cloudflare 或类似服务
- 优化图片：使用 WebP，适当尺寸
- 最小化打包：代码分割，Tree Shaking
- 预加载关键资源：使用
<link rel="preload">