Question

我正在学习颤动网络。现在，我想将此代码部署在真实服务器中。颤动的代码在这里：在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'),
        ),
      ),
    );
  }
}

如何在服务器中部署此代码？我是颤抖网路的新手。

Answer 1

您可以在 Nodejs 的共享托管中或在 Python 的 VPS 服务器中部署Flutter Web应用程序。关注此中等博客{{3 }}

Post

在使用“ flutter build web”构建Flutter Web应用程序之后，要将其托管在共享托管计划中，准备将Node.js应用程序作为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可以通过他的服务器为其提供服务，只需继续阅读Blog发布

并且如果您在VPS服务器中，那么如果要为nodejs应用提供服务器，请运行此命令

node app.js

或者，如果您不希望nodejs只是在Flutter Web应用程序中使用python，则可以使用此命令将其作为简单的http服务器

nohup python -m SimpleHTTPServer 8000 &

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

Answer 2

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

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

pub global activate webdev
现在转到项目的根文件夹并在调试模式下进行构建 webdev build
您应该在根目录中看到一个构建文件夹，只需复制该文件夹并将其托管在Web服务器上即可。

我使用相同的方法将其部署到github页面heres How in detail guide:

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

运行flutterweb app

Answer 3

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

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

将(/build/web)目录上传到您的服务器，您可以按照this link并在Windows服务器上配置IIS。

Answer 4

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

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

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

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

Answer 5

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

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

然后您只需要：

flutter build web
firebase deploy

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

Answer 6

<块引用>

Nota Bene - 从今天开始使用 flutter 2.0，我看到一个错误，图片没有上传。性能也不是最好的今天。将此添加为书签，我将更新解决方法。

适用于使用任何类型的 VPS/共享主机的用户的一种解决方案：

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

例如

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

更新缺失图片问题

<块引用>

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

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

<块引用>

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

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

6 个答案:

更新缺失图片问题