mirror of
https://github.com/alam00000/bentopdf.git
synced 2026-11-06 08:08:38 +01:00
140 lines
4.4 KiB
Markdown
140 lines
4.4 KiB
Markdown
# 部署到 Netlify
|
||
|
||
[Netlify](https://netlify.com) 提供優秀的靜態網站託管服務，並有慷慨的免費方案。
|
||
|
||
## 一鍵部署
|
||
|
||
[](https://app.netlify.com/start/deploy?repository=https://github.com/alam00000/bentopdf)
|
||
|
||
## 手動部署
|
||
|
||
### 步驟 1：連結儲存庫
|
||
|
||
1. 登入 [Netlify](https://app.netlify.com)
|
||
2. 點選「Add new site」→「Import an existing project」
|
||
3. 連結您的 GitHub 帳號
|
||
4. 選擇您的 BentoPDF 分支
|
||
|
||
### 步驟 2：設定建置選項
|
||
|
||
| 設定項目 | 值 |
|
||
| --------- | --------------- |
|
||
| 建置指令 | `npm run build` |
|
||
| 發佈目錄 | `dist` |
|
||
| Node 版本 | 18+ |
|
||
|
||
### 步驟 3：部署
|
||
|
||
點選「Deploy site」並等待建置完成。
|
||
|
||
## 設定檔
|
||
|
||
在專案根目錄建立 `netlify.toml`：
|
||
|
||
```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](https://docs.netlify.com/large-media/overview/)：
|
||
|
||
```bash
|
||
netlify lm:setup
|
||
git lfs track "*.wasm"
|
||
```
|
||
|
||
## 疑難排解
|
||
|
||
### Word/ODT/Excel 轉 PDF 卡在 55%
|
||
|
||
如果文件轉換卡在 55%，請開啟開發者工具主控台並檢查：
|
||
|
||
```js
|
||
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 版本相容性：
|
||
|
||
```toml
|
||
[build.environment]
|
||
NODE_VERSION = "20"
|
||
```
|
||
|
||
### 初次載入緩慢
|
||
|
||
在 Site settings → Build & deploy → Asset optimization 中啟用資源最佳化。
|