使用Azure Webapp部署Angular 2

问题描述：

如何才能将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:

创建一个新的ng应用程序(带有ng cli):ng new testApp并推送到一些 Kudu

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

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

这将创建2个文件 .deployment 和

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

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)

在:: 3. Install npm packages

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
    )

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

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

site \ wwwroot

site\wwwroot

到

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>

打开您的应用..BOOM！

使用Azure Webapp部署Angular 2

相关推荐