首先

我之前写过一篇名为《尝试Azure Static Web Apps之二【与Azure DevOps的集成】》的文章，讨论了Azure Static Web Apps与DevOps之间的集成。
这一次，我想尝试进行API（Azure Functions）的集成。

前提 tí)

需要预先在Visual Studio Code中安装以下扩展功能。

Azure Functions拡張機能

文件夹结构

静态Web应用程序（免费版）有一个限制，即Angular项目和Functions项目必须在同一个存储库中。因此，最好从一开始就意识到，Angular（前端）和Functions（后端）应进行文件夹分割，否则以后可能会变得非常困难。

创建 Angular 项目

请执行以下命令，在已克隆的根文件夹中创建Angular的模板项目。
(请在git克隆的根文件夹中执行此命令。)

> ng new angular-swa

API调用的实现

首先，我们需要修改app.module.ts以使其能够使用HTTPClient。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';　// <- 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule　// <- 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来，我们将实现一个功能，通过点击按钮可以调用Functions。

app.component.html

<button type="button" (click)="callAPI()"> API実行</button>
<p>結果：{{result}}</p>

app.component.ts

  public result = '';

  constructor(private httpClient: HttpClient) { // コンストラクタでhttpClientをインジェクション
  }

  callAPI() {
    // Azure Functionsを呼出
    this.httpClient.get('/api/GetMessage').subscribe((data: any) => {
      this.result = data.text;
    });
  }

创建Functions项目

• Browserで作成したAPIフォルダを選択

• 言語でJavascriptを選択

• トリガーはHTTP Triggerを選択

• 関数の名前は任意を入力（今回はGetMessage)

認証はAnonymousを選択(認証無し）

Proxy的定义是:

代理是一种网络技术，它允许一个设备（代理服务器）在另一个设备（客户端）和目标服务器之间进行中介，并在其之间传递请求和响应信息。

在Static web apps中，Angular项目和Functions项目在同一服务器上运行。
因此，需要将Angular项目配置为向同一服务器发出请求。
但这在本地环境中并不方便，因此可以使用Angular的代理功能来解决这个问题。

proxy.conf.jsonに以下を設定し、srcフォルダ直下に配置

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

angular.jsonのserveにproxyConfigを追加

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

在本地进行操作确认

在创建的每个文件夹中执行以下命令，以确认其是否正常运作。

Angular

> ng serve

Functions

> func start

从浏览器中访问”http://localhost:4200″，通过点击按钮顺利接收来自Functions的经过代理的响应。

修正 DevOps Pipeline 的 YAML 定义。

我将在之前的YAML文件中添加以下修正。

• npm install 前にリポジトリのAngularプロジェクトのルートフォルダへ移動(これをしないとコマンドNot Foundとなります)

「app_location」にAngularプロジェクトのルートフォルダを指定(angular-swa)
「api_location」にFunctionsプロジェクトのルートフォルダを指定(api)
「output_location」にAngularプロジェクトのBuild後の出力先フォルダを指定(dist/angular-swa)

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli@9.1.15
    cd ./angular-swa
    npm install
    ng build --prod
  displayName: 'npm install and build'

- task: AzureStaticWebApp@0
  inputs:
    app_location: "angular-swa"
    api_location: "api"
    output_location: "dist/angular-swa"
  env:
    azure_static_web_apps_api_token: $(deployment_token)

透過將上述內容提交至存儲庫中，Angular/Functions將自動部署至Static Web Apps並確認其功能。

总结

在此次中，我們成功使用 Azure Static Web Apps/Azure DevOps 開發了一個利用 Angular/Functions 的靜態 Web 應用程式（SPA）。
在接下來的版本中，我們計劃考慮與身份驗證（連結）或外部 Functions 進行合作。