# 部署到 Hostinger [Hostinger](https://hostinger.com) 是一家流行的共享主机提供商。本指南介绍如何将 BentoPDF 部署到 Hostinger 的共享主机。 ## 前置条件 - 带有文件管理器访问权限的 Hostinger 主机套餐 - 本地已安装用于构建的 Node.js ## 第 1 步:构建项目 ```bash git clone https://github.com/alam00000/bentopdf.git cd bentopdf npm install npm run build ``` 构建产物位于 `dist` 文件夹中。 ## 第 2 步:上传到 Hostinger ### 根域名部署 1. 登录您的 Hostinger 账户 2. 前往 **File Manager** → **public_html** 3. **删除**所有现有文件(如有需要请先备份) 4. 将本地 `dist` 文件夹的全部内容**上传**到 `public_html` ### 子目录部署 如果部署到子目录(例如 `yourdomain.com/pdf-tools/`): 1. 使用正确的基础 URL 构建: ```bash BASE_URL=/pdf-tools/ npm run build ``` 2. 在 Hostinger 中创建文件夹: - 前往 **File Manager** → **public_html** - 新建文件夹:`pdf-tools` 3. 将 `dist` 的全部内容上传到 `public_html/pdf-tools/` ## 第 3 步:创建 .htaccess 文件 在部署文件夹的根目录(`public_html` 或 `public_html/pdf-tools/`)中创建 `.htaccess` 文件: ::: warning 重要 子目录部署时,请将 `RewriteBase /` 改为 `RewriteBase /pdf-tools/`(或您的文件夹名称)。 ::: ```apache RewriteEngine On RewriteBase / # ============================================ # 1. SECURITY HEADERS (CRITICAL FOR WASM) # ============================================ Header always set X-Frame-Options "SAMEORIGIN" Header always set X-Content-Type-Options "nosniff" Header always set X-XSS-Protection "1; mode=block" Header always set Referrer-Policy "strict-origin-when-cross-origin" Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()" # REQUIRED for soffice.js (SharedArrayBuffer) Header always set Cross-Origin-Opener-Policy "same-origin" Header always set Cross-Origin-Embedder-Policy "require-corp" # ============================================ # 2. BROWSER CACHING # ============================================ ExpiresActive On ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/wasm "access plus 1 year" ExpiresByType application/gzip "access plus 1 year" ExpiresByType text/html "access plus 0 seconds" # ============================================ # 3. COMPRESSION (STANDARD) # ============================================ # Prevent server from double-compressing files SetEnvIfNoCase Request_URI "\.gz$" no-gzip SetEnvIfNoCase Request_URI "\.br$" no-gzip SetEnvIfNoCase Request_URI "\.wasm$" no-gzip AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE font/woff AddOutputFilterByType DEFLATE font/ttf # ============================================ # 4. MIME TYPES & SPECIAL FILE HANDLING # ============================================ AddType application/javascript .js .mjs AddType application/wasm .wasm AddType font/woff2 .woff2 AddType font/woff .woff AddType image/webp .webp # Handle soffice.wasm.gz correctly ForceType application/wasm Header set Content-Encoding "gzip" Header set Cross-Origin-Resource-Policy "cross-origin" Header append Vary Accept-Encoding # Handle data.gz ForceType application/octet-stream Header set Content-Encoding "gzip" Header append Vary Accept-Encoding # ============================================ # 5. REDIRECTS & ROUTING # ============================================ # Canonical WWW (update domain as needed) RewriteCond %{HTTP_HOST} ^bentopdf\.com [NC] RewriteRule ^(.*)$ https://www.bentopdf.com/$1 [L,R=301] # Force HTTPS RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # Remove trailing slash (except for language root directories) RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !^/(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/$ RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [R=301,L] # Existing files/dirs - serve directly RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # ============================================ # 5.1. LANGUAGE ROUTES # ============================================ # Supported languages: de, es, zh, zh-TW, vi, it, id, tr, fr, pt # English has no prefix - served from root # English prefix redirects to root (for SEO consistency) RewriteRule ^en/?$ / [R=301,L] RewriteRule ^en/(.+)$ /$1 [R=301,L] # Language prefix root (e.g., /de/ -> /de/index.html) RewriteCond %{DOCUMENT_ROOT}/$1/index.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/?$ /$1/index.html [L] # Language prefix with path (e.g., /de/merge-pdf -> /de/merge-pdf.html) RewriteCond %{DOCUMENT_ROOT}/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /$1/$2.html [L] # ============================================ # 5.5. DOCS ROUTING (VitePress) # ============================================ RewriteCond %{REQUEST_URI} ^/docs RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html [L] # ============================================ # 6. ADD .HTML EXTENSION IF FILE EXISTS (ROOT LEVEL ONLY) # ============================================ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] # ============================================ # 7. ERROR PAGES # ============================================ ErrorDocument 404 /404.html ``` ## 子目录 .htaccess 示例 对于 `yourdomain.com/pdf-tools/`,请更新以下几行: ```apache RewriteBase /pdf-tools/ # ... (same content as above, but update paths) ... # Language prefix root RewriteCond %{DOCUMENT_ROOT}/pdf-tools/$1/index.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/?$ /pdf-tools/$1/index.html [L] # Language prefix with path RewriteCond %{DOCUMENT_ROOT}/pdf-tools/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /pdf-tools/$1/$2.html [L] # Root level .html extension RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] ErrorDocument 404 /pdf-tools/404.html ``` ## 故障排查 ### WASM 文件无法加载 请确认 `.htaccess` 中已正确设置 MIME 类型: ```apache AddType application/wasm .wasm ``` ### LibreOffice 工具无法使用 安全响应头对 SharedArrayBuffer 至关重要: ```apache Header always set Cross-Origin-Opener-Policy "same-origin" Header always set Cross-Origin-Embedder-Policy "require-corp" ``` 如果响应头没有生效,请联系 Hostinger 支持启用 `mod_headers`。 ### 刷新页面出现 404 错误 请确保 `.html` 扩展名规则和语言路由配置正确。BentoPDF 使用静态 HTML 文件,而不是 SPA 路由: ```apache # Language routes serve actual files from language directories RewriteCond %{DOCUMENT_ROOT}/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /$1/$2.html [L] # Root level pages RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] ``` ### 文件上传限制 Hostinger 可能对文件大小有限制。如果批量上传失败,请单独上传 WASM 文件。