फ्लैटर वेब एप्लिकेशन को डॉकर के साथ डॉकराइज करें, जिसमें डॉकराइज्ड फ्लैटर बिल्ड और एनजीन्क्स के साथ है

डॉकर कंटेनर के साथ Flutter वेब एप्लिकेशन का निर्माण और होस्टिंग

Page content

कई डॉकरफाइल्स बनाने और होस्टिंग करने के लिए फ्लूटर वेब एप्स के उदाहरण, एनजीनक्स पर आधारित फ्लूटर बिल्ड छवि + वेब एप्लिकेशन छवि।

डॉकर+फ्लूटर लोगो

एकल डॉकरफाइल

फ्लूटर वेब एप्लिकेशन बनाने के लिए एक सामान्य डॉकरफाइल नीचे दिखाए गए एक के जैसा दिख सकता है। यह ubuntu:latest को बेस बिल्ड छवि के रूप में इस्तेमाल करता है, फ्लूटर को इंस्टॉल करता है, वेब एप्लिकेशन को बिल्ड करता है, और इसे nginx:alpine छवि में कॉपी करता है। होस्टेड वेब एप्लिकेशन के लिए परिणामी छवि 73 MB से थोड़ा अधिक होगी, एनजीनक्स:अल्पाइन के आकार के कारण 48.2MB।

FROM ubuntu:latest AS builder

# निर्भरताओं को इंस्टॉल करें
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# फ्लूटर को इंस्टॉल करें
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}

# अंतिम छवि बनाएं जो एनजीनक्स के साथ स्टैटिक फ़ाइलों को सर्व करता है
FROM nginx:alpine

# बिल्डर स्टेज से बिल्ड कॉपी करें
COPY --from=builder /app/build/web /usr/share/nginx/html

# एनजीनक्स विनिर्देशन कॉपी करें
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; \
    } \
    \
    # फ्लूटर वेब रूटिंग के संचालन करें \
    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

# एनजीनक्स शुरू करें
CMD ["nginx", "-g", "daemon off;"] 

डॉकर बिल्ड फ्लूटर

लेकिन अगर आपके पास कई फ्लूटर वेब एप्लिकेशन हैं जिन पर आप काम कर रहे हैं, तो इन्टरमीडिएट बिल्ड छवि के लिए अस्थायी फ़ाइलें आपके डिस्क स्पेस को खाली कर देंगी। इसके बजाय फ्लूटर बिल्ड के लिए एक छवि बनाना और इसे प्रोजेक्ट्स के बीच पुनर्उपयोग करना बेहतर होगा। नीचे दिए गए एक छवि मेरे पीसी पर केवल एक बार 3.47 जीबी लेता है।

यहां एक सरल डॉकरफाइल फ्लूटर बिल्ड छवि के लिए है। इसे Dockerfile.flutter के रूप में सहेजें।

FROM ubuntu:latest AS builder

# निर्भरताओं को इंस्टॉल करें
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# फ्लूटर को इंस्टॉल करें
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 .

सरलीकृत डॉकरफाइल फ्लूटर वेब एप्लिकेशन

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}

# अंतिम छवि बनाएं जो एनजीनक्स के साथ स्टैटिक फ़ाइलों को सर्व करता है
FROM nginx:alpine

# बिल्डर स्टेज से बिल्ड कॉपी करें
COPY --from=builder /app/build/web /usr/share/nginx/html

# एनजीनक्स विनिर्देशन कॉपी करें
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; \
    } \
    \
    # फ्लूटर वेब रूटिंग के संचालन करें \
    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

# एनजीनक्स शुरू करें
CMD ["nginx", "-g", "daemon off;"] 

उपयोगी लिंक