Dockerisasi Aplikasi Web Flutter dengan Pembuatan Flutter yang Didockerisasi dan Nginx

Bangun dan hosting aplikasi Flutter Web dengan kontainer Docker

Konten Halaman

Beberapa contoh Dockerfile untuk membangun dan menjalankan aplikasi Flutter web, Gambar Flutter Build berbasis Ubuntu + Gambar Webapp pada Nginx.

logo docker+flutter

Dockerfile All-in-one

Dockerfile tipeik untuk membangun aplikasi Flutter web mungkin terlihat seperti di bawah ini. Dockerfile ini menggunakan ubuntu:latest sebagai gambar dasar pembangunan, menginstal Flutter, membangun aplikasi web, dan menyalinnya ke gambar nginx:alpine. Gambar hasil akhir dari aplikasi web yang dihosting pada nginx akan sedikit lebih dari 73 MB, berkat ukuran nginx:alpine sebesar 48,2 MB.

FROM ubuntu:latest AS builder

# Menginstal dependensi
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Menginstal 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


# Menambahkan argumen pembangunan
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Menyalin sumber aplikasi
WORKDIR /app
COPY . .

# Mendapatkan dependensi aplikasi
RUN flutter pub get

# Membersihkan pembangunan sebelumnya dan membangun untuk web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Tahap 2 - Membuat gambar akhir dengan nginx untuk menyajikan file statis
FROM nginx:alpine

# Menyalin hasil pembangunan dari tahap pembangunan
COPY --from=builder /app/build/web /usr/share/nginx/html

# Menyalin konfigurasi nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Menangani aset statis dengan tipe MIME yang tepat \
    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; \
    } \
    \
    # Menangani routing aplikasi Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Header keamanan \
    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

# Menyediakan port
EXPOSE 80

# Memulai Nginx
CMD ["nginx", "-g", "daemon off;"]

Flutter yang Didockerisasi

Namun, jika Anda memiliki beberapa aplikasi Flutter web yang sedang Anda kerjakan, file sementara untuk gambar pembangunan antara akan menghabiskan sebagian ruang disk Anda. Membuat satu gambar untuk pembangunan Flutter dan menggunakannya kembali di berbagai proyek terdengar masuk akal. Gambar di bawah ini hanya mengambil 3,47 GB di komputer saya sekali saja.

Berikut adalah Dockerfile sederhana untuk gambar pembangunan Flutter. Simpanlah sebagai Dockerfile.flutter.

FROM ubuntu:latest AS builder

# Menginstal dependensi
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Menginstal 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

Mari kita bangun dengan

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

Dockerfile Sederhana untuk Aplikasi Flutter Web

FROM rg-flutter:1.0 AS builder

# Menambahkan argumen pembangunan
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Menyalin sumber aplikasi
WORKDIR /app
COPY . .

# Mendapatkan dependensi aplikasi
RUN flutter pub get

# Membersihkan pembangunan sebelumnya dan membangun untuk web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Tahap 2 - Membuat gambar akhir dengan nginx untuk menyajikan file statis
FROM nginx:alpine

# Menyalin hasil pembangunan dari tahap pembangunan
COPY --from=builder /app/build/web /usr/share/nginx/html

# Menyalin konfigurasi nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Menangani aset statis dengan tipe MIME yang tepat \
    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; \
    } \
    \
    # Menangani routing aplikasi Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Header keamanan \
    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

# Menyediakan port
EXPOSE 80

# Memulai Nginx
CMD ["nginx", "-g", "daemon off;"]

Tautan yang Berguna