web-dev-qa-db-ja.com

デプロイAngular 2 Azure Webappで

angular 2 webappをazureにデプロイするにはどうすればよいですか？）ある種の最終的なコンパイルスクリプトが必要だと思います。

前もって感謝します。

angularazuredeploymentweb-deploymentazure-deployment
14
Daniel Golub

Azureでangular2アプリを実行するには、次の手順に従います。

  1. 新しいngアプリを作成します（ng cliを使用）：ng new testAppおよびPush to some github repo 。
  2. Kud のAzureデプロイメントファイルを作成します。
npm install Azure-cli -g
Azure site deploymentscript --node

これにより、2つのファイル 。deployment および deploy.cmd が作成されます

  1. deploy.cmd を編集して、行から--productionを削除します。

:: 3. npmパッケージをインストールする

すべての依存関係がインストールされるようにする（ng cliを含む）

  1. :: 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で新しいwebappを作成し、githubリポジトリに bind それを作成します
  2. azureの「アプリケーション設定」でアプリのルートを変更するだけです
    「仮想アプリケーションとディレクトリ」の下
    から

site\wwwroot


に

site\wwwroot\dist


7。デプロイメントをトリガーします。 （githubにプッシュするか、Azureポータルから手動で）
8。 （オプション）更新時に404を修正するには、次のコンテンツを含むルートに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>
  1. アプリを開いてください。
21
Amir Sasson

私はこれが少し遅いことを知っていますが、他のどの回答も明確な指示を与えません。うまくいけば、これは誰かを助けることができます。

Angular-CLIを使用していることを前提としています。

実行：

npmインストール

ngビルド（設定によっては、npmビルドを実行できる場合があります）

これにより、作業中のWebサイトに必要なファイルを含む./distというフォルダーが作成されます。次に、スクリプト対応のFTPクライアントを使用して、。/ dist内のすべてのコンテンツをAzure Webアプリの./site/wwwrootフォルダーにプッシュします。

Azure Portalから、Publish ProfileにあるwabappのFTP資格情報を使用する必要があります。このStackoverflowの質問は、それを妨げるものです。 新しいAzureポータルの「ダウンロードパブリッシュプロファイル」はどこにありますか？

8
Taul

何もしなくてもなんとか成功しました。手順は次のとおりです。

  1. ソースコントロールとしてGitHubを使用しました。したがって、VS Codeターミナルでコマンドng buildを使用してmy Angular 4プロジェクトをビルドした後、distフォルダー全体（プロジェクトディレクトリ/フォルダーに生成されます）をプッシュしましたng build）をGitHubにも実行した後。IDEがdistフォルダーをchangesとして検出できない場合は、手動でフォルダーをGitHubリポジトリにアップロードできます。フォルダ全体をアップロードするためのドラッグアンドドロップ機能。
  2. 次に、Azureサブスクリプションに新しいApp Serviceを作成します。

  3. Deployment Optionsに移動し、GitHubを選択し、認証情報を入力して、使用するrepositoryの名前を入力します。 enter image description here

  4. Application Settingsに移動し、次にVirtual Applications and Directories、ルートディレクトリをsite\wwwroot\distに変更します enter image description here

  5. これですべてが設定されました。再びDeployment Optionsに戻ると、Build進行中です。チェックインによってGitHubリポジトリでコードを更新した後、新しいビルドを作成するために同期することができます。 （追伸：私の場合、GitHubへの新しいチェックイン後に新しいビルドが自動的にトリガーされました）

  6. ビンゴ！これで、AzureでWebサイトにアクセスできます。 ：D

2
Ron16

これが継続的デプロイメントの目的で必要であり、git repoを使用している場合、それは非常に単純ですが、ここの指示に従ってください Azure App ServiceでGITを使用した継続的デプロイメント 。

ただし、一般的には、angular2とは直接関係ありません。これも試してください Windows PowerShellスクリプトを使用して、開発環境とテスト環境に公開する 機能。

angularビルド、テスト、デプロイのメインツールである（または今後になる予定））この時点では、このような機能も要件もありません（今のところわかっています）。 the github で機能をリクエストできます。

2
David Gabrichidze

私はあなたを解決への道の一部とすることができますが、私はあなたの質問に完全に答えることはできません。 SOモニターがこの応答を削除したい場合は、お気軽にご連絡ください。

Angular CLIアプリケーションを取得して、BitbucketからAzureにデプロイしようとしています。2つのオプションがあります。

1）JenkinsやCodeshipなどのサービスを使用して、デプロイ用にアプリケーションを事前ビルドします。 Shane Boyerは、GithubとCodeshipを使用した実用的なソリューションをここに持っています： http://tattoocoder.com/angular2-Azure-codeship-angularcli/

このオプションは、サーバーでコンパイルされたコードのみを使用するのが最も望ましいようです。私はジェンキンスと協力してこれをangular-cliで達成する方法を理解しようとしています。

2）コードをサーバーにコピーし、そこでビルドを実行します。これは望ましくないb/cのようですが、サーバーにソースコードが残ります。このオプションは90％完了しています。

私のビルドは、欠落しているnpmパッケージのb/cで失敗しました。

最初に、Nodeの最新バージョンを使用するように環境を変更しました。これは役に立ちました。これは、Webアプリで設定を開き、アプリケーション設定に移動することで実行できます。アプリで[アプリケーションの設定]タブの設定セクションでは、キーと値のペアのセットが必要です。そのうちの1つは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を使用しても、その失敗の適切なログを取得していません。基本的に、それはすべてのファイルをコピーして失敗し、「不良リクエスト」エラーを返し、使用するスイッチに関係なくログは返されません。 ng.cmdを追加するようにnpm環境を変更しようとしているときに失敗していると思います。私は現在これを調査しています。

うまくいけば、これはあなたをもう少し先に動かすでしょう。

幸運を。

1
rkralston

angularアプリケーションをAzure webappsでbitbucketを使用してデプロイするには、ルートディレクトリにbitbucket-pipelines.ymlを作成します。webappsスロットのFTPアクセス用の環境変数を作成します（環境変数以下のスクリプトでは$を使用して参照されています）。

Bitbucket設定からパイプラインを有効にします。それでおしまい。特定のブランチ（以下のスクリプトのマスターブランチ）でコードをチェックインすると、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
0
Venky