如何在服务器上部署flutter web？

Question

我正在学习 Flutter web。现在我想在真实服务器中部署这段代码。这里的颤振代码：在 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 网站的新手。

Answer 1

[更新]

现在要为 Web 创建生产构建，Flutter 支持flutter build web类似于其他平台（android 和 ios）的命令，您将看到

build/web

主要由源文件index.html,main.dart.js和assets文件夹生成的文件夹，您可以简单地将其部署在您的服务器上，

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

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

1. 因此，转到SDK安装dart 的位置，在 bin 文件夹中，您应该有一个 pub 批处理文件。您需要提供 bin 文件夹的环境变量路径，以便从 cmd 使用 pub。

2. 现在打开cmd并点击以下命令进行安装 webdev

   pub global activate webdev

   // 在你的 IntelliJ Idea 终端中

3. 现在转到项目的根文件夹并在发布模式下进行构建

   flutter build web

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

我使用相同的方式将它部署到 GitHub 页面，这里是详细指南。

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

这是正在运行的flutterweb 应用程序

Answer 2

如果您想通过网络使用您自己的服务器 eq 您的虚拟专用主机或通过网络的其他主机：

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

将(/build/web)目录上传 到您的服务器，您可以点击此链接并在 Windows 服务器上配置 IIS。

Answer 3

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

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

1. 构建颤振网络： flutter build web —release
2. 在 aws ec2 服务器上创建实例：意味着在服务器上为您的网站分配一些内存。Instance 是 aws 云中的虚拟服务器。
3. 在putty的帮助下连接到您的服务器（实例）：
4. 在您的服务器上安装 Vesta 控制面板。（如果您不喜欢vesta，您也可以安装其他控制面板）。
5. 在服务器上上传您的内容（网站）。（借助 FileZilla，您可以轻松地在服务器上上传您的网站内容）

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

Answer 4

您可以部署在你的扑Web应用程序共享主机用的NodeJS或VPS与服务器的Python按照这个媒介博客帖子

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

应用程序.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;

包.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 可以通过他的服务器为其提供服务，如果您在共享主机中，请继续阅读此处的博客文章

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

node app.js

或者，如果您不想要 nodejs，只需在您的 Flutter Web 应用程序中使用 python 将其用作使用此命令的简单 http 服务器

nohup python -m SimpleHTTPServer 8000 &

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

Answer 5

Nota Bene - 从今天开始使用 flutter 2.0，我发现图像未上传的错误。截至目前，性能也不是最好的。将此添加为书签，我将更新解决方法。

对于使用任何类型的 VPS/共享主机的用户来说，这是一种解决方案：

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

例如。

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

更新缺少图像问题

太棒了；两个问题 - 在 pubspec.yaml 中，我忘记取消注释资产文件夹，并且在为 Web 构建时，图像被放置在资产文件夹下的一个文件夹中。编辑 pubspec.yaml 并将图像文件夹上移一级（在为网络构建之后）解决了这个问题。

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

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