您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

快速入门:使用 Azure Static Web Apps 生成第一个静态站点Quickstart: Building your first static site with Azure Static Web Apps

Azure Static Web Apps 通过从代码存储库生成应用程序发布网站。Azure Static Web Apps publishes a website by building apps from a code repository. 在本快速入门中,你可以使用 Visual Studio Code 扩展将应用程序部署到 Azure Static Web Apps。In this quickstart, you deploy an application to Azure Static Web apps using the Visual Studio Code extension.

如果没有 Azure 订阅,请创建一个免费的试用帐户If you don't have an Azure subscription, create a free trial account.

先决条件Prerequisites

创建存储库Create a repository

本文使用 GitHub 模板存储库,使你能够轻松入门。This article uses a GitHub template repository to make it easy for you to get started. 该模板具有一个入门应用,你可以使用 Azure Static Web Apps 部署它。The template features a starter app used to deploy using Azure Static Web Apps.

  1. 导航到以下位置以创建新存储库:Navigate to the following location to create a new repository:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. 将存储库命名为 my-first-static-web-appName your repository my-first-static-web-app

备注

Azure 静态 Web 应用需要至少一个 HTML 文件来创建 Web 应用。Azure Static Web Apps requires at least one HTML file to create a web app. 在此步骤中创建的存储库包括单个 index.html 文件。The repository you create in this step includes a single index.html file.

选择“从模板创建存储库”。Select Create repository from template.

从模板创建存储库

克隆存储库Clone the repository

在你的 GitHub 帐户中创建存储库后,使用以下命令将项目克隆到本地计算机。With the repository created in your GitHub account, clone the project to your local machine using the following command.

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

确保将 <YOUR_GITHUB_ACCOUNT_NAME> 替换为你的 GitHub 用户名。Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username.

接下来,打开 Visual Studio Code 并转到“文件”>“打开文件夹”以在编辑器中打开刚刚克隆到计算机上的存储库。Next, open Visual Studio Code and go to File > Open Folder to open the repository you cloned to your machine in the editor.

创建静态 Web 应用Create a static web app

  1. 在 Visual Studio Code 中,选择活动栏中的 Azure 徽标以打开 Azure 扩展窗口。Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

    Azure 徽标

    备注

    需要登录 Azure 和 GitHub。Azure and GitHub sign in are required. 如果尚未从 Visual Studio Code 登录到 Azure 和 GitHub,该扩展将在创建过程中提示你登录到这两个站点。If you are not already signed in to Azure and GitHub from Visual Studio Code, the extension will prompt you to sign in to both during the creation process.

  2. 在“Static Web Apps”标签下,选择“加号”。Under the Static Web Apps label, select the plus sign.

    应用程序名称

  3. 命令面板将在编辑器顶部打开,并提示你命名应用程序。The command palate opens at the top of the editor and prompts you to name your application.

    输入“my-first-static-web-app”,然后按 Enter 。Type my-first-static-web-app and press Enter.

    创建静态 Web 应用

  4. 选择与应用程序类型匹配的预设。Select the presets that match your application type.

    应用程序预设:无框架

    输入“./”作为应用程序文件的位置。Enter ./ as the location for the application files.

    应用程序文件位置

    对于 Azure Functions API 的位置,选择“暂时跳过”。Select Skip for now as the location for the Azure Functions API.

    API 位置

    输入“./”作为生成输出位置。Enter ./ as the build output location.

    应用程序生成输出位置

  5. 选择离你最近的位置,然后按 Enter。Select a location nearest you and press Enter.

    资源位置

  6. 创建应用后,将在 Visual Studio Code 中显示确认通知。Once the app is created, a confirmation notification is shown in Visual Studio Code.

    已创建确认

    接下来,单击 GitHub 中的“打开操作”按钮。Next, click on the button Open Actions in GitHub. 此页面将显示应用程序的生成状态。This page shows you the build status of the application.

    GitHub 操作完成后,即可浏览到已发布的网站。Once the GitHub Action is complete, then you can browse to the published website.

  7. 若要在浏览器中查看网站,请在 Static Web Apps 扩展中右键单击该项目,然后选择“浏览网站”。To view the website in the browser, right-click on the project in the Static Web Apps extension, and select Browse Site.

    浏览站点

清理资源Clean up resources

如果不打算继续使用此应用程序,可通过该扩展删除 Azure Static Web Apps 实例。If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the extension.

在 Visual Studio Code 资源浏览器窗口中,返回到“Static Web Apps”部分,右键单击“my-first-static-web-app”,然后选择“删除” 。In the Visual Studio Code Explorer window, return to the Static Web Apps section and right-click on my-first-static-web-app and select Delete.

删除应用

后续步骤Next steps