在GitHub Actions部署Flutter Web项目

上一篇:在GitHub Pages部署Flutter Web项目

demo效果:

运行效果:jke7-supplier.github.io/flutter_web...

一、创建一个带有Web支持的新项目并提交远程github仓库

1.本地创建一个带有web支持的flutter 项目。
bash 复制代码
#创建一个flutter项目并进入(名字叫 flutter_web_actions_build)
flutter create flutter_web_actions_build && cd flutter_web_actions_build
2.提交到github远程仓库
js 复制代码
git init 
git add --all 
git commit -m "first commit" 
//#YOUR_NAME是你自己的github用户名 
git remote add origin https://github.com/JKE7-supplier/flutter_web_actions_build.git 
git push -u origin main
3.重点:打开web项目里的index.xml文件,修改成你github仓库的名字,不然关联不到相对路径资源文件。

二、Github 的 access token设置

我们将创建一个Actions来构建和发布Flutter Web项目,但是我们需要设置一个访问令牌(access token),让运行我们的Actions的机器无需github密码也能提交代码。

步骤1:
步骤2:
步骤3:

选择repo:statuspublic_repo部分以提交公共存储库:注意:如果您的存储库是私有的,则还需要选择私有部分。

创建access token后,将其复制并保留在某个地方,因为您再也看不到它,稍后需要用到。

三、Github 项目的secret配置

起个名字commit_secret与access token作用匹配,将前面获取的access token密钥添加到下方输入框

四、给项目设置Actions配置

1.开启GitHub Actions:

2.在Actions下添加一个 workflows ⬇️⬇️⬇️

main.yml文件如下:

需要注意的: https://${{secrets.commit_secret}}@xxxxx.git,其中"commit_secret"是你自己在"add a new secret"时设置name。

yaml 复制代码
name: Flutter Web
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build Web
    env:
      my_secret: ${{secrets.commit_secret}}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: subosito/flutter-action@v1
        with:
          channel: 'stable'
      # 按照下面的顺序执行打包命令
      - run: flutter config --enable-web
      - run: flutter pub get
      - run: flutter channel master
      - run: flutter upgrade
      - run: flutter build web --release
      - run: |
          cd build/web
          git init
          # 改成你的提交邮箱
          git config --global user.email yourGithubEmail
          # 改成你的提交用户名
          git config --global user.name yourGithubName
          git status
          # 更改此远程URL,例如查看您的远程URL是 https://github.com/JKE7-supplier/flutter_web_actions_build.git 然后改成以下内容
          git remote add origin https://${{secrets.commit_secret}}@github.com/JKE7-supplier/flutter_web_actions_build.git
          git checkout -b gh-pages
          git add --all
          git commit -m "update"
          git push origin gh-pages -f
          
3.自动部署打包:
4.打包成功后:

运行效果:jke7-supplier.github.io/flutter_web...

demo github : GitHub - JKE7-supplier/flutter_web_actions_build: Flutter web build to gitHub actions

相关推荐
mldong3 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排4 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60614 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角5 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!5 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰6 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi7 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen8 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马8 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒9 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端