cake 构建 Angular 应用程序以部署到 azure

【问题标题】：cake build angular application to deploy to azurecake 构建 Angular 应用程序以部署到 azure
【发布时间】：2018-04-30 21:00:51
【问题描述】：

我使用命令ng new APPNAME 创建了一个角度应用程序。我想使用 cake build 来部署这个应用程序。可以使用蛋糕制作吗？如果有怎么办？我的最终目标是将它部署到天蓝色，但我需要使用 Cake build 来完成。我已将所有源代码上传到 git 存储库。

【问题讨论】：

  • 您能提供更多细节吗？只是您想要构建的 Angular 应用程序，还是它有 .NET 后端/.NET 解决方案的一部分？
  • 它只是一个角度应用程序。不是 .net 解决方案的一部分
  • 您可以在使用 ng build 构建静态文件后使用 cake 复制和部署它们。我对 cake 不熟悉，但您需要使用 typescript 编译器或 angular cli
  • 是的，但我是新手。我想知道它是怎么做的

标签： angular deployment build cakebuild


【解决方案1】：

所以用 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);

基本上是这样

  1. 如果找不到，请安装 Angular CLI
  2. 安装节点模块
  3. 构建 Angular 应用程序

如果你想在 kudu 上运行构建和发布，你可以使用 Cake.Kudu 插件和 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

还有一个用于在 kudu 环境中安装 Cake 的自定义 boostrapper，看起来像这样：

@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（如果尚未安装）。

完整的 Cake 脚本如下所示

#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 fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN codelyzer@3.2.2 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 进行部署，这基本上意味着添加 2 个新任务，就像 kudu 发布执行 post build 一样。

  1. 打包工件
  2. 推送到八达通服务器

对于这个 Cake 有 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
        }
    );
});

一旦你打包了你的应用程序并将包推送到我们的 octopus 服务器，那么你就可以使用他们内置的部署到 Azure Web 应用程序的功能，这里有一个很好的指南 https://octopus.com/docs/deploying-applications/deploying-to-azure/deploying-a-package-to-an-azure-web-app

上面的一些代码可以在下面的 repo 中找到 https://github.com/azurevoodoo/NGAppDeployedWithKuduPoC

【讨论】：

  • 在我的例子中 build.ps1 和 build.cake 会是什么。我无法正确获取它
  • build.ps1 可以是此处描述的默认推荐：cakebuild.net/docs/tutorials/setting-up-a-new-project build.cake 是上述“完整的 Cake 脚本”。上面的脚本假设你已经全局安装了 ng cli。
  • 如果在运行脚本的远程机器上没有安装 npm 怎么办？
  • 然后添加 'npm install -g @angular/cli' 到 deploy.cmd/build.ps1 或使用 Cake.NPM 插件作为 Cake 脚本的一部分 github.com/cake-contrib/Cake.NPM
  • 我将在今天晚些时候更新示例引导程序以安装 NG cli 并提供指向示例存储库的链接。希望这会让它更清楚。
猜你喜欢
  • 1970-01-01
  • 2018-06-05
  • 2022-06-14
  • 2020-05-25
  • 1970-01-01
  • 2019-07-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode