当前位置：首页 > news >正文

FlutterWeb实战：07-自动化部署

news 来源：原创 2025/5/15 22:15:15

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;}}
}

GitLab CI/CD 入门

FlutterWeb实战：07-自动化部署

Flutter Web 开发打包后，可以手动发布到服务器上，通过 nginx 来托管静态页面。本文将介绍如何将这一过程自动化。整体思路使用脚本自动化构建，然后使用 Docker 打包成镜像，最后部署在服务器上。自动化构建这里使用 GitLab-…...

编程日记 2025/5/15 22:15:15

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20020.%20%E5%9B%9E%E6%96%87%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E4%B8%AA%E6%95%B0/README.md 剑指 Offer II 020. 回文子字符串的个数题目描述 …...

编程日记 2025/5/12 11:22:31

vue中附件下载及打印功能

1.附件dom 注：fileList是由后台返回的附件数组，数组中包含附件名称fileName,附件地址url，附件id等信息 <el-form-item label"附件" style"width: 100% !important;" v-if"modelTypeborrowDetail"><d…...

编程日记 2025/5/15 21:21:12

Python(十九)实现各大跨境船公司物流查询数据处理优化

一、前言之前已经实现了常用跨境物流船司基础信息查询功能，如下所示实现各大跨境船公司[COSCO/ZIM/MSK/MSC/ONE/PIL]的物流信息查询：https://blog.csdn.net/Makasa/article/details/145484999?spm1001.2014.3001.5501 然后本章在其基础上做了一些…...

编程日记 2025/5/15 9:41:00

android 安装第三方apk自动赋予运行时权限

摘要：行业机使用场景点击运行时权限很麻烦，而随着android的演进，对于权限的管控越发严格。故本文通过对系统的修改实现第三方app在运行时直接获取全部权限。通过属性ro.perms.force_grant控制功能开关。 Index: frameworks/base/services/…...

编程日记 2025/5/15 20:43:27

java8、9新特性

JAVA8 Lambda 表达式 (parameters) -> expression 或 (parameters) ->{ statements; } 提供了一种更为简洁的语法，尤其适用于函数式接口。相比于传统的匿名内部类，Lambda 表达式使得代码更为紧凑，减少了样板代码的编写。它允许将函…...

编程日记 2025/5/15 20:19:38

程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图＜9＞

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。这一节是对之前内容的修整目录一、传值调用和传址调用二、数组名的理解三、指针访问数组四、结尾一…...

编程日记 2025/5/15 21:21:11

Java网络编程入门

网络编程是指通过计算机网络进行数据传输和通信的过程。在Java中，网络编程提供了一套强大的API，使得开发者能够轻松地创建网络应用程序。本文将介绍Java网络编程的基本概念和一些常用的类。 1.网络编程的基本概念在网络编程中，我们通常需要…...

编程日记 2025/5/15 21:17:50

2.4 构建模块化应用

第4章：构建模块化应用模块化应用是 JDK 9 的核心特性之一，通过模块化系统（Project Jigsaw）实现代码的强封装和显式依赖管理。本章详细讲解如何从零构建一个模块化应用，包括模块定义、编译、打包、运行及调试。 4.1 模…...

编程日记 2025/5/15 20:52:06

14.1 Auto-GPT 项目定位与价值解读：揭开自主智能体的神秘面纱

Auto-GPT 项目定位与价值解读：揭开自主智能体的神秘面纱关键词：Auto-GPT 核心机制、自主任务分解、LangChain 智能体、持续自我优化、AGI 实践路径一、为什么 Auto-GPT 能引爆技术圈？ 1.1 从工具到员工的范式转移维度传统AI系统Auto-GPT 智能体输入方式精确指令（“翻译…...

编程日记 2025/5/11 17:56:18

【Elasticsearch】分析器的构成

在Elasticsearch中，分析器（Analyzer）是一个处理文本数据的管道，它将输入的文本转换为一系列词元（tokens），并可以对这些词元进行进一步的处理和规范化。分析器由以下三个主要组件构成&#xff1a…...

编程日记 2025/5/11 18:00:06

2025 年前端开发现状分析：卷疯了还是卷麻了？

一、前端现状：框架狂飙，开发者崩溃如果你是个前端开发者，那么你大概率经历过这些场景： 早上打开 CSDN（或者掘金，随便），发现又有新框架发布了，名字可能是 VueXNext.js 之…...

