如何在服务器上部署 Flutter Web？答案

【问题标题】：如何在服务器上部署 Flutter Web？
【发布时间】：2019-09-27 16:57:56
【问题描述】：

我正在学习 Flutter web。现在我想在真实服务器中部署这段代码。这里的flutter代码：在lib文件夹中

void main() => runApp(new MyApp());    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

如何在服务器上部署此代码？我是 Flutter 网络的新手。

【问题讨论】：

标签： dart flutter flutter-web

【解决方案1】：

[更新]

现在为 web 创建一个生产版本 Flutter 支持 flutter build web 命令类似于其他平台（android 和 ios）你会看到

build/web

使用 assets 文件夹生成的文件夹，您可以简单地将其部署在您的服务器上。

[旧答案步骤 1 和 2 不再需要]

您只需使用webdev 工具进行生产构建。要安装webdev，你需要一个发布工具，

所以转到你安装了 dart SDK 的位置，在 bin 文件夹中你应该有一个 pub 批处理文件。您需要提供环境变量的 bin 文件夹路径才能从 cmd 使用 pub。
现在打开 cmd 并点击以下命令安装webdev

pub global activate webdev

// 在您的 intelliJ Idea 终端中
现在转到项目的根文件夹并在发布模式下构建

flutter build web
您应该会在根目录中看到一个构建文件夹 (/build/web)，只需复制该文件夹并将其托管在 Web 服务器上即可。

我用同样的方式将它部署到GitHub页面here's how in detail guide.

一些有用的链接：https://dart.dev/tools/webdev#build

这是正在运行的flutterweb app

【讨论】：

就我而言，生产服务器上实际上只需要index.html、main.dart.js 和assets。该应用程序在没有packages 文件夹的情况下运行良好（可能是因为我没有导入任何外部插件？）。无论如何，由于packages 文件夹是 50 MB 并且包含 330 个项目，因此删除它大大加快了我的上传时间。
@MagnusW 是的，也可以，谢谢你提到:)
有视频教程吗？
你可以在网上找到很多资源，flutter.dev 是正确的去处，如果你不清楚，我很抱歉我写了这么久，随着时间的推移，flutter web 已经发展了很多，如果您在部署时遇到任何问题，请告诉我？我很乐意提供帮助：)
@MaheshJamdade 我们可以使用 apache Web 服务器来托管 Flutter Web 应用吗，我们是否需要在服务器端添加任何其他组件，我的 Flutter Web 应用使用 Firebase API，托管所需的服务器配置是什么颤动的网络应用程序。

【解决方案2】：

Nota Bene - 从今天开始使用 Flutter 2.0，我看到了一个图像未上传的错误。性能也不是最好的今天。将此加入书签，我将更新解决方法。

为使用任何类型的 VPS/共享主机的用户提供一个解决方案：

打开本地构建文件夹
压缩 (zip) Web 文件夹
上传 web.zip 文件（ftp 或文件管理器）
在您的服务器上（例如在 cPanel 上选择从文件中提取经理）
将网络文件夹重命名为您喜欢的任何名称
请注意，如果您不使用网站的根目录，则必须重命名 index.html 中的文件夹从“/”到“/web/”（与上面的名称匹配，请参见示例）
如果您使用的是网站根文件夹，请确保移动所有文件从 /web 内部进入您 / 网站的根文件夹（不是您的服务器）

例如。

<base href="/"> to  <base href="/web/">

更新缺失图片问题

tldr; 两个问题 - 在 pubspec.yaml 中，我忘记取消注释 assets 文件夹，当为 web 构建时，图像被放置在一个资产文件夹下的文件夹。编辑 pubspec.yaml 并移动图像文件夹上一层（在为网络构建之后）解决了问题。

我的颤振项目文件夹在项目根目录中有一个 assets/images 文件夹。在线看不到图像后（在调试过程中可见），我发现运行flutter build web --release 导致我的资产文件夹在build/web/assets/assets/images 中重新创建。我的代码正确引用了assets/images/file.png。在部署到网络时，我只是将图像文件夹上移了一级。所以我的 Web 服务器根目录现在有 assets/images/name.png 并且图像显示正常。

解决方案 - 解决此问题的方法是为资产使用正确的结构，即为（图像和 google_fonts）在颤振项目根目录中。然后编译器构建正确的 web 项目。我的代码将图像资产引用为 images/name.png。 Pubspec.yaml 应该引用资产：as - images/ 和 - google_fonts/

【讨论】：

【解决方案3】：

您可以使用 Nodejs 或在 VPS 服务器中使用 Python 将您的 Flutter Web 应用程序部署到共享主机中关注此 Medium 博客 Post

使用“flutter build web”构建您的 Flutter Web 应用程序并希望将其托管在共享托管计划中后，准备您的 nodejs 应用程序作为您的 Flutter Web 应用程序的简单服务器，这里是示例代码

app.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public-flutter')));


module.exports = app;

package.json

{
  "name": "flutter-web-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  }
}

创建一个文件夹并将其命名为（“public-flutter”），然后将您的 Flutter Web 应用程序放在您刚刚创建的文件夹中，这样如果您在共享主机中，nodejs 就可以通过他的服务器为其提供服务，只需继续博客发帖here

如果您在 VPS 服务器中，如果您想为 nodejs 应用程序提供服务器，请运行此命令

node app.js

或者如果你不想要 nodejs，只需在你的 Flutter Web 应用程序中使用 python 来使用这个命令将它作为一个简单的 http 服务器

nohup python -m SimpleHTTPServer 8000 &

运行命令时，请确保您位于 Web 应用程序文件夹中。即使您在 Linux 上关闭了 SSH 会话，“nohub”也会让命令继续运行。或者，您可以使用 dhttpd 包通过 Dart pub/webdev 工具为您的应用提供服务。

【讨论】：

您好，请问您的代码是否使用node js，我们输入“node app.js”后如何在浏览器中打开应用程序？我们还需要一个端口（domain.com:port）吗？

【解决方案4】：

如果是 Firebase 项目，您可以使用 Firebase 托管。

它会要求您在系统上安装 Firebase 工具，您必须在项目的根文件夹中对其进行初始化。

那么你只需要：

flutter build web
firebase deploy

并刷新浏览器（可能使用 ctrl + F5 或 ctrl + shift + r）

【讨论】：

【解决方案5】：

这是在亚马逊网络服务器上部署 Flutter Web 应用程序的简单方法。

遵循是我遵循的简单过程。

构建 Flutter 网站：flutter build web —release
Create instance on aws ec2 server: 意思是分配一些内存给您的网站在服务器上。 Instance 是 aws 云中的虚拟服务器。
在putty 的帮助下连接到您的服务器（实例）：
Install Vesta control panel 在您的服务器上。（您可以安装其他控制面板如果你不喜欢vesta，也可以）。
在服务器上上传您的内容（网站）。（借助 FileZilla你可以轻松上传您在服务器上的网站内容）

这是简单的视频教程： https://youtu.be/htuHNO9JeRU

【讨论】：

提示帮助其他人：发布标志有两个破折号，如“--release”。但是“--release”已经是默认模式了。

【解决方案6】：

如果您想通过网络使用您自己的服务器，例如您的虚拟私有主机或网络上的其他主机：

转到项目的根文件夹并在发布模式下构建flutter build web，然后

上传(/build/web)目录到你的服务器，你可以关注this link，在windows server上配置IIS。

【讨论】：