Implementeren met Apache

Host BentoPDF met Apache HTTP Server.

Vereisten

• Apache 2.4+
• mod_rewrite ingeschakeld
• SSL-certificaat (aanbevolen)

Stap 1: Bouw het project

git clone https://github.com/alam00000/bentopdf.git
cd bentopdf
npm install
npm run build

Wil je de huisstijl aanpassen, stel dan omgevingsvariabelen in voordat je bouwt:

VITE_BRAND_NAME="AcmePDF" VITE_BRAND_LOGO="images/acme-logo.svg" npm run build

Stap 2: Kopieer de bestanden

sudo mkdir -p /var/www/bentopdf
sudo cp -r dist/* /var/www/bentopdf/
sudo chown -R www-data:www-data /var/www/bentopdf

Stap 3: Apache-configuratie

Maak /etc/apache2/sites-available/bentopdf.conf aan:

<VirtualHost *:80>
    ServerName your-domain.com
    Redirect permanent / https://your-domain.com/
</VirtualHost>

<VirtualHost *:443>
    ServerName your-domain.com
    DocumentRoot /var/www/bentopdf

    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/your-domain.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/your-domain.com/privkey.pem

    <Directory /var/www/bentopdf>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # WASM MIME type
    AddType application/wasm .wasm

    # Prevent double-compression of pre-compressed files
    SetEnvIfNoCase Request_URI "\.gz$" no-gzip

    # Compression
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/json application/wasm
    </IfModule>

    # Cache headers
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresByType application/javascript "access plus 1 year"
        ExpiresByType text/css "access plus 1 year"
        ExpiresByType application/wasm "access plus 1 year"
        ExpiresByType image/png "access plus 1 year"
        ExpiresByType image/svg+xml "access plus 1 year"
    </IfModule>

    # Required headers for SharedArrayBuffer (LibreOffice WASM)
    Header always set Cross-Origin-Embedder-Policy "require-corp"
    Header always set Cross-Origin-Opener-Policy "same-origin"
    Header always set Cross-Origin-Resource-Policy "cross-origin"

    # Security headers
    Header always set X-Frame-Options "SAMEORIGIN"
    Header always set X-Content-Type-Options "nosniff"

    # Pre-compressed LibreOffice WASM files
    <FilesMatch "soffice\.wasm\.gz$">
        ForceType application/wasm
        Header set Content-Encoding "gzip"
    </FilesMatch>
    <FilesMatch "soffice\.data\.gz$">
        ForceType application/octet-stream
        Header set Content-Encoding "gzip"
    </FilesMatch>
</VirtualHost>

Stap 4: .htaccess voor routing

Maak /var/www/bentopdf/.htaccess aan:

RewriteEngine On
RewriteBase /

# Existing files/dirs - serve directly
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# ============================================
# 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
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]

# ============================================
# ADD .HTML EXTENSION (ROOT LEVEL)
# ============================================
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^([^/]+)$ $1.html [L]

ErrorDocument 404 /404.html

Stap 5: Schakel de vereiste modules in

sudo a2enmod rewrite
sudo a2enmod ssl
sudo a2enmod headers
sudo a2enmod expires
sudo a2enmod deflate

Stap 6: Schakel de site in

sudo a2ensite bentopdf.conf
sudo apache2ctl configtest
sudo systemctl reload apache2

Implementatie in een submap

Om te hosten op /pdf/:

1. Bouw met de basis-URL:

BASE_URL=/pdf/ npm run build

2. Werk .htaccess bij:

RewriteEngine On
RewriteBase /pdf/

# Existing files/dirs - serve directly
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Language routes
RewriteRule ^en/?$ /pdf/ [R=301,L]
RewriteRule ^en/(.+)$ /pdf/$1 [R=301,L]

RewriteCond %{DOCUMENT_ROOT}/pdf/$1/index.html -f
RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/?$ /pdf/$1/index.html [L]

RewriteCond %{DOCUMENT_ROOT}/pdf/$1/$2.html -f
RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /pdf/$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/404.html

Probleemoplossing

WASM 404-fouten

Controleer of het MIME-type is geconfigureerd:

AddType application/wasm .wasm

PDF ondertekenen of formulierinvuller toont een leeg weergavevenster (.mjs MIME-fout)

Als de browserconsole dit toont:

Failed to load module script: The server responded with a non-JavaScript
MIME type of "application/octet-stream". Strict MIME type checking is
enforced for module scripts per HTML spec.

...en het mislukte verzoek eindigt op .mjs, ontbreekt in je Apache-configuratie de koppeling .mjs → application/javascript. De meegeleverde PDF-viewer bevat ES-modulebestanden met de extensie .mjs, en de standaard mime.types van Apache bevat die niet.

Voeg toe aan je VirtualHost of .htaccess:

AddType application/javascript .mjs

Laad Apache daarna opnieuw:

sudo apache2ctl configtest && sudo systemctl reload apache2

Controleren: zoek in de browser-DevTools op het tabblad Network het mislukte .mjs-verzoek en bekijk de responsheader Content-Type. Die moet nu application/javascript zijn, niet application/octet-stream.

Rewrite werkt niet

Controleer of mod_rewrite is ingeschakeld:

sudo a2enmod rewrite

Word/ODT/Excel naar PDF werkt niet

LibreOffice WASM vereist SharedArrayBuffer, waarvoor deze headers nodig zijn:

Header always set Cross-Origin-Embedder-Policy "require-corp"
Header always set Cross-Origin-Opener-Policy "same-origin"

Daarnaast is een beveiligde context nodig. http://localhost werkt voor lokaal testen, maar http://192.168.x.x of andere LAN-IP's vereisen meestal HTTPS. Als de headers aanwezig zijn maar window.crossOriginIsolated nog steeds false is, controleer dan of de pagina via gewoon HTTP wordt geopend op een origin die geen loopback is.

De vooraf gecomprimeerde bestanden .wasm.gz en .data.gz hebben ook de juiste Content-Encoding nodig:

<FilesMatch "soffice\.wasm\.gz$">
    ForceType application/wasm
    Header set Content-Encoding "gzip"
</FilesMatch>
<FilesMatch "soffice\.data\.gz$">
    ForceType application/octet-stream
    Header set Content-Encoding "gzip"
</FilesMatch>

Zorg dat mod_headers is ingeschakeld: sudo a2enmod headers

Toegang geweigerd

sudo chown -R www-data:www-data /var/www/bentopdf
sudo chmod -R 755 /var/www/bentopdf