编程日记 2025/5/15 8:51:51

单例模式详解（Java）

单例模式详解（Java）一、引言 1.1 概述单例模式的基本概念和重要性单例模式是一种常用的软件设计模式，它确保一个类在整个应用程序中只有一个实例，并提供一个全局访问点来访问这个唯一实例。这种模式在资源管理、配置设置和日志记录等方面非常有用，因为它们通常只需要…...

编程日记 2025/5/15 20:29:01

后端面试题

以下是一些常见的后端面试题：一、通用基础请简述HTTP协议的工作原理。答案： HTTP是基于请求 - 响应模型的协议。客户端（通常是浏览器）向服务器发送一个HTTP请求，请求包含请求行（包含请求方法，如GET、POST等、请求的URL和HTTP版本）、请求头（包含诸如浏览器类型、接…...

编程日记 2025/5/15 20:13:47

深入理解Linux网络随笔（一）：内核是如何接收网络包的（上篇）

深入理解Linux网络随笔（一）：内核是如何接收网络包的（上篇） 1、TCP/IP模型概述从Linux视角看，TCP/IP网络分层模型包括用户空间和内核空间。用户空间（应用层）负责HTTP、FTP等协议的…...

编程日记 2025/5/15 20:23:14

SQL-leetcode—1393. 股票的资本损益

1393. 股票的资本损益 Stocks 表： ---------------------- | Column Name | Type | ---------------------- | stock_name | varchar | | operation | enum | | operation_day | int | | price | int | ---------------------- (stock_name, operation_day) 是这张…...

编程日记 2025/5/9 7:04:01

热更图片方案

项目平常需要对线上一些图片资源修正，所以需要热更图片功能。远端入口新增字段配json文件 {"1.1.22030303":{"sprite":{"assets/ui/common/images/acient_gold.png" : "https://aaaa.png","assets/ui/common/image…...

编程日记 2025/5/11 22:22:49

Flutter PIP 插件 ---- iOS Video Call

以下是一篇关于在 iOS 中实现画中画(PiP)功能的技术博客: iOS 画中画(PiP)功能实现指南简介画中画(Picture in Picture, PiP)是一项允许用户在使用其他应用时继续观看视频内容的功能。本文将详细介绍如何在 iOS 应用中实现 PiP 功能。系统要求 iOS 15.0 及以上版本AVKi…...

编程日记 2025/5/11 18:00:08

本地部署DeepSeek开源大模型：从零开始的详细教程

友情提示：本文内容全部由银河易创（https://ai.eaigx.com）AI创作平台deepseek-reasoner模型生成，仅供参考。请根据具体情况和需求进行适当的调整和验证。近年来，随着人工智能技术的飞速发展，大模型在各个领…...

编程日记 2025/5/12 21:01:54

java项目之基于SSM会议管理系统的设计与实现源码(ssm+mysql)

项目简介基于SSM会议管理系统的设计与实现实现了以下功能： 基于SSM会议管理系统的设计与实现的主要使用者分为：管理员登录后修改个人的密码。用户管理中，对公司内的用户进行管理，包括会议管理员和员工，管理部门信息…...

编程日记 2025/5/11 18:00:10

PortSwigger——WebSockets vulnerabilities

文章目录一、WebSockets二、Lab: Manipulating WebSocket messages to exploit vulnerabilities三、Lab: Manipulating the WebSocket handshake to exploit vulnerabilities四、Using cross-site WebSockets to exploit vulnerabilities4.1 跨站WebSocket劫持（cro…...

编程日记 2025/5/11 2:14:01

STM32系统架构介绍

STM32系统架构 1. CM3/4系统架构2. CM3/4系统架构-----存储器组织结构2.1 寄存器地址映射（特殊的存储器）2.2 寄存器地址计算2.3 寄存器的封装 3. CM3/4系统架构-----时钟系统 STM32 和 ARM 以及 ARM7是什么关系? ARM 是一个做芯片标准的公司&#xff0c…...

编程日记 2025/5/15 21:47:51

智能GUI Agent是什么，有什么应用领域

智能GUI Agent是什么研究背景与目的：GUI长期主导人机交互，LLM特别是多模态模型的出现，为GUI自动化带来变革，催生了基于LLM的GUI智能体。这些智能体可理解自然语言指令，处理复杂GUI元素并执行操作，改变了用户与软件交互方式。论文旨在梳理该领域发展脉络，剖析关键要素，…...

编程日记 2025/5/12 12:57:19

Python3操作MongoDB批量upsert

个人博客地址：Python3操作MongoDB批量upsert | 一张假钞的真实世界代码如下： mongoClient MongoClient(mongodb://172.16.72.213:27017/) opsDb mongoClient.ops azScheduled opsDb.azScheduledFlowbulkOpers [] for flow in scheduledFlows.valu…...

编程日记 2025/5/13 22:34:07

3dgs 2025 学习笔记

CVPR 2024 3D方向总汇包含（3DGS、三维重建、深度补全、深度估计、全景定位、表面重建和特征匹配等）_cvpr2024-structure-awaresparse-viewx-ray3dreconstr-CSDN博客 https://github.com/apple/ml-hugs 3DGS COLMAP-Free 3D Gaussian Splatting ⭐code &…...

编程日记 2025/5/10 12:14:15

大模型笔记：pytorch实现MOE

0 导入库 import torch import torch.nn as nn import torch.nn.functional as F 1 专家模型 #一个简单的专家模型，可以是任何神经网络架构 class Expert(nn.Module):def __init__(self, input_size, output_size):super(Expert, self).__init__()self.fc nn.L…...

编程日记 2025/5/14 21:39:39

C#/.NET/.NET Core技术前沿周刊 | 第 25 期（2025年2.1-2.9）

前言 C#/.NET/.NET Core技术前沿周刊，你的每周技术指南针！记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿，助力技术成长与视野拓宽。欢迎投稿、推荐…...

编程日记 2025/5/15 20:26:11

package.json 文件配置

创建 Node.js 的配置文件 package.json npm init -y package.json 文件配置说明配置说明示例name指定项目的名称，必须是小写字母，可以包含字母、数字、连字符（-）或下划线（_），不能有特殊字符…...

编程日记 2025/5/15 13:19:49

相机模数转换

模拟图像是什么？ 模拟图像是指连续变化的图像，它通常来源于现实世界的物理场景，并通过光学系统（如相机镜头）投射到感光介质上。模拟图像是连续的，这意味着它在空间和颜色值上都有无穷的细节。例如&#xf…...

编程日记 2025/5/15 0:48:34

mysql大数据量分页查询

一、什么是‌MySQL大数据量分页查？ MySQL大数据量分页查‌是指在使用MySQL数据库时，将大量数据分成多个较小的部分进行显示，以提高查询效率和用户体验。分页查询通常用于网页或应用程序中，以便用户能够逐步浏览结果集。二、为什…...

编程日记 2025/5/15 21:54:38

组织结构改革：激活企业活力的 “源头活水”

难以适应市场变化、内部沟通与协作不畅、决策效率低下、运营成本增加、人才流失严重、员工士气下降、战略目标难以实现……企业如何根据市场环境变化和自身发展需求，灵活调整组织框架，赋能企业的持续健康发展？ 某国有投资建设集团旗下的二级…...

编程日记 2025/5/15 21:04:32

金融风控项目-1

文章目录一. 案例背景介绍二. 代码实现1. 加载数据2. 数据处理3. 查询三. 业务解读一. 案例背景介绍通过对业务数据分析了解信贷业务状况数据集说明从开源数据改造而来，基本反映真实业务数据销售，客服可以忽略账单周期，放款日期账单金…...

编程日记 2025/5/15 20:52:06

Java常用设计模式面试题总结(内容详细，简单易懂)

设计模式的分类创建型模式：通过隐藏对象创建的细节，避免直接使用 new 关键字实例化对象，从而使程序在判断和创建对象时更具灵活性。常见的模式包括： 工厂模式抽象工厂模式单例模式建造者模式原型模式结构型模式：通…...

编程日记 2025/5/15 21:15:29

【Elasticsearch】文本分析Text analysis概述

文本分析概述文本分析使 Elasticsearch 能够执行全文搜索，搜索结果会返回所有相关的结果，而不仅仅是完全匹配的结果。如果你搜索“Quick fox jumps”，你可能希望找到包含“A quick brown fox jumps over the lazy dog”的文档&#xff0c…...

编程日记 2025/5/15 20:32:56

ATF系统安全从入门到精通

CSDN学院课程连接：https://edu.csdn.net/course/detail/39573...

编程日记 2025/5/9 8:38:21

C# 上位机--变量

C# 上位机--变量在 C# 上位机开发领域，变量是构建程序逻辑的基础元素之一。它就像是一个容器，用于存储各种类型的数据，从简单的数值到复杂的对象。正确理解和使用变量，对于开发出高效、稳定且易于维护的上位机程序至关重要。本文…...

编程日记 2025/5/14 23:45:51

π 的奥秘：如何用有理数逼近无理数？

本文将围绕有理数、无理数、连续统以及它们之间的深刻联系展开讨论，并结合具体的数学理论如康托尔区间套定理、戴德金分割、柯西施瓦茨不等式等，进行简要探讨由于本文并未深入探讨，可能存在部分不严谨的地方，也欢迎各位进行纠正…...

编程日记 2025/5/15 21:22:25

LeetCode --- 436周赛

题目列表 3446. 按对角线进行矩阵排序 3447. 将元素分配给有约束条件的组 3448. 统计可以被最后一个数位整除的子字符串数目 3449. 最大化游戏分数的最小值一、按对角线进行矩阵排序直接模拟，遍历每一个斜对角线，获取斜对角线上的数字，排…...

编程日记 2025/5/15 21:31:35

绘制中国平安股价的交互式 K 线图

在本文中，探索如何使用 Python 的强大库进行股市数据分析与可视化。我们将以中国平安（股票代码：sh601318）为例，展示如何获取其股票数据，并绘制一张交互式 K 线图。 K 线图是股市分析中不可或缺的工具，它能够直观地显示股票的波动情况，包括开盘价、收盘价、最高价和最低…...

编程日记 2025/5/15 20:54:26

【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第二节】

ISO 14229-1:2023 UDS诊断服务测试用例全解析（ECU复位0x11服务） 作者：车端域控测试工程师更新日期：2025-02-12 关键词：UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 二、ECU复位服务（0x11服务&…...

编程日记 2025/5/15 21:55:41

Unity URP的2D光照简介

官网工程，包括2d光照，动画，动效介绍： https://unity.com/cn/blog/games/happy-harvest-demo-latest-2d-techniques https://docs.unity3d.com/6000.0/Documentation/Manual/urp/Lights-2D-intro.html 人物脸部光照细节和脚上的阴影…...

编程日记 2025/5/15 21:05:37

自学人工智能大模型，满足7B模型的训练和微调以及推理，预算3万，如何选购电脑

如果你的预算是 3万元人民币，希望训练和微调 7B 参数规模的人工智能大模型（如 LLaMA、Mistral 等），你需要一台高性能的深度学习工作站。在这个预算范围内，以下是推荐的配置： 1. 关键硬件配置 (1) GPU (显卡…...

编程日记 2025/5/11 14:23:05

shell脚本自动安装MySQL8

环境：centos7版本：8.0.28安装包：mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz 二进制包要求：安装包和shell脚本在同一目录下执行方式：sudo ./install_mysql8.sh #!/bin/bash# 定义MySQL安装目录和压缩包名称MYSQL_DIR…...

编程日记 2025/5/15 17:31:22

使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器进行模型检查点处理

2023 年 11 月，Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元（数据集和数据加载器）的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...

编程日记 2025/5/15 15:27:09

DeepAR：一种用于时间序列预测的深度学习模型

介绍 DeepAR是一种基于递归神经网络（RNN）的时间序列预测模型，由亚马逊在2017年提出。它特别适用于处理多变量时间序列数据，并能够生成概率预测。DeepAR通过联合训练多个相关时间序列来提高预测性能，从而在实际应用中表…...

编程日记 2025/5/13 4:20:53

【无标题】《On Java中文版基础卷+进阶卷》书评

Java语言作为最热门的编程语言之一，关于Java语言的书更是数不胜数，而我选择这本《On Java中文版基础卷进阶卷》作为我学习Java语言的工具书。这本书的作者是《Java编程思想》的Bruce Eckel，《Java编程思想》在之前可谓是鼎鼎有名，…...

编程日记 2025/5/11 8:32:45

【鸿蒙开发】第二十九章 Stage模型-应用上下文Context、进程、线程

目录 1 Stage模型基本概念 1.1 开发流程 3 应用上下文Context的典型使用场景 3.1 获取应用文件路径 3.2 获取和修改加密分区 3.3 获取本应用中其他Module的Context 3.4 订阅进程内UIAbility生命周期变化 4 进程 4.1 概述 5 线程 5.1 线程类型 5.2 使用EventHub进行线…...

编程日记 2025/5/15 8:20:49