DockerでFlutter Webアプリを構築する：Docker化されたFlutterビルドとNginxを使用して

Dockerコンテナを使用してFlutter Webアプリを構築およびホストする

目次

いくつかの例として、Flutter Webアプリを構築およびホスティングするためのDockerfile、UbuntuベースのFlutterビルドイメージ＋WebアプリイメージをNginx上に配置する方法があります。

docker+flutterロゴ

すべてを1つにまとめたDockerfile

Flutter Webアプリを構築するための典型的なDockerfileは以下のようになります。 このDockerfileはubuntu:latestをベースイメージとして使用し、Flutterをインストールし、Webアプリを構築し、それをnginx:alpineイメージにコピーします。 NginxでホストされたWebアプリの結果として得られるイメージは、Nginx:alpineのサイズが48.2MBであるため、73MBを超えることがあります。

FROM ubuntu:latest AS builder

# 依存関係のインストール
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# 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


# ビルド引数の追加
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# アプリのソースコードのコピー
WORKDIR /app
COPY . .

# アプリの依存関係の取得
RUN flutter pub get

# 既存のビルドをクリーンし、Web用にビルド
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# ステージ2 - 最終イメージの作成（Nginxで静的ファイルを提供）
FROM nginx:alpine

# ビルダー段階からの構築結果のコピー
COPY --from=builder /app/build/web /usr/share/nginx/html

# Nginx設定のコピー
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # 静的アセットを適切な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; \
    } \
    \
    # Flutter Webのルーティング処理 \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # セキュリティヘッダー \
    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

# ポートの公開
EXPOSE 80

# Nginxの起動
CMD ["nginx", "-g", "daemon off;"]

Docker化されたFlutter

複数のFlutter Webアプリを開発している場合、中間ビルドイメージ用のテンポラリファイルはディスクスペースを消費します。そのため、Flutterのビルドに使用する単一のイメージを作成し、プロジェクト間で再利用することが理にかなっています。このイメージは、私のPCでは一度だけ3.47GBを占有します。

以下は、Flutterビルドイメージ用のシンプルなDockerfileです。Dockerfile.flutterとして保存してください。

FROM ubuntu:latest AS builder

# 依存関係のインストール
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# 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

これを以下のようにビルドしてください。

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

Flutter Webアプリの簡略化されたDockerfile

FROM rg-flutter:1.0 AS builder

# ビルド引数の追加
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# アプリのソースコードのコピー
WORKDIR /app
COPY . .

# アプリの依存関係の取得
RUN flutter pub get

# 既存のビルドをクリーンし、Web用にビルド
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# ステージ2 - 最終イメージの作成（Nginxで静的ファイルを提供）
FROM nginx:alpine

# ビルダー段階からの構築結果のコピー
COPY --from=builder /app/build/web /usr/share/nginx/html

# Nginx設定のコピー
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # 静的アセットを適切な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; \
    } \
    \
    # Flutter Webのルーティング処理 \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # セキュリティヘッダー \
    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

# ポートの公開
EXPOSE 80

# Nginxの起動
CMD ["nginx", "-g", "daemon off;"]

有用なリンク