استضافة Flutter Web على VPS: Nginx وHTTPS وCaching وWebAssembly

Flutter لا يبني تطبيقات موبايل فقط، بل يبني تطبيقات ويب كاملة من نفس الكود. لكن بعد flutter build web، أين تستضيف الناتج وكيف تشغّله باحتراف؟ الاستضافة على خادم VPS تمنحك تحكّماً كاملاً في الأداء والترويسات والكاش. في هذا الدليل نشرح استضافة Flutter Web خطوة بخطوة على Nginx: من البناء إلى تشغيله على خادم إنتاج، مع ضبط الترويسات والكاش ودعم WebAssembly — وكل إعداد هنا اختبرناه فعلياً على خادم من مرام.

لماذا استضافة Flutter Web على VPS؟

تطبيق Flutter Web هو في جوهره ملفات ثابتة (HTML وJavaScript وWebAssembly وأصول)، يمكن استضافتها في أي مكان. لكن استضافته على VPS مع Nginx تمنحك ما لا توفّره الاستضافات المُدارة: تحكّم كامل في ترويسات الكاش والأمان، ودعم WebAssembly بترويساته الخاصة، وأداء ثابت، وتكلفة متوقّعة، وإمكانية دمجه مع خلفيتك (Laravel API) على نفس الخادم. لهذا فإن استضافة Flutter Web على VPS خيار المطوّر الجادّ.

خطوات النشر

كما في المخطط أعلاه، النشر ست خطوات واضحة: تبني التطبيق، ترفع الملفات، تهيّئ Nginx، تفعّل HTTPS، تضبط الكاش، وتضيف ترويسات WebAssembly عند الحاجة. لنمرّ عليها عملياً.

البناء ورفع الملفات

ابدأ ببناء نسخة الإنتاج. لتفعيل وضع WebAssembly (أداء أعلى) استخدم راية --wasm:

flutter build web --release --wasm

# الناتج في مجلد build/web — ارفعه إلى الخادم
rsync -avz build/web/ user@your-server:/var/www/flutterweb/

مجلد build/web يحتوي كل ما تحتاجه: index.html وmain.dart.js وملفات .wasm والأصول. انسخه إلى مجلد على خادمك (مثلاً /var/www/flutterweb).

استضافة Flutter Web: إعداد Nginx

هنا جوهر استضافة Flutter Web. تطبيق Flutter Web يعمل كـ«تطبيق صفحة واحدة» (SPA)، فيجب توجيه كل المسارات إلى index.html (SPA fallback)، وتقديم ملفات .wasm بترويسة MIME الصحيحة. هذا الإعداد اختبرناه فعلياً وتأكّدنا أنه يخدم بشكل صحيح:

server {
    listen 80;
    server_name yourapp.com;
    root /var/www/flutterweb;
    index index.html;

    # ترويسة MIME لملفات WebAssembly (ضرورية)
    location ~ \.wasm$ {
        types { application/wasm wasm; }
        default_type application/wasm;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
    # توجيه كل المسارات للتطبيق (SPA fallback)
    location / {
        try_files $uri $uri/ /index.html;
    }
}

تفعيل HTTPS

لا تطلق تطبيقاً بلا HTTPS. استخدم Let’s Encrypt المجاني عبر Certbot ليُصدر الشهادة ويحدّث Nginx للتشفير والتحويل التلقائي من HTTP:

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d yourapp.com -d www.yourapp.com

الكاش الذكي والضغط

الكاش الصحيح هو سرّ سرعة استضافة Flutter Web مع تحديثات فورية. القاعدة بسيطة وذكية:

# الأصول ذات البصمة (js/css/wasm/assets) — كاش طويل دائم
location ~* \.(js|css|wasm|png|jpg|svg|woff2|json)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}
# index.html — بلا كاش ليصل التحديث فوراً
location = /index.html {
    add_header Cache-Control "no-cache, must-revalidate";
}
# فعّل الضغط لتصغير الحجم
gzip on;
gzip_types application/javascript application/wasm text/css application/json;

لماذا هذا مهمّ؟ أسماء ملفات Flutter تحمل «بصمة» تتغيّر مع كل بناء، فيمكن تخزينها للأبد بأمان. أما index.html فيبقى بلا كاش ليرى المستخدم النسخة الجديدة فور نشرها.

WebAssembly: ما يجب ضبطه

WebAssembly يمنح Flutter Web أداءً أعلى ورسماً أنعم، لكنه يتطلّب ضبطاً على الخادم:

• ترويسة MIME: يجب تقديم .wasm بترويسة application/wasm — وإلا يفشل تحميل التطبيق (ضبطناها في إعداد Nginx أعلاه).
• البناء: استخدم --wasm للاستفادة من الأداء الأعلى.
• الترويسات المتقاطعة: لبعض ميزات WASM المتقدّمة (الخيوط/SharedArrayBuffer) أضِف Cross-Origin-Opener-Policy وCross-Origin-Embedder-Policy.
• الضغط: فعّل gzip/brotli لملفات .js و.wasm فهي كبيرة نسبياً.

الخلاصة

استضافة Flutter Web على VPS مع Nginx تمنحك أداءً وتحكّماً لا توفّرهما الحلول المُدارة: توجيه SPA صحيح، ودعم WebAssembly بترويساته، وكاش ذكي يجمع بين السرعة والتحديث الفوري، وHTTPS مجاني. وكل إعداد في هذا الدليل مُختبَر فعلياً. ابنِ تطبيقك، ارفعه، اضبط Nginx كما شرحنا — وستحصل على تطبيق ويب سريع واحترافي تتحكّم به بالكامل. للمزيد راجع توثيق Flutter الرسمي.