为被宠坏的人打造的 Microsoft Azure

我被优秀的软件宠坏了。真的被宠坏了，因为我作为一名开发倡导者和独立应用开发者，可以自由选择自己喜欢的平台并部署到这些平台上。我已经习惯了创建精美的演示，并快速部署，以展示这项或那项技术。为了做到这一点，我拥有非常非常优秀的软件平台，但我的许多非常优秀的应用从未真正进入正式发布阶段。

坦白说，我现在是微软员工了。看来是时候认真起来了。

我最初被 Parse 宠坏了，并发布了一堆使用它的数据库和便捷的推送通知服务的小应用，用于我的 Web 和移动后端。后来，Parse 的官方服务在 2017 年被 Facebook 收购后关闭了。

在引发了一场最好被遗忘的骚动之后，我转向了 Firebase。它确实是实时数据库更新、推送通知和分析的下一个最佳选择。随着 ML Kit 的出现，它甚至还包含了非常酷的机器学习集成。而且，瞧，Firebase 竟然提供了网站托管服务！太棒了！我可以把它既用作 MBaaS**，又可以用作网站托管。

就像孩子们在 ~~糖果店~~巧克力工厂，只要具有成本效益、展示效果好，并且能够尽快启动项目并运行，开发人员往往会被这些设计精美的平台所吸引，用于开发他们的小型应用程序。

然而，在某些时候，你可能需要将小型个人项目扩展到中型。如果你的项目规模超出了 Firebase 等优秀平台所提供的资源或功能，该怎么办？在本系列教程中，我将讨论如何在微软强大且企业友好的云服务 Azure 上部署 Web 项目。在后续教程中，我将向你展示如何通过添加数据库等功能来扩展项目。现在就开始吧。

🍬🍫🍭 如果您想了解 Azure，请查看其众多产品🍬🍫🍭

在本文中，我将引导您以最简单的方式在 Azure 上设置由 Vue.js CLI 构建的 Web 应用程序，并通过 GitHub 进行持续集成，因为像我们这样的被宠坏的人没有时间可以浪费。

请注意，有很多关于如何在 Azure 上托管静态网站的优秀教程，比如这个。这涉及将静态网站文件发布到 Azure 存储中。实际上，我并不是想托管静态网站；而是想使用 Vue CLI 构建一个 Vue 应用并将其推送到 GitHub，这样每当你将更改推送到 GitHub 时，构建过程就会获取它。

理想情况下，Azure 风格的 Web 托管服务与其说是 Firebase 风格的 Web 托管服务（需要在本地构建并使用 Firebase CLI 上传和部署内容），不如说更像 Netlify 为 Vue 应用提供的超级便捷的持续部署，其中更改会自动从 GitHub 拉取、构建和部署。一旦 Web 托管服务搞定，我就能拥有一个简洁的网站更新流程，之后我可以使用 Azure 产品组合中的其他工具来增强网站功能。

步骤 1：创建 Azure 帐户

为了测试目的并启动和运行您的新 Web 应用程序，您可以通过注册 Azure 来创建一个免费帐户。

注册 Azure 后，您将找到 Azure 门户。在这里，您可以管理应用程序的创建、部署以及其他实现，例如机器学习和数据库管理。您也可以通过 Azure CLI 或 VS Code 应用扩展（如下所述）进行许多此类管理，但 Azure 门户允许您以可视化的方式跟踪您的应用程序，我发现这很有帮助。

温馨提示：在 Azure 门户中创建资产时，请点击右上角的图钉图标将其固定到个人仪表板。这样以后更容易找到它们。

第 2 步：构建 Vue.js 应用并配置 VS Code

创建 Vue.js 应用最简单的方法是使用 Vue UI，这是一个 GUI，可以帮助你可视化 CLI 流程。安装Vue CLI后，打开终端并输入以下命令vue ui即可见证它的荣耀：

逐步讲解如何使用 Vue CLI 构建一个新应用，这将构建一个基本的 Web 应用，您可以在 Visual Studio Code 或任何您喜欢的编辑器中开始开发。不过，我推荐使用 VS Code，因为它有一些很棒的 Azure 扩展，可以让您在使用 Azure 时更加轻松。如果您还没有安装这些扩展，我建议您安装。有很多扩展：打开命令面板，然后Azure在 VS Code 市场中搜索。

至少，请安装 Azure 帐户、Azure 工具和 Azure 应用服务扩展。安装完成后，您应该能够在编辑器提示时从 VS Code 登录您的 Azure 帐户。登录后，您可以访问在 Azure 中为您的团队创建的所有各种元素；要查看它们，您可以点击 VS Code 侧边栏中的 Azure 徽标。这些功能会在您的开发过程中派上用场。

