练习 - 入门

3 分钟

Azure 静态 Web 应用通过从 GitHub 存储库生成应用将网站发布到生产环境。在本练习中，你将从 GitHub 存储库使用首选前端框架生成一个 Web 应用程序。

创建存储库

按照本模块即可使用 GitHub 模板存储库轻松创建新存储库。有一系列模板可用，其中每个模板都包含使用不同前端框架生成的起始应用。

导航到模板存储库的从模板创建页面。如果收到“404: 找不到页面”错误，请登录到 GitHub，然后重试。
在“所有者”下拉列表中选择一个 GitHub 帐户。
将存储库命名为 my-static-web-app。
选择“从模板创建存储库”按钮。

运行应用

你刚才在 GitHub 帐户中创建了名为 my-static-web-app 的 GitHub 存储库。接下来，将在计算机上克隆该存储库，并在本地运行代码。

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

首先，将 GitHub 存储库克隆到计算机上所需的目录。

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app

转到源代码的文件夹。
```
cd my-static-web-app
```
接下来，转到首选前端框架的文件夹，如下所示。
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
现在安装应用程序依赖项。
```
npm install
```
注意

如果收到“找不到路径”错误，请确保从 https://nodejs.org 安装了 Node.js。你可能需要执行自定义安装，其中包括安装“添加到路径”选项。

最后，运行前端客户端应用程序。

npm start

npm start

npm run dev

npm run serve

浏览到你的应用

可看到应用程序在本地运行。每个前端应用程序在不同的端口上运行。

选择链接可浏览到你的应用程序。

浏览到 http://localhost:4200。

显示浏览到你的 Angular Web 应用的屏幕截图。

浏览到 http://localhost:3000。

显示浏览到你的 React Web 应用的屏幕截图。

浏览到 http://localhost:5000。

显示浏览到你的 Svelte Web 应用的屏幕截图。

浏览到 http://localhost:8080。

显示浏览到你的 Vue Web 应用的屏幕截图。

注意

在本模块的练习中，你将部署一个不使用 API 的应用。有关下一个模块的信息，请参阅本模块末尾的“后续步骤”部分，在该部分中，你将与应用一起部署 API。

现在，通过在终端中按 Ctrl-C 来停止正在运行的应用。

后续步骤

你生成了应用程序，现在它在浏览器中本地运行。

接下来，你会将应用程序发布到 Azure 静态 Web 应用。