生产环境Flutter Web应用如何编写正确Dockerfile完成容器化部署？

核心问题原因 #

你当前部署后出现空白页的核心原因有3点：

• 产物复制路径错误：执行flutter build web后，生产产物默认输出到项目根目录的build/web文件夹下，你Dockerfile中写的COPY ./web对应路径不存在，导致Nginx无法读取到正确的入口文件
• 缺少单页应用路由适配：Flutter Web默认使用History模式路由，Nginx默认配置未做路由重定向，访问非根路径或者刷新页面会触发404，也会导致首页资源加载异常
• 未做静态资源加载优化：生产环境缺少gzip压缩配置会导致资源加载过慢，部分场景下也会出现长时间空白

正确操作步骤 #

第一步 构建Flutter Web生产产物 #

• 若应用部署在域名根路径，执行构建命令：
  flutter build web --release
• 若应用部署在域名子路径（例如https://yourdomain.com/app/），执行构建命令时指定base href：
  flutter build web --release --base-href "/app/"

第二步 编写Nginx自定义配置 #

在项目根目录新建default.conf文件，内容如下：

server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # 适配Flutter History路由，所有请求重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 开启gzip压缩，提升静态资源加载速度
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;
}

精简版Dockerfile（本地已完成Flutter构建场景） #

FROM nginx:1.21.1-alpine
# 复制自定义Nginx配置覆盖默认配置
COPY default.conf /etc/nginx/conf.d/default.conf
# 复制Flutter构建后产物到Nginx静态资源目录
COPY build/web /usr/share/nginx/html
# 暴露80端口
EXPOSE 80

多阶段构建版Dockerfile（无需本地安装Flutter环境场景） #

可以直接在镜像构建流程中完成Flutter代码编译，无需本地配置Flutter开发环境：

# 构建阶段：使用官方Flutter镜像编译Web产物
FROM cirrusci/flutter:3.13.0 AS builder
WORKDIR /app
COPY . .
RUN flutter pub get
RUN flutter build web --release

# 运行阶段：使用Nginx提供静态资源服务
FROM nginx:1.21.1-alpine
COPY default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build/web /usr/share/nginx/html
EXPOSE 80

验证方法 #

1. 构建镜像命令：docker build -t flutter-web-app .
2. 启动容器命令：docker run -d -p 8080:80 flutter-web-app
3. 访问http://localhost:8080即可正常访问应用，刷新页面也不会出现404问题

内容的提问来源于stack exchange，提问作者Chris G.