zoukankan      html  css  js  c++  java
  • 将一个Angular应用程序从Visual Studio代码部署到Azure

    本文开发环境准备:Node.js, Angular, VS Code和Azure。继续读下去,学习如何轻松地利用这些技术构建一个web应用程序!

    这篇文章将讨论如何:

    • 使用Azure App服务在云上设置一个免费node服务器。
    • 在Node 10上构建一个基本的Angular 6 web应用程序。
    • 使用Visual Studio代码将web应用程序从本地开发机器部署到Azure。

    先决条件:

    你需要一个免费的Azure帐户或任何Azure订阅。如果你没有一个付费订阅,一个随用随付的订阅也是可以的。本文中使用的所有Azure服务对于开发和测试来说都是免费的。

    您还需要在您的开发机器上安装以下工具:

    • 最新版的Visual Studio Code.
    • Node 12.13.x.
    • Angular CLI 7.x.

    在Azure上创建一个新的Web应用程序

    首先要做的是在Azure云上设置web应用程序(服务器)。Azure门户或Azure CLI可用于创建新的web应用程序。本文将演示如何使用Azure门户创建服务器。

    要在Azure上设置Node.js服务器,你需要创建一个App服务计划和一个Web App。App服务计划将创建在F1 Free层上,该层提供了一个适合开发的基本免费虚拟服务器(1gb内存,1小时CPU时间/天)。

    创建App服务计划:

    1. 使用Azure门户的资源搜索找到“App服务计划”
    2. 填写App服务计划名称、资源组,并确保选择了“F1免费”定价层。免费定价层可以在“Dev / Test”选项卡下找到。

     

    创建您的web应用程序:

    1. 使用Azure门户中的资源搜索定位“Web App”
    2. 填写应用程序名称,选择theResource组,并确保选择了之前创建的应用程序服务计划。

     

     现在,您应该可以在Azure仪表板上看到您的应用程序服务计划和web应用程序。

     web服务器现在已经准备好了。

    Visual Studio Code

    结合了Azure应用程序服务扩展的Visual Studio code可用于开发、打包web应用程序并将其部署到Azure云。

    在Angular应用程序的目录下打开Visual Studio code。使用集成终端中的ng serve命令(CTRL-~快捷键)运行并验证你的应用程序。

    Azure App Service Extension

    从Visual Studio代码市场安装Azure应用程序服务扩展。在安装扩展并重新加载Visual Studio代码之后,您将注意到左侧导航栏中有一个新的Azure图标。单击Azure图标以打开扩展并选择登录到Azure的选项。

     登录Azure后,你会看到之前创建的“canadianmaple”web应用程序。

    Deploying the App

    在使用ng Build命令部署之前构建web应用程序。这个命令将创建dist/canadian-maple目录,其中包含一个经过整理的、缩小的、随时可以部署的应用程序版本。

    部署到Azure Web应用程序非常简单,只需在Azure应用程序服务扩展中的Web应用程序上右键单击,然后选择“部署到Web应用程序”选项。这个扩展会给出部署的建议,但是使用浏览选项来选择dist/canadian-maple文件夹。

     您将看到一些提示和通知:

    • 在“Are you sure you want to deploy…”对话框中选择Yes,以覆盖您之前可能对Azure Web应用程序进行的任何部署。
    • 在“始终部署工作区…”通知中选择Yes,以节省后续部署的时间。部署路径和Azure Web应用程序名称将被保存到工作区中的.settings文件中。下次部署时,将不会提示您输入此信息。

    部署完成后,您将收到一个通知,其中带有一个浏览站点的链接。

     你已经把一个运行在Node 12.13.x上的Angular 7应用部署到Azure云上了……相当轻松!访问http://canadianmaple.azurewebsites.net可以看到一个活生生的例子。

  • 相关阅读:
    appdata文件夹有什么用途?C盘appdata可以删除吗?
    白话讲MyIsam和InnoDB的区别
    MVC&&MVP
    计算机程序的思维逻辑- 函数调用的基本原理
    猫狗收养所
    博客学习分类
    Android之操作SQLite
    总结---20160508
    对栈元素排序
    集合栈
  • 原文地址:https://www.cnblogs.com/zmsoftbj/p/13793637.html
Copyright © 2011-2022 走看看