如何使用 Azure 静态 Web 应用服务在 Azure 上入门静态 Web 应用

kimcodes

4.00/5 (1投票)

2020年12月21日

CPOL

5分钟阅读

5776

在 5 分钟内完成，无需离开 Visual Studio Code。

注意：我曾现场直播了这个过程 – 但看起来那个 Twitch 直播已经下线了，https://www.twitch.tv/videos/730261909。我这里有一个来自 VueConf 的闪电演讲，你可以看看：将 Vue 应用部署到 Azure - Kim Noel - YouTube。由于闪电演讲的性质，语速很快，所以希望这篇博文能让你以更慢的节奏更好地理解！

我在 Twitch 直播期间创建的那个很棒（好吧，不那么棒）的 Web 应用在这里： https://github.com/kim-codes/lizzie-demo。但说实话，你最好还是使用 Microsoft 文档中构建的演示应用。可以在这里找到 staticwebdev / Repositories (github.com)：你可以有多种选择！有适用于原生 JavaScript、Vue、React、Angular 等的应用。

我们可以快进到跳过我创建那个可怜的假 Web 应用（用最少的 HTML、CSS 和 JavaScript 构建）的部分，并想象我的 Web 应用现在已经在线上的 GitHub 仓库中。

如果你跟着我的 VueConf 演讲来看，请跳到 2:20。

在 VS Code 的活动栏左侧，是我的 Azure 面板；你会看到我已经安装了 App Service 扩展、Azure Functions 扩展和 Azure Static Web Apps 扩展。你可以直接在 VS Code 中获取这些扩展。

你可以直接在 VS Code 中管理和安装扩展，方法是点击 VS Code 侧边活动栏中的扩展图标，或者使用“视图：扩展”命令 (Ctrl+Shift+X)。

或者，你也可以使用网页，点击上面我提供的链接，它应该会自动打开 VS Code（假设你已经安装了 VS Code）。

注意：如果这是你第一次在 VS Code 中设置任何 Microsoft Azure 扩展，你将需要按照步骤将其连接到你的 Azure 帐户（同样，假设你已经有一个 Azure 帐户）。如果你没有 Azure 订阅，请创建免费试用帐户。

我们可以直接在 VS Code 中点击“+”来为我的 Web 应用创建新的设置。

第一步，一旦你的 Azure 帐户设置完成，它会询问你“使用哪个订阅”——Azure 中的所有内容都需要一个订阅，即使它不收费。（Azure 静态 Web 应用服务目前处于预览状态，所以不会向你收费——但你仍然需要一个订阅才能运行）。将订阅想象成一个桶，它需要与要运行的服务或产品关联（也就是用于收费的地方）。

这假设我已经用 VS Code 设置好了我的 Azure 帐户。我之前在设置 Azure Function 时已经做过了。如果你还没有连接你的 Azure 帐户，VS Code 会将你重定向到浏览器以建立连接。

你会看到我有三个不同的订阅。
为我的 Web 应用在 Azure 中命名。我保持与 GitHub 中 Web 应用的名称相同。我不确定这是否是最佳实践，但这有助于我轻松地跟踪事物。
接下来，我们需要选择我们的 Web 应用的存储库在线上存在于何处。同样，我已经用 VS Code 设置了与 GitHub 的连接，所以它已经知道去哪里查找我的代码。
一旦我选择了 GitHub 上的组织，它就会询问该组织内的哪个存储库。我属于几个组织，所以我不得不选择我的个人帐户，然后我将在我的 GitHub 帐户中搜索我的 web-app。你会看到 VS Code 开始按字母顺序填充建议。
接下来，我们需要选择哪个分支来触发生成。我只有这个演示的一个分支，所以我会选择“main”分支。
在我的存储库中，我有许多演示应用，所以我需要指定我的应用的位置（这样它就知道从哪里构建和部署应用）。你可能只需要选择“/”，因为你已经在你的应用的位置。
由于我的应用是 Vue 应用，我需要指定框架的路径——在我的例子中是 `dist`。如果你有一个 React 应用，你可能会输入 `build`。如果你不使用框架，可以留空。
现在到第 8 步，我们涉及到一些 Azure 的具体设置。
Azure 需要知道我要从哪里部署我的应用。取决于我的客户在哪里——这可能会影响我的决定。我在北美东部，所以这次演示我将使用 `East US 2`。