如何通过本地git将Angular 4应用部署到Azure Web App

Question

如何通过本地git将Angular 4应用部署到Azure Web App

angularazureazure-web-app-service

4

我尝试过很多次进行部署。我可以将nodeJS部署到Azure Web应用程序，但我无法部署Angular4。它总是显示“服务不可用”。如何通过本地git进行部署。（开发团队使用git进行版本控制）

- LPJ

https://sajeetharan.com/2020/02/14/deploy-angular9-app-to-azure-with-github-actions/ - Sajeetharan

3个回答

2

1) 创建 AngularJS 的 Web 应用程序并进入应用程序设置

WEBSITE_NODE_DEFAULT_VERSION=10.6.0

2) 点击部署选项并配置您的源代码存储库，这里我使用 Bitbucket 进行演示

3) 现在使用以下命令本地构建源代码，并确保应用程序正常工作

npm install
ng build -prod
ng serve

ng build -prod 会创建用于部署的 dist 文件夹。

4) 创建 web.config 文件并将其添加到源代码的根级别

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
          <httpErrors errorMode="Custom" existingResponse="Replace">
            <remove statusCode="404"/>
            <error statusCode="404" responseMode="ExecuteURL" path="/index.html"/>
        </httpErrors>
    <defaultDocument>
        <files>
            <add value="index.html" />
        </files>
    </defaultDocument>
          <rewrite>
        <rules>
            <rule name="Angular" 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="/" />
            </rule>
        </rules>
        </rewrite>

  </system.webServer>
</configuration>

5) 在根目录下创建 "package.json" 文件

{
  "name": "scoring",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
   "ng": "ng",
    "start": "ng serve",
    "build": "ng build –prod ",
    "postinstall": "npm run build"
  },
  "engines": {
    "node": ">=10.0.0",
    "npm": ">=6.0.0"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "prod": "^1.0.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.41",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

6) 确保在根目录下创建了"package-lock.json"文件

"package-lock.json"是在npm修改node_modules树或package.json时自动生成的。它描述了生成的确切树，以便后续安装能够生成相同的树，而不受中间依赖更新的影响。

7) 在根目录下创建了".deployment"文件

[config]
command = deploy.cmd

8) 现在您需要KUDU部署脚本

@if "%SCM_TRACE_LEVEL%" NEQ "4" @echo off

:: ----------------------
:: KUDU Deployment Script
:: Version: 1.0.8
:: ----------------------

:: Prerequisites
:: -------------

:: Verify node.js installed
where node 2>nul >nul
IF %ERRORLEVEL% NEQ 0 (
  echo Missing node.js executable, please install node.js, if already installed make sure it can be reached from current environment.
  goto error
)

:: Setup
:: -----

setlocal enabledelayedexpansion

SET ARTIFACTS=%~dp0%..\artifacts

IF NOT DEFINED DEPLOYMENT_SOURCE (
  SET DEPLOYMENT_SOURCE=%~dp0%.
)

IF NOT DEFINED DEPLOYMENT_TARGET (
  SET DEPLOYMENT_TARGET=%ARTIFACTS%\wwwroot
)

IF NOT DEFINED NEXT_MANIFEST_PATH (
  SET NEXT_MANIFEST_PATH=%ARTIFACTS%\manifest

  IF NOT DEFINED PREVIOUS_MANIFEST_PATH (
    SET PREVIOUS_MANIFEST_PATH=%ARTIFACTS%\manifest
  )
)

IF NOT DEFINED KUDU_SYNC_CMD (
  :: Install kudu sync
  echo Installing Kudu Sync
  call npm install kudusync -g --silent
  IF !ERRORLEVEL! NEQ 0 goto error

  :: Locally just running "kuduSync" would also work
  SET KUDU_SYNC_CMD=%appdata%\npm\kuduSync.cmd
)
goto Deployment

:: Utility Functions
:: -----------------

:SelectNodeVersion

