bentopdf/docs/zh-TW/self-hosting/netlify.md

部署到 Netlify

Netlify 提供優秀的靜態網站託管服務，並有慷慨的免費方案。

一鍵部署

手動部署

步驟 1：連結儲存庫

1. 登入 Netlify
2. 點選「Add new site」→「Import an existing project」
3. 連結您的 GitHub 帳號
4. 選擇您的 BentoPDF 分支

步驟 2：設定建置選項

設定項目	值
建置指令	npm run build
發佈目錄	dist
Node 版本	18+

步驟 3：部署

點選「Deploy site」並等待建置完成。

設定檔

在專案根目錄建立 netlify.toml：

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

# Required security headers for SharedArrayBuffer (used by LibreOffice WASM)
[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Resource-Policy = "cross-origin"

# Pre-compressed LibreOffice WASM binary - must be served with Content-Encoding
[[headers]]
  for = "/libreoffice-wasm/soffice.wasm.gz"
  [headers.values]
    Content-Type = "application/wasm"
    Content-Encoding = "gzip"
    Cache-Control = "public, max-age=31536000, immutable"

# Pre-compressed LibreOffice WASM data - must be served with Content-Encoding
[[headers]]
  for = "/libreoffice-wasm/soffice.data.gz"
  [headers.values]
    Content-Type = "application/octet-stream"
    Content-Encoding = "gzip"
    Cache-Control = "public, max-age=31536000, immutable"

# Cache other WASM files
[[headers]]
  for = "*.wasm"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"
    Content-Type = "application/wasm"

# SPA routing
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

::: warning 重要 Word/ODT/Excel/PowerPoint 轉 PDF 需要 Cross-Origin-Embedder-Policy 與 Cross-Origin-Opener-Policy 標頭。沒有它們，SharedArrayBuffer 將無法使用，LibreOffice WASM 引擎也會初始化失敗。

.wasm.gz 與 .data.gz 檔案上的 Content-Encoding: gzip 標頭會告訴瀏覽器自動解壓縮。少了這些標頭，瀏覽器會收到原始 gzip 位元組，導致 WASM 編譯失敗。 :::

環境變數

在 Site settings → Environment variables 中設定：

變數	說明
SIMPLE_MODE	設為 true 以使用精簡建置
VITE_BRAND_NAME	自訂品牌名稱（取代「BentoPDF」）
VITE_BRAND_LOGO	相對於 public/ 的標誌路徑（例如 images/my-logo.svg）
VITE_FOOTER_TEXT	自訂頁尾或版權文字
VITE_DEFAULT_LANGUAGE	預設介面語言（例如 fr、de、es）

自訂網域

1. 前往 Site settings → Domain management
2. 點選「Add custom domain」
3. 依照 DNS 設定說明操作

大型媒體

對於大型 WASM 檔案，可考慮啟用 Netlify Large Media：

netlify lm:setup
git lfs track "*.wasm"

疑難排解

Word/ODT/Excel 轉 PDF 卡在 55%

如果文件轉換卡在 55%，請開啟開發者工具主控台並檢查：

console.log(window.crossOriginIsolated); // should be true
console.log(typeof SharedArrayBuffer); // should be "function"

如果 crossOriginIsolated 為 false，表示 netlify.toml 中的 COEP/COOP 標頭沒有套用。請確認檔案位於專案根目錄，然後重新部署。

如果您在主控台看到 expected magic word 00 61 73 6d, found 1f 8b 08 08，表示 .wasm.gz 檔案缺少 Content-Encoding: gzip 標頭。請確認 netlify.toml 中有 soffice.wasm.gz 與 soffice.data.gz 的 [[headers]] 區塊。

建置失敗

檢查 Node 版本相容性：

[build.environment]
  NODE_VERSION = "20"

初次載入緩慢

在 Site settings → Build & deploy → Asset optimization 中啟用資源最佳化。