Dockerizacja aplikacji Flutter Web z dockerizowanym budowaniem Flutter i Nginx

Tworzenie i hostowanie aplikacji Flutter Web z użyciem kontenerów Docker

Page content

Kilka przykładów Dockerfile do budowania i hostowania aplikacji Flutter web, Obraz budowania Flutter oparty na Ubuntu + obraz aplikacji webowej na Nginx.

docker+flutter logos

Jednoznaczny Dockerfile

Typowy Dockerfile do budowania aplikacji Flutter web może wyglądać jak poniżej. Używa ubuntu:latest jako podstawowego obrazu do budowania, instaluje Flutter, buduje aplikację webową i kopiuje ją do obrazu nginx:alpine. Wynikowy obraz aplikacji webowej hostowanej na nginx będzie nieco większy niż 73 MB, dzięki wielkości nginx:alpine wynoszącemu 48,2 MB.

FROM ubuntu:latest AS builder

# Instalacja zależności
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

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


# Dodanie argumentu budowania
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopia źródła aplikacji
WORKDIR /app
COPY . .

# Pobranie zależności aplikacji
RUN flutter pub get

# Wyczyszczenie istniejących budowań i budowanie dla weba
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Etap 2 - Utworzenie końcowego obrazu z Nginx do serwowania plików statycznych
FROM nginx:alpine

# Kopia budowania z etapu budowania
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopia konfiguracji Nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Obsługa statycznych zasobów z odpowiednimi typami 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; \
    } \
    \
    # Obsługa routingu aplikacji Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Nagłówki bezpieczeństwa \
    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

# Wyświetlanie portu
EXPOSE 80

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

Dockerizowany Flutter

Jeśli pracujesz nad wieloma aplikacjami Flutter web, tymczasowe pliki dla obrazu budowania pośredniego będą zużywać pewną ilość miejsca na dysku. Ma sens utworzenie pojedynczego obrazu do budowania Flutter i jego ponowne wykorzystanie w różnych projektach. Poniższy obraz zajmuje na moim komputerze tylko raz 3,47 GB.

Oto prosty Dockerfile do obrazu budowania Flutter. Zapisz go jako Dockerfile.flutter.

FROM ubuntu:latest AS builder

# Instalacja zależności
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

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

Zbuduj go poleceniem:

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

Uproszczony Dockerfile dla aplikacji Flutter Web

FROM rg-flutter:1.0 AS builder

# Dodanie argumentu budowania
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopia źródła aplikacji
WORKDIR /app
COPY . .

# Pobranie zależności aplikacji
RUN flutter pub get

# Wyczyszczenie istniejących budowań i budowanie dla weba
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Etap 2 - Utworzenie końcowego obrazu z Nginx do serwowania plików statycznych
FROM nginx:alpine

# Kopia budowania z etapu budowania
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopia konfiguracji Nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Obsługa statycznych zasobów z odpowiednimi typami 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; \
    } \
    \
    # Obsługa routingu aplikacji Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Nagłówki bezpieczeństwa \
    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

# Wyświetlanie portu
EXPOSE 80

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

Przydatne linki