将Flutter网络应用程序部署到谷歌计算机引擎上

根据人们想要部署的应用程序的类型，Google为开发者提供了各种网络托管选项。决定这一点取决于你的应用程序是动态的还是静态的。

对于静态网站，谷歌提供云存储和Firebase托管。

然而，动态应用程序有一套不同的选择，包括计算引擎、应用引擎和云运行。

本文将重点介绍将Flutter网络应用程序部署到Google Compute Engine(GCE)的情况。

在谷歌云上创建一个项目

每个谷歌云服务API都需要一个API密钥。我们必须创建一个新的谷歌云平台项目，并启用谷歌计算引擎API才能开始。

确保你设置了计费以使用谷歌计算引擎API。

谷歌为你提供300美元的免费信用，在你尝试不同的产品时使用90天。

然而，如果你不想在90天后产生额外的费用，请确保你关闭你正在运行的实例。

创建我们的项目后，我们需要使用命令行工具安装谷歌云SDK。

./google-cloud-sdk/install.sh
./google-cloud-sdk/bin/gcloud init

最后，更新谷歌云的组件。

gcloud components update

设置虚拟机

Google Compute Engine(GCE)是一种高端计算服务，允许开发者在Google安全可靠的基础设施上创建和运行虚拟机。

GCE允许开发者利用复杂的计算能力，从而减少繁重的工作负担。

接下来，我们通过使用以下步骤创建一个新的实例来添加引擎。

进入导航菜单 ⇾计算引擎 ⇾虚拟机实例 ⇾创建实例。
选择一个唯一的实例名称，对于其余的字段，要进行设置，如下所示。 - 机器家族。通用型 - 机器类型：e2-micro
如果你有一个现有的域名，点击Management, security, disks, networking, sole tenancy 链接来扩展可用的选项。
点击Networking 标签。
在Hostname 领域，添加你的域名。
在侧边栏，前往网络标签⇾ VPC网络⇾外部IP地址，然后将IP address 类型改为static 。

你会看到下面的运行实例。

Running instance

服务器栈部署

大多数流行的开源网络应用都在运行LAMP栈。

LAMP（Linux Apache MySQL and PHP）堆栈是一个开放源码软件的集合，便于托管动态应用程序。

我们将使用LAMP堆栈进行部署。首先，我们需要把它安装到我们刚刚创建的虚拟机上。

要安装LAMP，启动一个新的终端，然后运行下面的命令。

sudo apt-get update
sudo apt-get install apache2 php libapache2-mod-php

New terminal

我们可以通过导航到HTTP://[your-external-ip-address] url来测试LAMP的部署。你应该看到Apache2的默认页面。

接下来，在运行中的虚拟机实例上安装MariaDB，如下图所示。

sudo apt-get update
sudo apt-get install MariaDB-server PHP PHP-MySQL

在虚拟机实例上启动MariaDB服务。

sudo systemctl start MariaDB

Flutter应用程序

我们的Flutter应用程序需要使用section.io主题建立一个简单的登陆页面。它有一个导航栏，一个登陆页面的图片，以及一个请求咖啡的假按钮。

编写代码和描述源代码的每一块都会使本教程变得相当长。所以，我已经创建了项目文件并上传到一个在线资源库。

部署到Google Compute Engine上

克隆项目后要做的第一件事是通过执行以下Flutter命令确保其运行。

flutter run -d chrome

接下来，构建项目的可上传网络版本，我们将把它部署到GCE。

flutter build web

如果应用程序编译和运行良好，你就可以进行下一步了。

压缩应用程序文件夹，然后在build 文件夹内获得一个web.zip 文件。

前往你的虚拟机实例，然后点击SSH tools ，上传该文件。

Select upload file

谷歌的虚拟机提供上传功能，将应用程序部署到虚拟机上。

选择web.zip 文件，如下图所示。

Web zip file

如果你在工作站中安装了Cloud SDK，你也可以使用gcloud命令。

gcloud compute scp [LOCAL_FILE_PATH] root@lamp-tutorial:/var/www/html

接下来，我们把zip文件夹移到/var/www/html 目录中，由LAMP堆栈动态提供服务。

sudo mv web.zip /var/www/html

在这个时候，应用程序不能运行，因为它仍然是一个压缩文件。由于我们的虚拟机是空的，我们不能解压缩文件夹，除非我们为此安装一个应用程序。

我们将使用下面的命令安装unzip 。

sudo apt-get install unzip

Theun nzip应用程序的网络文件夹。

sudo unzip web.zip

使用cd web 导航到你的应用程序的目录，然后执行下面的命令。

sudo mv * ../
cd ..
sudo rm -r web

测试部署

现在，如果你前往你的浏览器并导航到http://your-external-ip 。你应该看到你的应用程序正在运行。

Application running on Google computer engine

总结

在这篇文章中，我们演示了如何在谷歌的计算引擎上部署一个Flutter网络应用。

我们可以使用GCE来探索网络应用中的谷歌基础设施，这实在是太令人满意了。

如何将Flutter网络应用程序部署到谷歌计算机引擎上