如何使用 Docker 运行 Flutter Web 应用程序？

Question

我已经使用 Flutter 实现了我的第一个（正在运行的）Web 应用程序，现在我将使用 Docker（这对我来说相当新）来部署它来运行它。

我的文件夹结构如下：${workdir}/Dockerfile、${workdir}/docker-compose.yaml 和 ${workdir}/myprog 其中后者是我的 Intellij 项目目录，因此包含 pubspec.yaml 文件。后者与演示文件相同。

Dockerfile如下：

FROM ubuntu:20.04

# Prerequisites
RUN apt-get update && apt-get install -y unzip xz-utils git openssh-client curl && apt-get upgrade -y && rm -rf /var/cache/apt

# Install flutter beta
RUN curl -L https://storage.googleapis.com/flutter_infra/releases/beta/linux/flutter_linux_1.22.0-12.1.pre-beta.tar.xz | tar -C /opt -xJ

ENV PATH "$PATH:/opt/flutter/bin"

# Enable web capabilities
RUN flutter config --enable-web
RUN flutter upgrade
RUN flutter pub global activate webdev
RUN flutter doctor

# Initialize web-app
WORKDIR /opt/web

# Copy it into docker container
COPY ./myprog/ ./

和docker-compose.yaml 文件是

version: '3.1'
services:
  webapp:
    container_name: myprog
    restart: always
    image: myprog
    ports:
      - 5001:5001 
    build:
      context: ./
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    command: ["flutter", "pub", "global", "run", "webdev", "serve", "0.0.0.0:5001"]

我使用docker-compose -f docker-compose.yaml build 成功构建它，但使用docker-compose -f docker-compose.yaml up 运行它失败并显示以下错误消息

myprog    | webdev could not run for this project.
myprog    | Could not find a file named "pubspec.yaml" in "/opt/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_keyboard_visibility-3.2.2".
myprog    | pub finished with exit code 78

pubspec.yaml 的完整路径是/opt/web/pubspec.yaml。我该如何解决这个问题？

Answer 1

我认为您忘记在 docker 文件中安装依赖包。 在 Flutter 项目目录（包含 pubspec.yaml 的目录）中，您需要

RUN flutter pub get

在构建应用程序之前。

另外我认为你应该为 web 运行正确的构建命令。您应该参考指南 (https://flutter.dev/docs/get-started/web)

RUN flutter build web