部署Azure静态Web应用程序

您现在可以使用Azure静态Web应用程序将静态站点部署到Azure。您需要在Github中将您的应用程序置于Github静态Web应用程序利用Github操作,这让您可以在每个GIT推动下重新构建静态站点。

您需要配置2件事,以便将应用部署到Azure静态Web应用程序。第一个是要修改Build命令,因为Azure读取来自Package.json和静态站点的构建命令,我们需要使用Generate命令。

package.json.

建造“nuxt生成”

第二个是添加一个routes.json文件,这对于捕获自定义404页和SPA回退页面很重要。

静态/ routes.json.

{“路线”[]“platformerroroverrides”[{“errortype”“未找到”“服务”“/200.html”“statuscode”200.}]}

如果要测试到Azure静态Web应用程序,我们创建了一个小型演示应用程序,即所有设置和配置。您只需要克隆它并将其添加到您的GitHub repo中。然后,您可以按照以下步骤 - 使用Azure静态Web应用程序部署您的应用程序。

克隆演示应用程序

使用Azure静态Web应用部署您的应用程序

第1步:创建Azure静态Web应用程序

  1. 导航到Azure门户网站
  2. 点击创建资源然后搜索静态应用程序并选择它。
  3. 从中选择订阅订阅下拉列表或使用默认值。
  4. 点击新的链接以下资源集团落下。在新资源组名称, 类型nuxt.然后点击
  5. 为您的应用提供全局唯一名称名称文本框。有效字符包括A-Z.A-Z.0-9, 和-。应用程序名称用于在资源列表中识别应用程序,因此使用存储库的名称命名您的应用是一个好主意。
  6. 在里面地区下拉列表,选择最接近您的地区。

Azure Portal资源和应用程序设置

第2步:添加GitHub存储库

Azure App Service静态应用程序需要访问Nuxt.js应用程序的存储库,以便可以自动部署提交:

  1. 点击使用github按钮登录
  2. 选择组织根据您为您的核心项目创建了repo。它也可以是您的GitHub用户名。
  3. 查找您之前创建的存储库的名称,然后选择它。
  4. 选择掌握作为树枝分支落下。

如何添加github

第3步:配置构建过程

Azure App Service静态应用程序很少有可能假设 - 像自动安装NPM模块和运行一样NPM运行构建。您还有很少有明确的,就像在构建之后复制静态应用程序的文件夹,所以可以从那里提供静态站点。

  1. 点击一下建造选项卡配置静态输出文件夹。
  2. 类型dist在里面App Artifact位置文本框。

Azure Portal配置构建

第四步:审查和创建

  1. 点击点评+创造按钮验证详细信息是否正确。
  2. 点击创建要开始创建资源并为部署提供GitHub操作。
  3. 部署完成后,单击去资源

Azure Portal部署完整消息

  1. 在资源屏幕上,单击该URL.链接以打开已部署的应用程序。

资源屏幕带有URL到部署的应用程序

恭喜您的静态站点现在托管Azure静态Web应用程序。

重建静态应用程序和监控部署

现在,您所要做的就是修改代码并推动更改。按下更改将激活GitHub操作,您的新站点将自动重建。您可以通过单击GitHub Repo中的“操作”选项卡来监视工作流程,您可以通过选择您所做的最后一次提交来进一步检查。然后,如果您有任何部署错误,则可以观看何时完成部署或检查日志。

github动作屏幕

你知道吗?

如何处理动态路由

如果您正在使用诸如_id.vue等动态页面,则您需要将这些路由添加到Nuxt Config中的生成属性。

请参阅有关如何处理动态路由的文档。

如果您使用的是Nuxt 2.13+,那么您将不必担心此内容,因为内置爬虫,它将通过爬网网站中的链接来抓取所有动态。

如何添加错误页面

为了没有默认的404页面,您可以创建一个错误文件在布局文件夹中。

如何添加水疗中心回退

如果您想要产生一些页面,但您可以在ubxffig文件中使用生成.excludes属性来执行此操作。

请参阅SPA倒退的文档

贡献者

抓住了一个错误或想要为文件做出贡献?在github上编辑此页面!