फ्लैटर वेब एप्लिकेशन को डॉकर द्वारा बनाना, डॉकर द्वारा बनाए गए फ्लैटर बिल्ड के साथ एवं एनजीन्स के साथ
डॉकर कंटेनर के साथ फ्लूटर वेब एप्लिकेशन का बिल्ड और होस्ट करें
कई डॉकरफाइल्स बनाने और होस्टिंग करने के लिए फ्लूटर वेब एप्स के उदाहरण, एनजीनक्स पर बेस्ड फ्लूटर बिल्ड इमेज + वेबएप इमेज।
एकल डॉकरफाइल
फ्लूटर वेब एप्स बनाने के लिए एक सामान्य डॉकरफाइल नीचे दिखाए गए उदाहरण के समान दिख सकता है।
यह ubuntu:latest
को बेस बिल्ड इमेज के रूप में इस्तेमाल करता है, फ्लूटर को इंस्टॉल करता है, वेब एप्लिकेशन को बिल्ड करता है, और इसे nginx:alpine
इमेज में कॉपी करता है।
होस्ट किए गए वेब एप्लिकेशन के इमेज का आकार एनजीनक्स:अल्पाइन के आकार के कारण 73 मेगाबाइट से थोड़ा अधिक होगा, जो 48.2 मेगाबाइट है।
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;"]