Flutter-Web-App mit dockerisierten Flutter-Build und Nginx dockerisieren

Flutter-Web-App mit Docker-Containern erstellen und hosten

Inhaltsverzeichnis

Mehrere Beispiele für Dockerfiles zur Erstellung und Bereitstellung von Flutter Web Apps, Ubuntu-basiertes Flutter-Build-Image + Webapp-Image auf Nginx.

docker+flutter logos

Einzelner Dockerfile

Ein typischer Dockerfile zur Erstellung von Flutter Web Apps könnte wie der untenstehende aussehen. Er verwendet ubuntu:latest als Basis-Image für den Build, installiert Flutter, erstellt die Webapp und kopiert sie in das nginx:alpine-Image. Das resultierende Image der auf Nginx gehosteten Webapp wäre etwas mehr als 73 MB, dank der Größe von nginx:alpine mit 48,2 MB.

FROM ubuntu:latest AS builder

# Installieren von Abhängigkeiten
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Installieren von 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


# Hinzufügen von Build-Argument
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopieren des App-Quellcodes
WORKDIR /app
COPY . .

# Abrufen der App-Abhängigkeiten
RUN flutter pub get

# Bereinigen vorhandener Builds und erstellen für Web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stage 2 - Erstellen des endgültigen Images mit Nginx zur Bereitstellung der statischen Dateien
FROM nginx:alpine

# Kopieren des Builds aus der Builder-Stage
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieren der Nginx-Konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Behandlung statischer Assets mit korrekten MIME-Typen \
    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; \
    } \
    \
    # Behandlung von Flutter Web-Routing \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Sicherheitsheader \
    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

# Port freigeben
EXPOSE 80

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

Dockerisierte Flutter

Wenn Sie mehrere Flutter Web Apps gleichzeitig bearbeiten, können diese temporären Dateien für Zwischenbuild-Images etwas von Ihrem Festplattenspeicher beanspruchen. Es macht Sinn, ein einziges Image für den Flutter-Builder zu erstellen und es über mehrere Projekte hinweg wiederverwenden. Das untenstehende Image benötigt auf meinem Rechner nur einmal 3,47 GB.

Hier ist ein einfacher Dockerfile für das Flutter-Builder-Image. Speichern Sie ihn als Dockerfile.flutter.

FROM ubuntu:latest AS builder

# Installieren von Abhängigkeiten
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Installieren von 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

Lassen Sie uns damit bauen:

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

Vereinfachter Dockerfile für Flutter Web App

FROM rg-flutter:1.0 AS builder

# Hinzufügen von Build-Argument
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopieren des App-Quellcodes
WORKDIR /app
COPY . .

# Abrufen der App-Abhängigkeiten
RUN flutter pub get

# Bereinigen vorhandener Builds und erstellen für Web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stage 2 - Erstellen des endgültigen Images mit Nginx zur Bereitstellung der statischen Dateien
FROM nginx:alpine

# Kopieren des Builds aus der Builder-Stage
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieren der Nginx-Konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Behandlung statischer Assets mit korrekten MIME-Typen \
    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; \
    } \
    \
    # Behandlung von Flutter Web-Routing \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Sicherheitsheader \
    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

# Port freigeben
EXPOSE 80

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