docker: 前端 nginx HTTP :2000(外部反代接管域名/TLS,不再内置证书);README + logo
- docker-compose.yml:去 acme,web 端口 2000(WEB_PORT),CORS_ORIGINS/COOKIE_SECURE 直配,清理证书 volumes - frontend nginx 模板/Dockerfile:纯 HTTP :2000,删自签证书 + cert-watch 入口脚本 - 删除 install.sh、.env.docker.example(compose 直接 up,不再需要一键脚本/模板) - README(中英):部署改为 Docker(2000端口反代)+ 源码两法;去 acme/自动 HTTPS 表述;结构/徽章同步;顶部加 Vivid logo(favicon.svg);视频 720p/1080p 分辨率对照表(DocsView) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
+5
-10
@@ -1,7 +1,7 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
# Frontend is open-source: built from source inside the image, then served by
|
||||
# nginx which also reverse-proxies the API and terminates TLS (certs from the
|
||||
# acme.sh sidecar via a shared volume).
|
||||
# nginx (HTTP only on :2000) which also reverse-proxies the API. TLS + domain are
|
||||
# handled by the user's own reverse proxy in front of this container.
|
||||
# ---- build stage ----
|
||||
FROM node:22-alpine AS build
|
||||
WORKDIR /app
|
||||
@@ -12,12 +12,7 @@ RUN npm run build
|
||||
|
||||
# ---- serve stage ----
|
||||
FROM nginx:1.27-alpine
|
||||
# openssl: self-signed bootstrap cert. The nginx image substitutes ${DOMAIN} in
|
||||
# /etc/nginx/templates/*.template at startup (limited to DOMAIN via the filter).
|
||||
RUN apk add --no-cache openssl
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY default.conf.template /etc/nginx/templates/default.conf.template
|
||||
COPY docker-entrypoint.d/10-selfsigned.sh /docker-entrypoint.d/10-selfsigned.sh
|
||||
COPY docker-entrypoint.d/30-cert-watch.sh /docker-entrypoint.d/30-cert-watch.sh
|
||||
RUN chmod +x /docker-entrypoint.d/10-selfsigned.sh /docker-entrypoint.d/30-cert-watch.sh
|
||||
EXPOSE 80 443
|
||||
# Plain config (no envsubst / no ${DOMAIN}) — copied straight into conf.d.
|
||||
COPY default.conf.template /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 2000
|
||||
|
||||
@@ -1,43 +1,16 @@
|
||||
# nginx for the docker stack. ${DOMAIN} is filled at container start (envsubst,
|
||||
# limited to DOMAIN via NGINX_ENVSUBST_FILTER). Port 80 serves the ACME
|
||||
# http-01 challenge and redirects everything else to HTTPS; port 443 serves the
|
||||
# SPA + reverse-proxies the API. Certs come from the shared volume, issued/renewed
|
||||
# by the acme.sh sidecar (a self-signed cert bootstraps 443 before the real one).
|
||||
|
||||
# ---- 80: ACME challenge + redirect to HTTPS ----
|
||||
# nginx for the docker stack — HTTP only on :2000. TLS + domain are handled by
|
||||
# the user's OWN reverse proxy placed in front of this container; this just serves
|
||||
# the SPA and reverse-proxies the API to the backend.
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name ${DOMAIN};
|
||||
|
||||
# acme.sh writes http-01 challenge files here (shared volume).
|
||||
location ^~ /.well-known/acme-challenge/ {
|
||||
root /var/www/acme;
|
||||
default_type "text/plain";
|
||||
}
|
||||
location / {
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
}
|
||||
|
||||
# ---- 443: the app ----
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
http2 on;
|
||||
server_name ${DOMAIN};
|
||||
|
||||
ssl_certificate /etc/nginx/certs/live/${DOMAIN}/fullchain.pem;
|
||||
ssl_certificate_key /etc/nginx/certs/live/${DOMAIN}/privkey.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_session_cache shared:SSL:10m;
|
||||
listen 2000;
|
||||
listen [::]:2000;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
client_max_body_size 50m;
|
||||
|
||||
# Proxy headers (inherited by all proxy_pass locations below).
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
@@ -61,12 +34,10 @@ server {
|
||||
}
|
||||
|
||||
# ---- API / media / health -> backend ----
|
||||
# 动态 API no-store,防止 CDN 缓存 GET 响应(如 managed-models)→ 改价不生效。
|
||||
location ^~ /admin/api/ { proxy_pass http://backend:6666; add_header Cache-Control "no-store" always; }
|
||||
location ^~ /images/ { proxy_pass http://backend:6666; }
|
||||
location = /health { proxy_pass http://backend:6666; }
|
||||
|
||||
# /v1 is per-API-key authenticated — must NOT be cached by any CDN/proxy.
|
||||
# /v1 is per-API-key authenticated — never cache.
|
||||
location ^~ /v1/ {
|
||||
proxy_pass http://backend:6666;
|
||||
add_header Cache-Control "no-store" always;
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
#!/bin/sh
|
||||
# Bootstrap a self-signed cert so nginx's 443 server block can start BEFORE
|
||||
# acme.sh has issued the real certificate. acme.sh later overwrites these files
|
||||
# in the shared volume; 30-cert-watch.sh reloads nginx when that happens.
|
||||
set -e
|
||||
D="${DOMAIN:-localhost}"
|
||||
CERT_DIR="/etc/nginx/certs/live/$D"
|
||||
mkdir -p "$CERT_DIR" /var/www/acme
|
||||
if [ ! -s "$CERT_DIR/fullchain.pem" ] || [ ! -s "$CERT_DIR/privkey.pem" ]; then
|
||||
echo "nginx: generating self-signed bootstrap cert for $D"
|
||||
openssl req -x509 -newkey rsa:2048 -nodes -days 3650 \
|
||||
-keyout "$CERT_DIR/privkey.pem" -out "$CERT_DIR/fullchain.pem" \
|
||||
-subj "/CN=$D" >/dev/null 2>&1
|
||||
fi
|
||||
@@ -1,20 +0,0 @@
|
||||
#!/bin/sh
|
||||
# Reload nginx whenever the certificate file changes — i.e. once acme.sh has
|
||||
# issued/renewed the real cert into the shared volume, nginx picks it up within
|
||||
# ~a minute without a container restart. Runs in the background so it doesn't
|
||||
# block startup.
|
||||
D="${DOMAIN:-localhost}"
|
||||
CERT="/etc/nginx/certs/live/$D/fullchain.pem"
|
||||
(
|
||||
last=""
|
||||
while true; do
|
||||
sleep 60
|
||||
cur="$(stat -c %Y "$CERT" 2>/dev/null || echo '')"
|
||||
if [ -n "$cur" ] && [ "$cur" != "$last" ]; then
|
||||
# Skip the very first observation (the self-signed bootstrap); only reload
|
||||
# on a genuine change (acme.sh overwrote the cert).
|
||||
[ -n "$last" ] && nginx -s reload 2>/dev/null || true
|
||||
last="$cur"
|
||||
fi
|
||||
done
|
||||
) &
|
||||
@@ -78,6 +78,18 @@ const sizeTable = [
|
||||
{ ratio: '1:3 · 竖', k1: '512x1536', k2: '768x2304', k4: '1280x3840' },
|
||||
]
|
||||
|
||||
// ---- 视频 size → 比例 × 分辨率(720p / 1080p)----
|
||||
// 视频按「短边」判档:短边 <1080 → 720p,≥1080 → 1080p;宽高比映射比例。
|
||||
const videoSizeTable = [
|
||||
{ ratio: '16:9 · 横', p720: '1280x720', p1080: '1920x1080' },
|
||||
{ ratio: '9:16 · 竖', p720: '720x1280', p1080: '1080x1920' },
|
||||
{ ratio: '1:1 · 方', p720: '720x720', p1080: '1080x1080' },
|
||||
{ ratio: '4:3 · 横', p720: '960x720', p1080: '1440x1080' },
|
||||
{ ratio: '3:4 · 竖', p720: '720x960', p1080: '1080x1440' },
|
||||
{ ratio: '3:2 · 横', p720: '1080x720', p1080: '1620x1080' },
|
||||
{ ratio: '2:3 · 竖', p720: '720x1080', p1080: '1080x1620' },
|
||||
]
|
||||
|
||||
// ---- examples (built in script so refs resolve correctly) ----
|
||||
const examples = computed(() => [
|
||||
{
|
||||
@@ -331,10 +343,10 @@ async function copy(text) {
|
||||
|
||||
<!-- size 对照表(课时表)—— 解决"传错分辨率" -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold mb-1">分辨率对照表 · <code class="text-white/70 text-sm">size</code> 该传什么</h2>
|
||||
<h2 class="text-lg font-semibold mb-1">图像分辨率对照表 · <code class="text-white/70 text-sm">size</code> 该传什么</h2>
|
||||
<p class="text-xs text-white/45 mb-3">
|
||||
左边选比例,上面选分辨率档,交叉格里就是 <code class="text-white/70">size</code> 要传的值(直接复制)。
|
||||
没有 <code class="text-white/70">quality</code> 参数,分辨率只看 <code class="text-white/70">size</code> 的长边。
|
||||
没有 <code class="text-white/70">quality</code> 参数,图像分辨率只看 <code class="text-white/70">size</code> 的<strong class="text-white/70">长边</strong>。
|
||||
档位必须是该模型支持的(见上方「可用模型」的分辨率列),不支持会自动回退到该模型最低档。
|
||||
</p>
|
||||
<div class="card overflow-hidden">
|
||||
@@ -359,6 +371,33 @@ async function copy(text) {
|
||||
例:想要 <strong class="text-white/70">2K 的 16:9 横图</strong> → <code class="text-white/70">"size": "2048x1152"</code>。
|
||||
留空 size = 默认 <strong class="text-white/70">1:1 · 2K</strong>。
|
||||
</p>
|
||||
|
||||
<!-- 视频分辨率(720p / 1080p,按短边判) -->
|
||||
<h2 class="text-lg font-semibold mb-1 mt-8">视频分辨率对照表 · <code class="text-white/70 text-sm">size</code> 该传什么</h2>
|
||||
<p class="text-xs text-white/45 mb-3">
|
||||
视频用 <code class="text-white/70">720p</code> / <code class="text-white/70">1080p</code> 两档,只看 <code class="text-white/70">size</code> 的<strong class="text-white/70">短边</strong>(短边 ≥1080 = 1080p,否则 720p)。
|
||||
档位必须是该视频模型支持的(如 grok-video 仅 720p),不支持会被拒。
|
||||
</p>
|
||||
<div class="card overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="text-left text-[11px] uppercase tracking-wider text-white/40 border-b border-white/[0.08]">
|
||||
<th class="px-4 py-2.5 font-medium">比例</th>
|
||||
<th class="px-4 py-2.5 font-medium">720p</th>
|
||||
<th class="px-4 py-2.5 font-medium">1080p</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="row in videoSizeTable" :key="row.ratio" class="border-b border-white/[0.04] last:border-0">
|
||||
<td class="px-4 py-2.5 text-white/75">{{ row.ratio }}</td>
|
||||
<td class="px-4 py-2.5 font-mono text-white/85">{{ row.p720 }}</td>
|
||||
<td class="px-4 py-2.5 font-mono text-white/85">{{ row.p1080 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-xs text-white/40 mt-2">
|
||||
例:想要 <strong class="text-white/70">720p 的 16:9 横版视频</strong> → <code class="text-white/70">"size": "1280x720"</code>;
|
||||
竖版 9:16 → <code class="text-white/70">"720x1280"</code>。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- examples -->
|
||||
|
||||
Reference in New Issue
Block a user