تجميع تطبيق Flutter للفيسبوك باستخدام تجميع Flutter المُعدّل بواسطة Docker و Nginx

بناء ونشر تطبيق Flutter Web باستخدام حاويات Docker

Page content

عدة أمثلة من ملفات Dockerfile لبناء وتشغيل تطبيقات Flutter الويب، صورة Flutter بناء قاعدة على Ubuntu + صورة تطبيق الويب على Nginx.

شعارات Docker+Flutter

ملف Dockerfile متكامل

قد يبدو ملف Dockerfile النموذجي لبناء تطبيقات Flutter الويب مثل المذكور أدناه. يستخدم هذا الملف ubuntu:latest كصورة بناء أساسية، يقوم بتثبيت Flutter، وبناء تطبيق الويب، وينسخه إلى صورة nginx:alpine. ستكون صورة النتيجة المضيفة على nginx تطبيق الويب حوالي 73 ميجابايت، وذلك بفضل حجم صورة nginx:alpine البالغ 48.2 ميجابايت.

FROM ubuntu:latest AS builder

# تثبيت التبعيات
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# تثبيت Flutter
RUN git clone https://github.com/flutter/flutter.git /flutter
ENV PATH="/flutter/bin:${PATH}"
RUN flutter doctor
RUN flutter channel stable
RUN flutter upgrade


# إضافة معلمة بناء
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# نسخ مصدر التطبيق
WORKDIR /app
COPY . .

# الحصول على تبعيات التطبيق
RUN flutter pub get

# تنظيف أي بناءات سابقة وبناء للويب
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# المرحلة 2 - إنشاء الصورة النهائية مع nginx لتقديم الملفات الثابتة
FROM nginx:alpine

# نسخ البناء من مرحلة المُنشئ
COPY --from=builder /app/build/web /usr/share/nginx/html

# نسخ تكوين nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # معالجة الموارد الثابتة مع أنواع MIME المناسبة \
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|json)$ { \
        expires 1y; \
        add_header Cache-Control "public, immutable"; \
        try_files $uri =404; \
    } \
    \
    # معالجة توجيهات Flutter للويب \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # رؤوس الأمان \
    add_header X-Frame-Options "SAMEORIGIN" always; \
    add_header X-Content-Type-Options "nosniff" always; \
    add_header X-XSS-Protection "1; mode=block" always; \
}' > /etc/nginx/conf.d/default.conf

# فتح المنفذ
EXPOSE 80

# تشغيل Nginx
CMD ["nginx", "-g", "daemon off;"]

Flutter المُعدّل Docker

لكن إذا كنت تعمل على عدة تطبيقات Flutter الويب، فإن هذه الملفات المؤقتة لصورة البناء الوسيطة ستستهلك بعض مساحة القرص. من المنطقي إنشاء صورة واحدة لبناء Flutter واستخدامها عبر المشاريع. الصورة أدناه تأخذ 3.47 جيجابايت فقط على جهازي.

هنا ملف Dockerfile بسيط لصورة بناء Flutter. احفظه باسم Dockerfile.flutter.

FROM ubuntu:latest AS builder

# تثبيت التبعيات
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# تثبيت Flutter
RUN git clone https://github.com/flutter/flutter.git /flutter
ENV PATH="/flutter/bin:${PATH}"
RUN flutter doctor
RUN flutter channel stable
RUN flutter upgrade

دعنا نبنيه باستخدام

docker build -f Dockerfile.flutter -t rg-flutter:1.0 .

ملف Dockerfile المبسط لتطبيق Flutter الويب

FROM rg-flutter:1.0 AS builder

# إضافة معلمة بناء
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# نسخ مصدر التطبيق
WORKDIR /app
COPY . .

# الحصول على تبعيات التطبيق
RUN flutter pub get

# تنظيف أي بناءات سابقة وبناء للويب
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# المرحلة 2 - إنشاء الصورة النهائية مع nginx لتقديم الملفات الثابتة
FROM nginx:alpine

# نسخ البناء من مرحلة المُنشئ
COPY --from=builder /app/build/web /usr/share/nginx/html

# نسخ تكوين nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # معالجة الموارد الثابتة مع أنواع MIME المناسبة \
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|json)$ { \
        expires 1y; \
        add_header Cache-Control "public, immutable"; \
        try_files $uri =404; \
    } \
    \
    # معالجة توجيهات Flutter للويب \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # رؤوس الأمان \
    add_header X-Frame-Options "SAMEORIGIN" always; \
    add_header X-Content-Type-Options "nosniff" always; \
    add_header X-XSS-Protection "1; mode=block" always; \
}' > /etc/nginx/conf.d/default.conf

# فتح المنفذ
EXPOSE 80

# تشغيل Nginx
CMD ["nginx", "-g", "daemon off;"]

روابط مفيدة