.NetCore + Angular + Azure：部署

Question

我在 server 文件夹中创建了一个 Web Api Asp.Net 核心项目，在 中创建了一个 Angular-Cli 项目客户端 文件夹。

本地：

我用 IIS Express 启动 WebAPI，用
启动我的 angular 项目
```
ng serve --proxy-config proxy.config.json*. 
```
在我的 Angular 应用程序中，在 environments/environment.ts 中，能够获得 ApiUrl 使用 environment.apiUrl（代理不适用于与 SignalR 一起使用的 websocket），我添加了一个新参数：
```
apiUrl: "http://localhost:49402/" 
```
文件结构：

我的项目也在 git 上可用： https://github.com/ranouf/AspNetCore-SignalR/

在 Azure 上：

我创建了一个新的 WebApp，
我配置了部署选项，每次修改master，都会部署Web App，效果很好对于我的网站Api.

问题：

如何在 Azure 上的 Web 应用程序中部署我的 Angular 应用程序？

我的想法：

我添加了一个 post 构建命令，它将仅在发布模式下在 wwwroot 文件夹中构建我的 angular 应用程序。此解决方案适用于本地，但 不适用于 Azure:

<PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
<PostBuildEvent>
  cd "$(MSBuildProjectDirectory)/../../client"
  npm install
  npm run build
</PostBuildEvent>
</PropertyGroup>

然后在 startup.cs 中，我添加了

app.UseDefaultFiles();
app.UseStaticFiles();

限制条件：

我必须在本地分离我的 2 个项目，我不能使用 webpack microsoft angular 模板。

感谢您的帮助。塞德里克

编辑

所以我还在努力。

调试和理解 Azure 门户上发生的事情真的很难。 Deployment 上的日志不提供构建输出。

我的新预构建命令是：

echo "$(ProjectDir)..\..\client"
cd $(ProjectDir)..\..\client
echo "npm install"
npm install
echo "ng build"
ng build --env=prod --prod --output-path=$(ProjectDir)

但是，服务器文件夹中仍未复制任何内容...

拜托，你能分享你的想法吗？如何在 Azure 门户中使用部署选项部署我的 angular 应用程序？

编辑 2

所以，网上没看到解决办法，这里也没有人回答，所以我想先做的好像做不到。

我尝试其他东西，kudu 部署脚本。您需要添加两个文件：

.deployment 里面有这行：
```
[config]
command = deploy.cmd
```

deploy.cmd:

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

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: Setup
:: -----
setlocal enabledelayedexpansion

IF NOT DEFINED DEPLOYMENT_SOURCE (
  SET DEPLOYMENT_SOURCE=%ARTIFACTS%\repository
)

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

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: Deployment
:: ----------
echo Source: %DEPLOYMENT_SOURCE%...
echo Deployment: in %DEPLOYMENT_TARGET%...

echo Server off
touch %DEPLOYMENT_TARGET%\App_Offline.htm

pushd "%DEPLOYMENT_SOURCE%\src\client"
echo npm install --production
call :ExecuteCmd npm install --production
IF !ERRORLEVEL! NEQ 0 goto error

echo Deploy client
call :ExecuteCmd npm run build-azure
IF !ERRORLEVEL! NEQ 0 goto error
popd

echo Deploy API
call :ExecuteCmd dotnet publish src\server\AspNetCore-SignalR.Api\ -o %DEPLOYMENT_TARGET%
IF !ERRORLEVEL! NEQ 0 goto error

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: End
:: ---
IF !ERRORLEVEL! NEQ 0 goto error

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.

有2个优点：

部署成功
所有文件（DotNet Core 发布 + Angular 发布）都在 wwwroot

有 1 个大问题：

我可以使用 swagger (www.website.com/swagger) 访问 API，但 angular 应用程序不可用（www.webiste.com 上的错误 404 )
如果我删除 web.config，Angular 应用程序现在可用，但不再是 swagger 或 API。

如何让 web.config 明白我想要同时工作 Angular App 和 Swagger？

Answer 1

我找到了解决办法！很难，我尝试了很多东西，甚至是 Kudu Deploy 脚本：

（对于那些可能有兴趣了解如何做到这一点的人）。

但最后，我选择了（也许）最简单的解决方案，即 PreBuildEvent 命令。

在我的 csproj 中：

<PropertyGroup Condition="'$(Configuration)' == 'Release'">
  <PreBuildEvent>
    cd "$(MSBuildProjectDirectory)/../../client"
    npm install
  </PreBuildEvent>
  <PostBuildEvent>
    cd "$(MSBuildProjectDirectory)/../../client"
    npm run build-azure
  </PostBuildEvent>
</PropertyGroup>

在Package.json中：

"build": "ng build --env=prod --prod --output-path=../server/AspNetCore-SignalR.Api/wwwroot/",
"build-azure": "ng build --env=prod --prod --output-path=D:/home/site/wwwroot/wwwroot/",

要知道的主要事情是当你想部署一个 Angular 应用程序时，你需要在 wwwroot 文件夹中进行。在 Azure 中，.Net 应用程序部署在 D:/home/site/wwwroot/ 中。我的错误是认为我也必须在那里部署我的 angular 应用程序。好的做法是将它部署在 D:/home/site/wwwroot/wwwroot.

我希望，我的工作也会对人们有所帮助。如果您有任何改进流程和加强安全性的建议，请告诉我们。

.NetCore + Angular + Azure：部署

.NetCore + Angular + Azure: Deployment

post-build-event

continuous-deployment

azure-web-app-service

asp.net-core

angular

本地：

在 Azure 上：

问题：

我的想法：

限制条件：

编辑

编辑 2