Dockerizzare un'app Flutter Web con costruzione Flutter dockerizzata e Nginx

Costruisci e ospita un'app Flutter Web con contenitori Docker

Indice

Vari esempi di Dockerfile per la costruzione e l’hosting di app Flutter web, immagine di costruzione Flutter basata su Ubuntu + immagine Webapp su Nginx.

loghi Docker+Flutter

Dockerfile tutto-in-uno

Un tipico Dockerfile per la costruzione di app Flutter web potrebbe somigliare a quello qui sotto. Utilizza ubuntu:latest come immagine base per la costruzione, installa Flutter, costruisce l’app web e la copia nell’immagine nginx:alpine. L’immagine risultante dell’app web ospitata su nginx sarebbe un po’ più di 73 MB, grazie alla dimensione di nginx:alpine di 48,2 MB.

FROM ubuntu:latest AS builder

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

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


# Aggiungi argomento di costruzione
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copia la sorgente dell'app
WORKDIR /app
COPY . .

# Ottieni le dipendenze dell'app
RUN flutter pub get

# Pulisci eventuali costruzioni esistenti e costruisci per web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Fase 2 - Crea l'immagine finale con nginx per servire i file statici
FROM nginx:alpine

# Copia la costruzione dalla fase builder
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copia la configurazione di nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Gestisci gli asset statici con i tipi MIME appropriati \
    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; \
    } \
    \
    # Gestisci la routing Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Intestazioni di sicurezza \
    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

# Espone la porta
EXPOSE 80

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

Flutter Dockerizzato

Ma se hai diversi progetti Flutter web su cui stai lavorando, quei file temporanei per l’immagine di costruzione intermedia occuperebbero un po’ dello spazio del disco. Ha senso creare un’unica immagine per la costruzione Flutter e riutilizzarla tra i progetti. Quella qui sotto occupa solo 3,47 GB sul mio PC.

Ecco un semplice Dockerfile per l’immagine di costruzione Flutter. Salvalo come Dockerfile.flutter.

FROM ubuntu:latest AS builder

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

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

Costruiscilo con

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

Dockerfile semplificato per l’app Flutter Web

FROM rg-flutter:1.0 AS builder

# Aggiungi argomento di costruzione
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copia la sorgente dell'app
WORKDIR /app
COPY . .

# Ottieni le dipendenze dell'app
RUN flutter pub get

# Pulisci eventuali costruzioni esistenti e costruisci per web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Fase 2 - Crea l'immagine finale con nginx per servire i file statici
FROM nginx:alpine

# Copia la costruzione dalla fase builder
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copia la configurazione di nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Gestisci gli asset statici con i tipi MIME appropriati \
    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; \
    } \
    \
    # Gestisci la routing Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Intestazioni di sicurezza \
    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

# Espone la porta
EXPOSE 80

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