我使用命令ng new APPNAME
创建了一个角度应用程序。我想使用cake build来部署这个应用程序。可以用蛋糕做蛋糕吗?如果是这样怎么办?我的最终目标是将其部署到azure,但我需要使用cake build来完成。我已经将所有源代码上传到git存储库。
最佳答案
所以用angular cli构建一个普通的香草应用程序应该是这样的
string target = Argument("target", "Build");
FilePath ngPath = Context.Tools.Resolve("ng.cmd");
FilePath npmPath = Context.Tools.Resolve("npm.cmd");
DirectoryPath outputPath = MakeAbsolute(Directory("./output"));
Action<FilePath, ProcessArgumentBuilder> Cmd => (path, args) => {
var result = StartProcess(
path,
new ProcessSettings {
Arguments = args
});
if(0 != result)
{
throw new Exception($"Failed to execute tool {path.GetFilename()} ({result})");
}
};
Task("Install-AngularCLI")
.Does(() => {
if (ngPath != null && FileExists(ngPath))
{
Information("Found Angular CLI at {0}.", ngPath);
return;
}
DirectoryPath ngDirectoryPath = MakeAbsolute(Directory("./Tools/ng"));
EnsureDirectoryExists(ngDirectoryPath);
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
.Append("--prefix")
.AppendQuoted(ngDirectoryPath.FullPath)
.Append("@angular/cli")
);
ngPath = Context.Tools.Resolve("ng.cmd");
});
Task("Clean")
.Does( ()=> {
CleanDirectory(outputPath);
});
Task("Install")
.IsDependentOn("Clean")
.Does( ()=> {
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
);
});
Task("Build")
.IsDependentOn("Install-AngularCLI")
.IsDependentOn("Install")
.Does( ()=> {
Cmd(ngPath,
new ProcessArgumentBuilder()
.Append("build")
.Append("--output-path")
.AppendQuoted(outputPath.FullPath)
);
});
RunTarget(target);
基本上是这样的
如果找不到,请安装angular cli
安装节点模块
构建角度应用程序
如果要在kudu上运行构建和发布,可以使用cake.kudu addin和kudusync工具,通过添加
tool
和addin
预处理器指令来声明依赖项,如下所示:#tool nuget:?package=KuduSync.NET&version=1.3.1
#addin nuget:?package=Cake.Kudu&version=0.6.0
发布任务看起来像这样
Task("Publish")
.IsDependentOn("Build")
.Does( ()=> {
Kudu.Sync(outputPath);
});
为了让kudu知道它应该使用自定义部署脚本,您需要添加一个
.deployment
文件来告诉它这样做,该文件可能如下所示:[config]
command = deploy.cmd
以及一个定制的Boostrapper来安装Cake I-the-Kudu环境,它可能看起来像这样:
@ECHO OFF
REM SET Cake
SET CAKE_VERSION=0.23.0
SET CAKE_FOLDER=Cake.%CAKE_VERSION%
SET PATH=%~dp0\Tools;%PATH%
REM Cleanup any old Cake versions
FOR /f "delims=" %%c IN ('dir /AD /B "Tools\Cake*"') DO (
IF NOT "%%c" == "%CAKE_FOLDER%" (RD /S /Q "Tools\%%c")
)
REM Install Dependencies
IF NOT EXIST "Tools" (md "Tools")
IF NOT EXIST "Tools\Addins" (md "Tools\Addins")
IF NOT EXIST "Tools\%CAKE_FOLDER%\Cake.exe" (
echo Downloading Cake %CAKE_VERSION%
nuget install Cake -Version %CAKE_VERSION% -OutputDirectory "Tools" -Source https://api.nuget.org/v3/index.json
)
REM Execute deploy
Tools\%CAKE_FOLDER%\Cake.exe -version
Tools\%CAKE_FOLDER%\Cake.exe build.cake --Target="Publish"
它基本上只是清理所有旧的cake版本,如果还没有安装,则获取0.23.0。
完整的蛋糕脚本如下
#tool nuget:?package=KuduSync.NET&version=1.3.1
#addin nuget:?package=Cake.Kudu&version=0.6.0
string target = Argument("target", "Build");
FilePath ngPath = Context.Tools.Resolve("ng.cmd");
FilePath npmPath = Context.Tools.Resolve("npm.cmd");
DirectoryPath outputPath = MakeAbsolute(Directory("./output"));
Action<FilePath, ProcessArgumentBuilder> Cmd => (path, args) => {
var result = StartProcess(
path,
new ProcessSettings {
Arguments = args
});
if(0 != result)
{
throw new Exception($"Failed to execute tool {path.GetFilename()} ({result})");
}
};
Task("Install-AngularCLI")
.Does(() => {
if (ngPath != null && FileExists(ngPath))
{
Information("Found Angular CLI at {0}.", ngPath);
return;
}
DirectoryPath ngDirectoryPath = MakeAbsolute(Directory("./Tools/ng"));
EnsureDirectoryExists(ngDirectoryPath);
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
.Append("--prefix")
.AppendQuoted(ngDirectoryPath.FullPath)
.Append("@angular/cli")
);
ngPath = Context.Tools.Resolve("ng.cmd");
});
Task("Clean")
.Does( ()=> {
CleanDirectory(outputPath);
});
Task("Install")
.IsDependentOn("Clean")
.Does( ()=> {
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
);
});
Task("Build")
.IsDependentOn("Install-AngularCLI")
.IsDependentOn("Install")
.Does( ()=> {
Cmd(ngPath,
new ProcessArgumentBuilder()
.Append("build")
.Append("--output-path")
.AppendQuoted(outputPath.FullPath)
);
});
Task("Publish")
.IsDependentOn("Build")
.Does( ()=> {
Kudu.Sync(outputPath);
});
RunTarget(target);
并且运行在你的azure网站上的kudu构建的输出看起来像这样
+## #;;'
#;;# .+;;;;+,
'+;;#;,+';;;;;'#.
++'''';;;;;;;;;;# ;#;
##';;;;++'+#;;;;;'. `#:
;# '+'';;;;;;;;;'#` #.
`#, .'++;;;;;':..........#
'+ `.........';;;;':.........#
#..................+;;;;;':........#
#..................#';;;;;'+''''''.#
#.......,:;''''''''##';;;;;'+'''''#,
#''''''''''''''''''###';;;;;;+''''#
#''''''''''''''''''####';;;;;;#'''#
#''''''''''''''''''#####';;;;;;#''#
#''''''''''''''''''######';;;;;;#'#
#''''''''''''''''''#######';;;;;;##
#''''''''''''''''''########';;;;;;#
#''''''''''''++####+;#######';;;;;;#
#+####':,` ,#####';;;;;;'
+##'''''+.
___ _ ___ _ _ _
/ __\__ _| | _____ / __\_ _(_) | __| |
/ / / _` | |/ / _ \/__\// | | | | |/ _` |
/ /___ (_| | < __/ \/ \ |_| | | | (_| |
\____/\__,_|_|\_\___\_____/\__,_|_|_|\__,_|
Version 0.23.0+Branch.main.Sha.67afe72f1c21a8a3cfd96d3969fb2591d62f37ff
========================================
Install-AngularCLI
========================================
Found Angular CLI at D:/home/site/repository/tools/ng/ng.cmd.
========================================
Clean
========================================
========================================
Install
========================================
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
npm WARN [email protected] requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
========================================
Build
========================================
Date: 2017-11-17T10:36:45.847Z
Hash: 3b11c732f8aa65f3a08c
Time: 8815ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.79 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]
========================================
Publish
========================================
KuduSync.NET from: 'D:\home\site\repository\output' to: 'D:\home\site\wwwroot'
Copying file: 'favicon.ico'
Copying file: 'index.html'
Copying file: 'inline.bundle.js'
Copying file: 'inline.bundle.js.map'
Copying file: 'main.bundle.js'
Copying file: 'main.bundle.js.map'
Copying file: 'polyfills.bundle.js'
Copying file: 'polyfills.bundle.js.map'
Copying file: 'styles.bundle.js'
Copying file: 'styles.bundle.js.map'
Copying file: 'vendor.bundle.js'
Copying file: 'vendor.bundle.js.map'
Time 444
Task Duration
--------------------------------------------------
Install-AngularCLI 00:00:00.0491433
Clean 00:00:00.0782836
Install 00:00:35.4828120
Build 00:01:12.5709830
Publish 00:00:00.8032134
--------------------------------------------------
Total: 00:01:48.9844353
在您编写的最后一条评论中,您希望使用octopus deploy进行部署,这基本上意味着添加两个新任务,就像kudu publish-execute post构建一样。
把文物打包
推送至八达通服务器
因为这个蛋糕有OctoPack和OctoPush别名。
这些别名需要
octo.exe
工具,可以使用如下tool
指令获取#tool nuget:?package=OctopusTools&version=4.25.0
打包任务可能看起来像这样
DirectoryPath nugetPath= MakeAbsolute(Directory("./nuget"));
Task("Pack")
.IsDependentOn("Build")
.Does( ()=> {
OctoPack(
"PoCApp",
new OctopusPackSettings {
BasePath = outputPath,
OutFolder = nugetPath,
Format = OctopusPackFormat.Zip
}
);
});
一旦你打包了你的应用并将包推送到我们的八达通服务器,那么你就可以使用他们内置的部署到azure web应用的功能,这里有一个很好的指南
https://octopus.com/docs/deploying-applications/deploying-to-azure/deploying-a-package-to-an-azure-web-app
以下回购协议中提供了上述部分代码
https://github.com/azurevoodoo/NGAppDeployedWithKuduPoC