你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：将 VuePress 站点发布到 Azure 静态 Web 应用

项目
01/10/2024

本文演示如何创建 VuePress Web 应用程序并将其部署到 Azure 静态 Web 应用。最终的成果是一个新的 Azure 静态 Web 应用以及相关联的可控制应用生成和发布方式的 GitHub 操作。

在本教程中，你将了解如何执行以下操作：

创建 VuePress 应用
设置 Azure 静态 Web 应用
将 VuePress 应用部署到 Azure

先决条件

具有活动订阅的 Azure 帐户。如果没有帐户，可以免费创建一个帐户。
一个 GitHub 帐户。如果没有帐户，可以免费创建一个帐户。
已安装 Git 安装程序。如果没有 Git，则可以安装 Git。
安装 Node.js。

创建 VuePress 应用

通过命令行接口 (CLI) 创建 VuePress 应用程序：

新建一个文件夹，用于 VuePress 应用。
```
mkdir static-site
```
在此文件夹中添加 README.md 文件。
```
echo '# Hello From VuePress' > README.md
```
初始化 package.json 文件。
```
npm init -y
```
将 VuePress 作为 devDependency 添加。
```
npm install --save-dev vuepress
```
从文本编辑器中打开 package.json 文件，将生成命令添加到 scripts 部分。
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
创建 .gitignore 文件，以排除 node_modules 文件夹。
```
echo 'node_modules' > .gitignore
```

初始化 Git 存储库。

 git init
 git add -A
 git commit -m "initial commit"

将应用程序推送到 GitHub

你需要 GitHub 上的存储库以连接到 Azure 静态 Web 应用。以下步骤展示了如何创建站点的存储库。

从名为 vuepress-static-app 的 https://github.com/new 创建空白 GitHub 存储库（不创建自述文件）。
将 GitHub 存储库作为远程存储库添加到本地存储库。确保添加 GitHub 用户名，来替代下面命令中的 <YOUR_USER_NAME> 占位符。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
将本地存储库推送到 GitHub。
```
git push --set-upstream origin main
```

部署 Web 应用

下列步骤说明了如何创建新的静态站点应用并将其部署到生产环境。

创建应用程序

转到 Azure 门户
选择“创建资源”
搜索“静态 Web 应用”
选择“Static Web Apps”
选择“创建”

在“基本信息”选项卡上，输入下列值。

属性	值
订阅	Azure 订阅名称。
资源组	my-vuepress-group
名称	vuepress-static-app
计划类型	免费
Azure Functions API 和过渡环境的区域	选择离你最近的区域。
Source	GitHub

选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。
输入以下 GitHub 值。

属性值

组织选择所需的 GitHub 组织。

存储库选择“vuepress-static-app”。

分支选择“主要”。

注意

如果看不到任何存储库，则可能需要在 GitHub 中授权 Azure Static Web Apps。浏览到 GitHub 存储库，转到“设置”>“应用程序”>“授权 OAuth 应用”，选择“Azure Static Web Apps”，然后选择“授予”。对于组织存储库，你必须是组织的所有者才能授予权限。
在“生成详细信息”部分，从“生成预设”下拉列表中选择“VuePress”，并保留默认值。

查看并创建

选择“查看 + 创建”，以验证详细信息是否全部正确。
选择“创建”，开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。
部署完成后，请选择“转到资源”。
在资源屏幕上，选择 URL 链接，以打开已部署的应用程序。你可能需要等待一两分钟，GitHub Actions 才能完成。

清理资源

如果不打算继续使用此应用程序，可按以下步骤删除 Azure 静态 Web 应用资源：

打开 Azure 门户
在顶部搜索栏中，按之前提供的名称搜索应用程序
单击应用
单击“删除”按钮
单击“是”以确认删除操作

后续步骤

添加自定义域