FlutterWeb实战：07-自动化部署

Flutter Web 开发打包后，可以手动发布到服务器上，通过 nginx 来托管静态页面。本文将介绍如何将这一过程自动化。

整体思路

使用脚本自动化构建，然后使用 Docker 打包成镜像，最后部署在服务器上。

自动化构建

这里使用 GitLab-CI 来自动化构建。

整个流水线分为四步，分别是前端构建、Flutter Web 构建、Docker 镜像打包、以及部署。

前端构建

build-js:image: zacksleo/node:19stage: .prescript: |-CI_COMMIT_TAG=${CI_COMMIT_TAG:-latest}cd packages/apps/webyarn installsed -i "s/main.dart.js/main.dart.js?v=$CI_COMMIT_SHORT_SHA/g" src/index.jssed -i "s/flutter.js/flutter.js?v=$CI_COMMIT_SHORT_SHA/g" public/index.htmlyarn buildartifacts:paths:- packages/apps/web/webexpire_in: 60 mins

Flutter Web 构建

这里使用了 flutter build web 命令来构建 Flutter Web 应用，构建后批量对文件重命名，统一增加 Commit Hash 后缀，以解决缓存问题。

build-web:stage: buildscript: |-CI_COMMIT_TAG=${CI_COMMIT_TAG:-latest}echo $(git log -1 --pretty=%s | tail -1) > ./release.logcd packages/apps/webecho -e '\nHIDE_APP_BAR=true' >> envflutter build web --pwa-strategy none --build-number=$VERSION_CODE --build-name=$TAG --web-renderer html --base-href /webapp/cp .deploy/flutter.js build/web# 对part文件重命名，以解决缓存问题sed -i  "s/.part.js/.$CI_COMMIT_SHORT_SHA.part.js/g" build/web/main.dart.jssed -i  "s/.part.js/.$CI_COMMIT_SHORT_SHA.part.js/g" build/web/flutter_service_worker.jsfor file in build/web/main.dart.js_* ; do mv $file ${file//part/$CI_COMMIT_SHORT_SHA.part} ; doneneeds: ["build-js"]dependencies:- build-jsartifacts:paths:- packages/apps/web/build/web- ./release.logexpire_in: 120 mins

Docker 镜像打包

这里使用 Docker 来打包镜像，然后推送到 Docker 镜像仓库。打包时，替换了压缩版本的字体图标文件。

Dockerfile 文件配置

FROM nginx:alpine
COPY .deploy/nginx.conf /etc/nginx/nginx.conf
COPY build/web /usr/share/nginx/html

GitLab-CI 文件配置

dockerize:stage: dockerizeimage: docker:latestneeds: ["build-web"]dependencies:- build-webbefore_script: []script:- if [[ -z "$CI_COMMIT_TAG" ]];then-   CI_COMMIT_TAG="latest"- fi- cd packages/apps/web- cp build/web/fonts/MaterialIcons-Regular.otf build/web/assets/fonts- docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY- docker build --build-arg DEPLOY_ENV=$DEPLOY_ENV -t $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG .- docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG- docker rmi $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG || true

部署

这里使用了 rsync 来同步部署文件到服务器上，然后使用 docker-compose 拉取镜像和来启动服务。

prod-web:image: zacksleo/nodestage: releaseneeds: ["dockerize"]variables:DEPLOY_SERVER: "10.10.10.10"SSH_PORT: 22script:- cd packages/apps/web/.deploy- CI_COMMIT_TAG=${CI_COMMIT_TAG:-latest}- SSH_PORT=${SSH_PORT:-22}- rsync -rtvhze "ssh -p $SSH_PORT" . root@$DEPLOY_SERVER:/data/$CI_PROJECT_NAME   --stats- ssh -p $SSH_PORT root@$DEPLOY_SERVER "docker login -u gitlab-ci-token -p   $CI_JOB_TOKEN $CI_REGISTRY"- ssh -p $SSH_PORT root@$DEPLOY_SERVER "export COMPOSE_HTTP_TIMEOUT=120 && export   DOCKER_CLIENT_TIMEOUT=120 && cd /data/$CI_PROJECT_NAME && echo -e '\nTAG=$CI_COMMIT_TAG' >> .env && docker-compose pull $MODULE && docker-compose   stop $MODULE && docker-compose rm -f $MODULE && docker-compose up -d $MODULE"needs: ["dockerize"]

nginx 配置

user  nginx;
worker_processes  1;error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;keepalive_timeout  65;gzip  on;gzip_min_length 1k;gzip_comp_level 5;gzip_vary on;gzip_static on;gzip_types text/plain text/html text/css application/javascript application/x-javascript text/xml application/xml application/xml application/json;client_max_body_size 2M;server {listen 80;root /usr/share/nginx/html;location /webapp/ {rewrite ^/webapp(/.*)$ $1 last;index index.html index.htmtry_files $uri $uri/index.html $uri/ =404;}}
}