Question

如何将角度2 webapp部署到azure？我想我需要某种类型的最终编译脚本。

提前致谢。

Answer 1

要在azure中运行angular2 app，请按照以下步骤操作：

创建一个新的应用（使用ng cli）：ng new testApp并推送到某些github repo。
为Kudu创建Azure部署文件：

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

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

修改deploy.cmd从行

--production

:: 3.安装npm软件包

以便安装所有依赖项（包括ng cli）

在:: 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中创建一个新的webapp，并将bind创建到您的github存储库中
现在只需在Azure“应用程序设置”中更改应用程序的根目录在“虚拟应用程序和目录”下，来自

站点\ wwwroot的

到

站点\ wwwroot的\ DIST

7.触发部署。（通过推送到github或手动从天蓝色的门户网站）
8.（可选）在刷新时修复404，你需要在root上添加一个web.config，内容如下：

   <?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！

Answer 2

我知道这有点晚了，但其他答案都没有明确的指示。希望这可以帮助某人。

我假设你正在使用Angular-CLI。

执行命令

npm install

ng build（取决于您的设置，您可以运行npm build）

这将创建一个名为./dist的文件夹，其中包含工作网站所需的文件。然后使用可脚本化的FTP客户端将./dist中的所有内容推送到Azure webapp的./site/wwwroot文件夹。

您需要从Azure门户使用wabapp的FTP凭据（如发布配置文件中所示）。这个Stackoverflow问题会让你知道。 Where is "download publish profile" in the new Azure Portal?

Answer 3

如果你需要这个用于持续部署目的，并且你使用git repo而不是非常简单，只需按照Continuous deployment using GIT in Azure App Service中的说明进行操作。

但是，一般来说，它与angular2没有直接关系。另请尝试此Using Windows PowerShell scripts to publish to dev and test environments功能。

angular-cli，它是（或将成为）角度构建，测试，部署的主要工具，此时没有这样的功能，也没有要求（据我所知到目前为止）。您可以在their github上请求功能。

Answer 4

我可以将你的一部分转移到解决方案，但我无法完全回答你的问题。因此，如果SO监视器想要删除此响应，请随意。

我正在尝试将一个Angular CLI应用程序从Bitbucket部署到Azure。您有两种选择：

1）使用Jenkins或Codeship等服务预构建应用程序以进行部署。 Shane Boyer在这里使用Github和Codeship有一个可行的解决方案：http://tattoocoder.com/angular2-azure-codeship-angularcli/

这个选项似乎是最理想的b / c你只在服务器上编译代码。我试图找出如何与Jenkins一起使用angular-cli来实现这一目标。

2）将代码复制到服务器并在那里运行构建。这似乎是不可取的b / c它会在您的服务器上留下源代码。我有90％完成此选项。

我的构建是缺少npm包的b / c失败。

首先，我改变了我的环境，以便它使用更新版本的Node，这有所帮助。您可以通过打开Web App上的设置并转到“应用程序设置”来执行此操作。在“应用程序设置”选项卡的“应用程序设置”部分中，您应该有一组键/值对。其中一个应该是WEBSITE_NODE_DEFAULT_VERSION。在我的应用程序上，我可以访问我正在使用的6.1.0版本。将您的版本设置为适当的版本。您也可以按照以下说明在packages.json文件中进行设置：https://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/。在应用程序设置中更改它允许您在命令行窗口中使用该版本，我需要安装npm软件包。

接下来，转到命令行并尝试安装缺少的软件包。我在这里取得了不一样的成功。最初，我的构建失败b / c打字没有安装。一旦我更新了Node，我就可以在全球范围内安装它。

我在安装angular-cli时遇到了问题。即使使用-dd，我也没有很好地记录该失败。从本质上讲，它复制所有文件然后无法返回“错误请求”错误，并且无论我使用何种交换机都没有日志。我相信在尝试修改npm环境以添加ng.cmd时失败了。我正在调查此事。

希望这会让你走得更远。

祝你好运。

Answer 5

我成功地做到了，而没有实际做太多。以下是步骤：

我使用GitHub作为源代码控件。因此，在VS Code终端上使用命令ng build构建我的Angular 4项目之后，我推送了整个dist文件夹（在运行{{}后生成的项目目录/文件夹中1}}）也是GitHub。如果IDE无法以ng build的形式检测到dist文件夹，您也可以手动将文件夹上传到GitHub存储库中。使用Drag＆amp;删除功能以上传整个文件夹。
现在在Azure订阅中创建一个新的 changes 。
转到 App Service 并选择Deployment Options，提供凭据，并提供您正在使用的GitHub的名称。
转到 repository ，然后转到 Application Settings ，并将根目录更改为Virtual Applications and Directories
现在一切都已确定。再次返回 site\wwwroot\dist ，您会看到 Deployment Options 正在进行中。通过签入更新GitHub存储库中的代码后，您可以只是同步以便进行全新构建。（P.S：在我的情况下，新的构建在新的GitHub登记后自动触发）
宾果！现在您可以访问azure上的网站了。：d

Answer 6

要使用Bitbucket在Azure Web应用程序上部署角度应用程序，请在根目录中创建 bitbucket-pipelines.yml 。为您的webapps插槽创建用于FTP访问的环境变量（环境变量在下面的脚本中使用$引用）。

从Bitbucket设置启用管道。而已。每当您在特定分支（下面的脚本中的master分支）中检入代码时，它将使用FTP将应用程序部署到Azure Web应用程序插槽中。

# registry for your build environment.
image: node:8.9.0

pipelines:
  branches:
    master:
     - step:
        script: # Modify the commands below to build your repository.
          - npm install -g @angular/cli 
          - npm install
          - ng build --prod
          - apt-get update # Now run the FTP bash script to deploy dist folder to UAT
          - apt-get install ncftp
          - ncftpput -v -u "$FTP_USERNAME" -p $FTP_PASSWORD -R $FTP_HOST $FTP_SITE_ROOT dist/ROOT
          - echo Finished uploading files to $FTP_HOST$FTP_SITE_ROOT

使用Azure Webapp部署Angular 2

6 个答案: