练习 - 入门

7 分钟

在本练习中，会创建一个 Azure Static Web Apps 实例，其中包含自动生成并发布你的网站的 GitHub Action。

本模块使用通过沙盒提供的资源（通过沙盒可获取对 Azure 订阅的免费临时访问权限），以及完成练习所需的资源。确保激活此页顶部的沙盒。在完成本模块中的练习时，每个单元都取决于你在上一个练习中创建的内容。因此，请选择一个 JavaScript 框架，并将其用于所有后续练习。

创建存储库

首先，使用 GitHub 模板创建一个存储库。提供了一系列存储库模板，其中包含在各种前端框架中实现的入门级应用。

转到 GitHub 从模板创建页面，以打开模板存储库。
如果系统提示输入“所有者”，请选择你的一个 GitHub 帐户。
对于“存储库名称”，请输入“my-static-web-app-and-api”。
选择“从模板创建存储库”。

从模板创建项目时，GitHub 会在后台生成存储库。

在本地运行应用

现在，你在 GitHub 帐户中有了一个名为“my-static-web-app-and-api”的 GitHub 存储库。接下来，在计算机上克隆该 GitHub 存储库，并在本地运行代码。

在计算机上打开一个终端窗口。

如果使用的是 Windows，则可以在系统栏搜索框中输入 cmd。
若要将存储库克隆到计算机，请将以下代码粘贴到命令提示符窗口中。

确保将 <YOUR_GITHUB_USERNAME> 替换为你的 GitHub 用户名。
```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
```
注意

如果在复制到命令提示符终端时遇到问题，请右键单击标题栏中的图标，并在“属性”选项卡中，确保选中“将 Ctrl+Shift+C/V 用作复制/粘贴”。
转到你克隆的源代码的目录。
```
cd my-static-web-app-and-api
```

转到首选前端框架的目录。

cd angular-app

cd react-app

cd svelte-app

cd vue-app

安装应用程序依赖项。
```
npm install
```
使用以下命令确保安装了每个依赖项的最新版本。
```
npm audit fix
```

运行前端客户端应用程序。

npm start

npm start

npm run dev

npm run serve

浏览到你的应用

生成并编译应用程序捆绑包后，浏览器选项卡会自动打开以显示在本地运行的应用程序。

angular 的本地主机是 http://localhost:4200。

react 的本地主机是 http://localhost:3000。

svelte 的本地主机是 http://localhost:5000。

Vue 的本地主机是 http://localhost:8080。

应用应显示“正在加载数据...”，因为尚无数据或 API。在本课程后面将为 Web 应用添加 API。

在终端中，按 Ctrl+C 停止批处理作业。

祝贺你！你生成了应用程序，并看到它在浏览器中本地运行。接下来，你可以将应用程序发布到 Azure Static Web Apps。

创建静态 Web 应用

你已创建自己的 GitHub 存储库。现在可以使用适用于 Visual Studio Code 的 Azure Static Web Apps 扩展创建自己的静态 Web 应用。

安装适用于 Visual Studio Code 的 Azure Static Web Apps 扩展

打开 Visual Studio Code。
在顶部菜单中，选择“视图”>“扩展”，然后在搜索框中输入“Azure Static Web Apps”。
在 Visual Studio Code 中的扩展选项卡加载后，选择“安装”。

打开应用程序文件夹

选择 F1，打开 Visual Studio Code 命令面板。
输入“文件: 打开文件夹...”。
选择 my-static-web-app-and-api 文件夹。
选择“打开”以在 Visual Studio Code 中打开该文件夹。

选择 F1，打开 Visual Studio Code 命令面板。
输入“Azure: 登录”并按照提示进行身份验证。

重要

请确保使用激活沙盒时所用的同一帐户登录到 Azure。使用同一帐户便可以使用 Concierge 订阅，从而可在本教程中访问免费的 Azure 资源。

选择订阅

选择 F1，打开 Visual Studio Code 命令面板。
输入“Azure: 选择订阅”，清除除“Concierge 订阅”以外的所有选择。

提交更改

安装应用程序依赖项时，项目中的某些文件会在此过程中更新。若要继续，需要将这些更改提交到存储库。

选择 F1，打开 Visual Studio Code 命令面板。
输入并选择“Git 全部提交”。
在文件顶部输入“初始提交”。
保存并关闭 git 提交文件。

此时不必担心与服务器同步更改。发布静态 Web 应用时，更新会复制到 GitHub。

创建静态 Web 应用

创建静态 Web 应用需要当前已经过身份验证的 Azure 和 GitHub 会话。如果尚未登录到这两个提供程序，扩展将在创建过程中提示你登录。

选择 F1，打开 Visual Studio Code 命令面板。

输入并选择“Azure Static Web Apps: 创建静态 Web 应用…”。

为命令面板提示的其余部分输入以下值。

Prompt	“值”
订阅	选择“Concierge 订阅”
名称	输入“my-static-web-app-and-api”
区域	选择离你最近的区域
预设	选择“Angular”
应用程序代码位置	输入“angular-app”
输出位置	输入“dist/angular-app”

输入并选择“Azure Static Web Apps: 创建静态 Web 应用…”。

为命令面板提示的其余部分输入以下值。

Prompt	“值”
订阅	选择“Concierge 订阅”
名称	输入“my-static-web-app-and-api”
区域	选择离你最近的区域
预设	选择“React”
应用程序代码位置	输入“react-app”
输出位置	输入 dist

输入并选择“Azure Static Web Apps: 创建静态 Web 应用…”。

为命令面板提示的其余部分输入以下值。

Prompt	“值”
订阅	选择“Concierge 订阅”
名称	输入“my-static-web-app-and-api”
区域	选择离你最近的区域
预设	选择“Svelte”
应用程序代码位置	输入“svelte-app”
输出位置	输入“public”

输入并选择“Azure Static Web Apps: 创建静态 Web 应用…”。

为命令面板提示的其余部分输入以下值。

Prompt	“值”
订阅	选择“Concierge 订阅”
名称	输入“my-static-web-app-and-api”
区域	选择离你最近的区域
预设	选择“Vue”
应用程序代码位置	输入“vue-app”
输出位置	输入 dist

注意

此存储库不同于过去可能使用的其他项目。此项目在四个不同的文件夹中包含四个不同的应用。每个文件夹都包含在不同 JavaScript 框架中创建的应用。通常，你在存储库的根中只有一个应用，因此应用路径位置默认使用 /。这是一个很好的示例，可说明为何 Azure Static Web Apps 允许你首先配置位置 - 你可完全控制应用的生成方式。

创建应用后，将在 Visual Studio Code 中显示确认通知。

在配置生成时，Visual Studio Code 会向你报告生成状态。
可以使用 GitHub Actions 展开“操作”菜单来查看部署进度。

部署完成后，可以直接导航到网页。
若要在浏览器中查看网站，请在 Static Web Apps 扩展中右键单击该项目，然后选择“浏览网站”。

应用应显示“正在加载数据...”，因为尚无数据或 API。你在本模块后面将为 Web 应用添加 API。