什么是Azure静态Web应用CLI？
好吧，今天的重点将是与这项服务相关的工具，它可以让你在本地非常快速和动态地模拟你的静态应用程序。Azure Static Web Apps CLI!
Azure / static-web-apps-cli
Azure静态网络应用程序CLI✨
Azure静态网络应用程序CLI（预览） 
Static Web Apps CLI，也被称为SWA CLI，是Azure Static Web Apps的本地开发工具。它可以。
- 提供静态应用资产，或代理到你的应用开发服务器
- 提供API请求，或代理到Azure Functions核心工具中运行的API
- 仿真认证和授权
- 仿真静态Web应用的配置，包括路由
Static Web Apps CLI正在预览中：如果你有建议或遇到问题，请报告或帮助我们解决。我们非常感谢您的贡献。🙏
CLI模拟了Azure Static Web Apps云服务的常用功能。预计会有一些差异。始终在Azure中部署和测试你的应用程序，以确认行为。
快速入门
使用npm 或yarn 。
-
安装客户端
npm install -g @azure/static-web-apps-cli -
在根部打开一个SWA应用程序文件夹（在任何/api或/app...
根据**Azure Static Web Apps CLI**工具库，使用SWA CLI你可以。
- 服务静态应用资产，或代理到你的应用开发服务器
- ✅ 提供API请求，或代理到Azure Functions核心工具中运行的API
- ✅ 仿真认证和授权
- ✅ 仿真静态Web应用的配置，包括路由
这里要提到的另一个要点是，你可以模拟任何静态项目或前端应用结构，无论是。
- ✅ React
- ✅ Angular
- ✅ Svelte
- ✅ Vue
- ✅ Next.js
- ✅ Blazor/WebAssembly!
好吧！说话是好的。但当我们有了DEMOS之后，情况就会好得多!所以，现在让我们来编写代码，并运行一个非常简单的演示，看看我们如何在本地使用这个工具!
演示时间!
我们需要做的第一件事是安装[Node.js]!一定要尝试安装LTS版本!
在这个演示中，我将使用一个新的框架，它可能是开发领域的一个大趋势。Astro Build。
我不会详细介绍这个框架，因为这不是本文的重点。但如果你想了解更多，你可以观看下面的视频。
为了让我们的演示更快一些，我创建了一个模板项目，恳请你下载或git克隆它。
git clone https://github.com/glaucia86/astro-swa-demo.git
如果你愿意，你可以做一些必要的修改。比如，改变图片和其他东西!我强烈建议当你开始一个新的Astro项目时，选择这个选项。投资组合。你将有这个相同的模板开始，也许是一个新的静态投资组合网站!
进入astro-demo文件夹，用命令在本地安装软件包。
npm install
键入npm start 命令来启动该项目。打开浏览器到页面。http://localhost:3000/
如果你看到如下图所示，那是因为一切工作都很顺利
现在让我们进入下一个步骤!打开你的命令行，输入命令。
npm install -g @azure/static-web-apps-cli
创建一个文件夹，以便我们可以测试这个工具。在我的例子中，我创建了一个文件夹，名称如下。
mkdir swa-cli-demo
现在，最酷的部分来了，只用命令行就可以创建一个静态页面的例子。要做到这一点，运行下面的命令。
swa start http://localhost:3000 --run "npm start"
现在打开浏览器，http://localhost:4280/ 。
这对我们意味着什么呢？事实上，我们正在模拟Azure静态Web应用服务器。从这个端点，我们甚至可以用这个端点测试Back-End APIs，甚至模拟一个集成的登录认证。因为Azure Static Web Apps支持这个。
很酷！不是吗？不是吗？
使用Vs代码部署应用程序!
要执行下面的步骤，你需要在GitHub上分配你的项目，并有一个免费的Azure帐户!
现在让我们使用Visual Studio Code中的Azure Static Web Apps扩展来部署这个应用程序吧!
现在在Visual Studio Code中打开该项目，让我们按照以下步骤进行。
第1步:
点击+ 按钮，如下图所示。
第2步：
在这里你应该定义应用程序的名称。该名称必须是唯一的!
第3步：
由于Astro还没有列在扩展名中，让我们选择custom 。
第4步：
这里我们将定义我们的应用程序的位置。要非常小心，如果你的应用程序（项目根）是在一些子文件夹中（这是我的情况）。在这个例子中，从我的项目来看，项目的根在astro-demo 文件夹中。
第5步：
最后，我们必须定义Astro工件文件的生成位置。根据文档，它位于dist文件夹中（对于不同的框架，有不同的工件文件夹。要了解更多，请点击**这里**)
第6步：
然后会打开一个框，带你到下一步（即GitHub仓库）。
第7步：
现在我们将被带到项目库网站，它将显示一个包含yaml 文件的文件夹，此外，GitHub正在执行一个动作。
第8步：
现在有一个job 的动作在那里运行这表明我们的应用程序正在与Azure平台进行通信，此外，还为我们创建了一个C.I和C.D带!
第9步：
万一一切顺利的话!现在让我们进入最后一步!
第10步：
切换回Visual Studio Code，再次打开SWA扩展。并且，寻找新创建的应用程序!点击右键。browser site
现在打开浏览器!然后，你会看到你的项目在全球范围内可用，并准备好让大家看到!
你可以看到一个在线版本。这里
最后的话!
Azure静态网络应用程序可以帮助和促进我们以一种简单、快速和动态的方式部署静态应用程序。最重要的是，它与GitHub Actions集成在一起。从而为我们自动创造了一个C.I和C.D的跑步机!太棒了，不是吗？
