使用Azure Webapp部署Angular 2 [英] Deploy Angular 2 with Azure Webapp

问题描述

如何才能将angular 2 webapp部署到天蓝色?我想我需要某种类型的最终编译脚本.

How can can I deploy an angular 2 webapp to azure? I guess I need some type of final compilation script.

谢谢.

推荐答案

要在Azure中运行angular2应用，请执行以下步骤:

In order to run angular2 app in azure follow these steps:

1. 创建一个新的ng应用程序(带有ng cli):ng new testApp并推送到一些 Kudu
创建Azure部署文件

1. create a new ng app (with ng cli) : ng new testApp and push to some github repo.
2. create Azure deployment files for Kudu :

npm install azure-cli -g
azure site deploymentscript --node

这将创建2个文件 .deployment 和

编辑 deploy.cmd 从行中删除--production

1. edit the deploy.cmd remove the --production from the line

:: 3.安装npm软件包

:: 3. Install npm packages

以便安装所有依赖项(包括ng cli)

so that all dependencies will be installed (including ng cli)

1. 在:: 3. Install npm packages
部分下添加

1. add under the section of :: 3. Install npm packages

此代码段:

echo Handling Angular build   
    :: 4. Build ng app
    IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
      pushd "%DEPLOYMENT_TARGET%"
      call :ExecuteCmd "!NODE_EXE!" ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot
      IF !ERRORLEVEL! NEQ 0 goto error
      :: the next line is optional to fix 404 error see section #8
      call :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/
      IF !ERRORLEVEL! NEQ 0 goto error
      popd
    )

1. 在azure中创建一个新的Web应用程序，并绑定到您的github存储库
   
2. 现在只需在Azure应用程序设置"中更改应用程序的根目录
   在虚拟应用程序和目录"下
   来自

1. create a new webapp in azure and bind it to your github repository
   
2. now just change the root of the app in the Azure "Application Settings"
   under "Virtual applications and directories"
   from

site \ wwwroot

site\wwwroot

到

to

site \ wwwroot \ dist

site\wwwroot\dist

7.触发部署. (通过推送到github或从azure门户手动进行)
8.(可选)要在刷新时修复404，需要在根目录上添加具有以下内容的web.config:

7. trigger a deployment. (by pushing to github or manually from the azure portal)
8. (optional) for fixing the 404 when refreshing, you need to add a web.config on the root with this content:

   <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="AngularJS" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>

1. 打开您的应用..BOOM！
   

这篇关于使用Azure Webapp部署Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！