IF DEFINED KUDU_SELECT_NODE_VERSION_CMD (
  :: The following are done only on Windows Azure Websites environment
  call %KUDU_SELECT_NODE_VERSION_CMD% "%DEPLOYMENT_SOURCE%" "%DEPLOYMENT_TARGET%" "%DEPLOYMENT_TEMP%"
  IF !ERRORLEVEL! NEQ 0 goto error

  IF EXIST "%DEPLOYMENT_TEMP%\__nodeVersion.tmp" (
    SET /p NODE_EXE=<"%DEPLOYMENT_TEMP%\__nodeVersion.tmp"
    IF !ERRORLEVEL! NEQ 0 goto error
  )

  IF EXIST "%DEPLOYMENT_TEMP%\__npmVersion.tmp" (
    SET /p NPM_JS_PATH=<"%DEPLOYMENT_TEMP%\__npmVersion.tmp"
    IF !ERRORLEVEL! NEQ 0 goto error
  )

  IF NOT DEFINED NODE_EXE (
    SET NODE_EXE=node
  )

  SET NPM_CMD="!NODE_EXE!" "!NPM_JS_PATH!"
) ELSE (
  SET NPM_CMD=npm
  SET NODE_EXE=node
)

goto :EOF

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: Deployment
:: ----------

:Deployment
echo Handling node.js deployment.

:: 1. KuduSync
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
  call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
  IF !ERRORLEVEL! NEQ 0 goto error
)

:: 2. Select node version
call :SelectNodeVersion

:: 3. Install npm packages
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
  pushd "%DEPLOYMENT_TARGET%"
  call :ExecuteCmd !NPM_CMD! install --only=prod
  IF !ERRORLEVEL! NEQ 0 goto error
  popd
)

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
goto end

:: Execute command routine that will echo out when error
:ExecuteCmd
setlocal
set _CMD_=%*
call %_CMD_%
if "%ERRORLEVEL%" NEQ "0" echo Failed exitCode=%ERRORLEVEL%, command=%_CMD_%
exit /b %ERRORLEVEL%

:error
endlocal
echo An error has occurred during web site deployment.
call :exitSetErrorLevel
call :exitFromFunction 2>nul

:exitSetErrorLevel
exit /b 1

:exitFromFunction
()

:end
endlocal
echo Finished successfully.

9) 转到控制台并验证

10) 前往验证构建成功或错误日志

11) 访问Azure Web应用程序的URL，查看您的应用程序正在运行，它是持续部署，因此一旦将代码提交到存储库，构建就会自动推送到Azure。

- vaquar khan

0

你需要在项目的根目录中包含一个 Web.config 文件。

Web.config:

<?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <system.web>
            <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536" />
        </system.web>
        <system.webServer>
            <security>
                <requestFiltering>
                    <requestLimits maxQueryString="32768" />
                    </requestFiltering>
            </security>
            <rewrite>
                <rules>
                    <rule name="AngularJS" stopProcessing="true">
                        <match url="^(?!.*(.chunk.js|.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
                        <conditions logicalGrouping="MatchAll"></conditions>
                        <action type="Rewrite" url="/" appendQueryString="true" />
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>

- Sebastian Moreno E

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Brandl · Accepted Answer

您是否先构建了您的应用程序？例如，如果您使用angular-cli，则可以使用以下命令：

ng build --prod

这将创建一个dist目录，其中包含构建工件。为了使用客户端路由并消除一些控制台错误，您应该在dist文件夹中放置一个web.config文件：

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
     </staticContent>

      <rewrite>
        <rules>
            <rule name="Angular" 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="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

现在您需要做的就是将dist目录的内容“推送”到您的Web应用程序。为此，请使用以下命令在dist目录中初始化git存储库：

git init

使用以下命令将所有内容添加到本地代码库：

git add -A

并提交它：

git commit -m "initial commit"

然后添加你的Azure Web应用git代码库：

git remote add azure https://<username>@localgitdeployment.scm.azurewebsites.net:443/localgitdeployment.git

并将内容推送到它：

git push azure master

请参阅将本地 Git 部署到 Azure 应用服务