步骤 3：准备部署

现在，您需要准备您的小型 Web 应用，以便从 GitHub 进行部署和持续集成。Vue 应用通常从其构建目录（通常是/dist文件夹）部署。您可以在本地构建您的 Vue 应用（npm run build或在 Vue UI 中运行任务）。

接下来，确保你的应用的 .gitignore 文件不包含你新创建的dist文件夹：删除 .gitignore 对的引用/dist。继续将你的代码库推送到 GitHub 仓库。

然后，进入Azure 门户并开始为您的应用创建环境。

注意：您的应用需要一个订阅和一个资源组。在创建新的 Web 应用之前，您可能需要在门户中创建一个新的资源组。

点击门户左上角的“创建资源”
点击中间面板中的“Web App”
在“基础信息”选项卡中，选择要添加 Web 应用的订阅和资源组。对于全新帐户，您可能需要在门户中创建这些内容。
给你的 Web 应用命名
选择使用“代码”发布
在运行时堆栈下拉菜单中选择您喜欢的 Node 版本。
在平台中选择“Windows”（这很重要，因为我们将创建一个由 IIS 用于设置默认文档的配置文件）
选择您附近的资源位置

然后，保存配置并部署您的应用。Azure 将为您创建一个网站，azurewebsites.net您可以从“概览”选项卡访问该网站。无需将其连接到您的代码，它看起来就像这样：

提示：您可以将此资源保存到仪表板；这样做是个好主意，因为在 Azure 中很容易迷失。

步骤 4：将 Azure 应用连接到代码库

现在，你需要告诉 Azure 在哪里找到你的代码库。由于你的 Vue 应用现在安全地存储在 GitHub 中，请前往门户中的“部署中心”选项卡，然后单击“GitHub”。

注意，你需要将 GitHub 连接到你的 Azure 帐户

点击“继续”，然后选择“应用服务构建服务”。这是 Kudu，一个用于构建和部署代码的引擎。

再次点击“继续”，并选择 GitHub 中合适的区域来连接你的应用。一切匹配后，点击“完成”即可运行你的第一个部署。

您可以在运行时检查日志，了解发生了什么。如果出现问题，这很有帮助。您还可以确保构建过程按预期运行。

如果你现在访问你的网站，很遗憾，你会看到它抛出了错误。看一下日志就能知道错误出在哪里：

注意到“缺少 server.js/app.js 文件，未生成 web.config”消息了吗？这说明我们需要在应用程序根目录下添加一个 web.config 文件，以便 Azure 知道在哪里可以找到 index.html（提示：它是dist/index.html，我们可以看到它是在构建过程中复制的）。

此时您要做的就是创建该web.config文件，并列举以下设置：

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <rewrite>
      <rules>
        <!-- First we consider whether the incoming URL matches a physical file in the /dist folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="dist{REQUEST_URI}"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
</configuration>

还记得我们是如何设置 Windows 主机的吗？使用 Windows 会打开 IIS，并使用 iisnode 进行路由，这个文件会告诉 IIS 在哪里找到默认的 index.html 页面。将此 web.config 文件拖放到应用的根目录，然后将其推送到 GitHub。应用应该会自动重建并重新部署。如果一切顺利，你将在 azurewebsites.net 域名下拥有一个漂亮的 Vue.js 入门网站！

在下一个教程中，我将构建我正在开发的网站并添加数据库。剧透一下，它将被命名为 Azure 鸡尾酒，数据将由我的“Mr. Boston Cocktails”数据集驱动，从 Firebase 导出并导入 Azure，网站上的所有鸡尾酒都将显示为蓝色。

我的第一个技巧是，用我的“波士顿先生鸡尾酒”数据集来开发一款新的 Web 应用 Azure Cocktails。这款应用只展示蓝色鸡尾酒。因为…… pic.twitter.com/OOj3Ebzax9
— Vx. Jen Looper（@jenlooper）2019 年 5 月 17 日

敬请关注！

* Parse作为一个开源、基于社区的项目继续存在，并且更加强大！

**MBaaS 的意思是“移动后端即服务”。

有用的链接：
🕴 Azure 门户
🔌 VS Code 的 Azure 扩展
💚 Vue.js 入门
🎨 Vue CLI 及其 UI

鏂囩珷鏉ユ簮锛�https://dev.to/azure/microsoft-azure-for-spoiled-people-5bgh