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

问题描述

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

提前致谢.

解决方案

为了在 azure 中运行 angular2 应用程序，请执行以下步骤:

1. 创建一个新的 ng 应用程序(使用 ng cli):ng new testApp 并推送到一些 github 存储库.
2. 为 Kudu 创建 Azure 部署文件:

<块引用>

npm install azure-cli -g天蓝色站点部署脚本 --node

这将创建 2 个文件 .deployment 和 deploy.cmd

3. 编辑 deploy.cmd 删除 --production 来自行

<块引用>

:: 3. 安装 npm 包

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

4. 在:: 3.安装npm包
下面添加

这个片段:

echo 处理 Angular 构建:: 4. 构建 ng 应用程序如果存在 "%DEPLOYMENT_TARGET%package.json" (pushd "%DEPLOYMENT_TARGET%"调用 :ExecuteCmd "!NODE_EXE!"./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot如果 !ERRORLEVEL!NEQ 0 转到错误:: 下一行是可选的以修复 404 错误，请参阅第 8 节调用 :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/如果 !ERRORLEVEL!NEQ 0 转到错误弹出)

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

<块引用>

站点wwwroot

到

<块引用>

站点wwwrootdist

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

 <?xml version="1.0" encoding="UTF-8"?><配置><system.webServer><重写><规则><规则名称="AngularJS" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/></条件><action type="重写" url="index.html"/></规则></规则></rewrite></system.webServer></配置>

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

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

Thanks in advance.

解决方案

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

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

this will create 2 files .deployment and deploy.cmd

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

:: 3. Install npm packages

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

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

this snippet:

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
    )

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

sitewwwroot

to

sitewwwrootdist

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>

9. open your app .. BOOM!
   

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