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, installiert Flutter, erstellt die Webapp und kopiert sie in das nginx:alpine-Image. Das resultierende Image der auf Nginx gehosteten Webapp würde etwas mehr als 73 MB groß sein, dank der Größe von nginx:alpine mit 48,2 MB.

FROM ubuntu:latest AS builder

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

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


# Füge Build-Argument hinzu
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopiere App-Quellcode
WORKDIR /app
COPY . .

# Holen Sie sich die Abhängigkeiten der App
RUN flutter pub get

# Löschen Sie vorhandene Builds und erstellen Sie die Web-App
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stage 2 - Erstellen Sie das finale Image mit Nginx, um die statischen Dateien bereitzustellen
FROM nginx:alpine

# Kopieren Sie den Build aus der Builder-Stage
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieren Sie die Nginx-Konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Behandle statische 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; \
    } \
    \
    # Behandle 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

# Exponiere Port
EXPOSE 80

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

Dockerisierte Flutter

Wenn Sie mehrere Flutter Web Apps erstellen, die Sie bearbeiten, würden diese temporären Dateien für das Zwischenbildungsimage etwas von Ihrem Festplattenspeicher verbrauchen. Es macht Sinn, ein einziges Image für den Flutter-Build 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-Build-Image. Speichern Sie ihn als Dockerfile.flutter.

FROM ubuntu:latest AS builder

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

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

# Füge Build-Argument hinzu
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopiere App-Quellcode
WORKDIR /app
COPY . .

# Holen Sie sich die Abhängigkeiten der App
RUN flutter pub get

# Löschen Sie vorhandene Builds und erstellen Sie die Web-App
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stage 2 - Erstellen Sie das finale Image mit Nginx, um die statischen Dateien bereitzustellen
FROM nginx:alpine

# Kopieren Sie den Build aus der Builder-Stage
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieren Sie die Nginx-Konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Behandle statische 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; \
    } \
    \
    # Behandle 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

# Exponiere Port
EXPOSE 80

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