Dockerisering av Flutter Web-app med dockeriserad Flutter-byggnad och Nginx

Bygga och värd Flutter Web-appar med Docker-containrar

Sidinnehåll

Flera exempel på Dockerfiler för att bygga och värdflera Flutter-webbappar, Ubuntu-baserad Flutter Build-bild + Webapp-bild på Nginx.

docker+flutter logotyper

All-in-one Dockerfile

En typisk Dockerfil för att bygga Flutter-webbappar kan se ut som den nedan. Den använder ubuntu:latest som grundläggande byggbild, installerar Flutter, bygger webbappen och kopierar den till nginx:alpine-bilden. Den resulterande bilden av den värdbaserade webbappen på nginx skulle vara lite mer än 73 MB, tack vare nginx:alpine:s storlek på 48.2MB.

FROM ubuntu:latest AS builder

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

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

# Lägg till byggargument
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Kopiera app-källkod
WORKDIR /app
COPY . .

# Hämta appberoenden
RUN flutter pub get

# Rensa eventuella befintliga byggningar och bygg för webben
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Steg 2 - Skapa den slutgiltiga bilden med nginx för att servera statiska filer
FROM nginx:alpine

# Kopiera byggnaden från byggarsteget
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopiera nginx-konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Hantera statiska tillgångar med korrekta MIME-typer \
    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; \
    } \
    \
    # Hantera Flutter-webbrouting \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Säkerhetsrubriker \
    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

# Exponera port
EXPOSE 80

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

Dockeriserad Flutter

Men om du har flera Flutter-webbappar som du arbetar med skulle dessa temporära filer för mellanbyggningsbilder ta upp något av din diskutrymme. Det gör det meningsfullt att skapa en enda bild för Flutter-bygg och återanvända den över projekten. Här nedan tar den 3.47GB på min dator bara en gång.

Här är en enkel Dockerfil för Flutter-byggbild. Spara den som en Dockerfile.flutter.

FROM ubuntu:latest AS builder

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

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

Låt oss bygga den med

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

Flutter Web App Förenklad Dockerfile

FROM rg-flutter:1.0 AS builder

# Lägg till byggargument
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Kopiera app-källkod
WORKDIR /app
COPY . .

# Hämta appberoenden
RUN flutter pub get

# Rensa eventuella befintliga byggningar och bygg för webben
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Steg 2 - Skapa den slutgiltiga bilden med nginx för att servera statiska filer
FROM nginx:alpine

# Kopiera byggnaden från byggarsteget
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopiera nginx-konfiguration
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Hantera statiska tillgångar med korrekta MIME-typer \
    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; \
    } \
    \
    # Hantera Flutter-webbrouting \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Säkerhetsrubriker \
    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

# Exponera port
EXPOSE 80

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

Användbara länkar