Question

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

在本地：

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

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

在Azure上：

我创建了一个新的WebApp，
我配置了部署选项，每次修改 master 时，都部署了适用于我的WebApi的Web App。

问题：

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

我的想法：

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

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

在startup.cs中，我添加了

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

约束：

我必须在Local中分离我的2个项目，我不能使用webpack microsoft angular template。

感谢您的帮助。塞德里克

修改

所以我还在努力。

调试和理解Azure Portal上发生的事情真的很难。部署登录不会提供构建输出。

我的新预构建命令是：

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

但是，在服务器文件夹中没有任何内容被复制......

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

编辑2

所以，我在网上看不到任何解决方案，也没有人在这里回答，所以我想先做的事情似乎不可能。

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

。使用此行内部部署：
```
[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，但角度应用程序不可用（www.webiste.com上的错误404）
如果我删除了web.config，Angular App现在可用了，但不再是招摇或API了。

如何理解我想要同时使用Angular App和Swagger的web.config？

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 App时，需要在wwwroot文件夹中执行此操作。在Azure中，.Net应用程序部署在D：/ home / site / wwwroot /中。我的错误是认为我必须在那里部署我的角度应用程序。好处是将它部署在D：/ home / site / wwwroot / wwwroot。

我希望，我的工作也会帮助别人。如果您有任何建议来改进流程并加强安全性，请让我们知道。

.NetCore + Angular + Azure：部署

在本地：

在Azure上：

问题：

我的想法：

约束：

修改

编辑2

1 个答案: