「Flutter for Web 」创建与部署

最新推荐文章于 2024-05-13 18:24:20 发布

ERICZENGYAN

最新推荐文章于 2024-05-13 18:24:20 发布

阅读量1.8k

点赞数

分类专栏： flutter 文章标签： android nginx 前端 ios flutter

本文链接：https://blog.csdn.net/ERICZENGYAN/article/details/103884139

版权

flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网上有太多早期 flutter for web 的新手教程，现在看来已经有些过时。
所以说还是看跟着官方文档走一波吧。

step by step.

更新 flutter

先确保你已经安装了 flutter 和 chrome

虽然 2019 年 2 月 google 已经把 flutter_web merge 到 flutter 主工程，但是现在看起来还是 beta 版本才能使用 flutter_web.

 flutter channel beta
 flutter upgrade
 flutter config --enable-web

#创建&运行

 flutter create flutter_web_dome
 cd flutter_web_dome
 flutter run -d chrome

讲道理就可以看到：

具体的开发，根据文档慢慢开发就是了。

打包

网上很多说用 webdev 啥的，但是看官方并没有推荐使用，所以我们简单点，跟着文档来，先 build 一下。

 flutter build web

然后在项目 build 文件夹里面会生成对应的文件

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

看到这个目录结构就说明 build 完成了。

部署到服务器

如果你要部署到 github page，可以使用 peanet 库来帮助你。（我可没有试过。。。）
如果你和我一样，想部署到自己服务器上，那么就继续往下看吧。

想要部署一个 web 项目当然首选「Nginx」 +「docker」

docker 部署 nginx

如果不了解「docker」的同学可以先补补课：docker 安装与入门
先简单启动一个 nginx

docker run -d -p 80:80  --name mynginx nginx

这时候访问你的域名或者ip 就应该可以看到 nginx 的默认页面。
这时候就发现一个问题，nginx 的配置文件和加载 web 项目，都存在于 docker 容器中，我们修改起来非常麻烦。所以我们先把对应的配置拷贝到服务器的本地目录。
在服务器里面创建一个你自己的文件夹，cd 进去，执行下面命令

docker cp mynginx:/etc/nginx/conf.d .
docker cp mynginx:/usr/share/nginx/html .

然后先把原来的的容器停止并删除

docker stop mynginx
docker rm mynginx

然后我们再跑一个 nginx ，这次加上映射。

docker run -d -p 80:80  --name mynginx \
-v 你自己的目录/html:/usr/share/nginx/html \
-v 你自己的目录/conf.d:/etc/nginx/conf.d \
nginx

然后我们修改本地html 文件夹中的 index.html

<!DOCTYPE html>
<html>
<head>
<title> mynginx </title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

ctrl+c 保存，在网址访问域名，应该就可以看到。

###上传 flutter_web 项目
现在我们的 nginx 就准备好了，只要通过 ftp 把我们 build/web 目录里面的文件全部上传到 nginx 的 html 文件夹里面，把原来的index 替代。

然后可能需要重启一下docker

docker restart mynginx

就可以通过网址访问了。

我后面跟了一个 flutter 是因为我主域名已经放了其他东西，所以通过nginx 做了分发。
具体操作就是修改我们映射下来的 nginx 配置文件 default.conf 在里面加入

 location /flutter {
        root   /usr/share/nginx/html;
        index  /flutter/index.html;
    }

具体路径可能每个人不同，大家随机应变吧。

ERICZENGYAN

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
「Flutter for Web 」创建与部署

网上有太多早期 flutter for web 的新手教程，现在看来已经有些过时。所以说还是看跟着官方文档走一波吧。step by step.更新 flutter先确保你已经安装了 flutter 和 chrome虽然 2019 年 2 月 google 已经把 flutter_web merge 到 flutter 主工程，但是现在看起来还是 beta 版本才能使用 flutter...
复制链接

扫一扫