Netlifyフォームとエッジを使用してAngularフォームを構築およびデプロイする

アプリのフロントエンド、バックエンド、およびデプロイメントワークフローの作成には、多くの作業が必要です。 アプリがユーザーから送信されたデータの量が限られている場合、バックエンド全体を構築することは時間と労力の価値がないように思われるかもしれません。 完全なバックエンドを開発する代わりに、Netlifyフォームを使用することもできます。 このチュートリアルでは、NetlifyフォームでAngularリアクティブフォームを使用する方法について説明します。 NetlifyフォームはNetlifyにデプロイされた場合にのみ機能するため、アプリをNetlifyEdgeにデプロイする方法についても説明します。

ツールキット

Angularリアクティブフォームは、ReactiveFormsModuleプロバイダーを使用してコンポーネントクラス内で明示的に作成された構造化データモデルを持つフォームです。 フォームビュー内の入力要素ごとにフォームモデルが作成されます。 このフォームモデルはFormControlクラスのインスタンスであり、フォーム要素の値を追跡します。 モデルに変更が加えられるたびに、FormControlインスタンスは古いモデルを更新する代わりに新しいデータモデルを返すため、フォームモデルは不変です。 その不変性により、変更の検出がより効率的になり、監視可能な演算子を使用してデータを変更できます。 フォーム入力要素はフォームモデルに直接接続されているため、それらの間の更新は同期的であり、UIレンダリングに依存しません。

Netlifyは、さまざまなテクノロジーで構築されたサイトを構築、展開、およびホストできるようにするプラットフォームです。 Angularで構築されたサイトはNetlifyでホストできます。 Netlifyはさらに、これらのサイトのビルドと展開を簡素化、自動化、および強化するツールのホストを提供します。 このチュートリアルでは、NetlifyEdgeとNetlifyFormsの2つの製品を使用します。

前述のように、Netlifyフォームは、HTMLフォームからの送信を自動的に受け取るフォーム処理機能です。 APIやスクリプトの作成など、送信処理の構成は必要ありません。この機能は、Netlifyにデプロイされたサイトのフォームでのみ機能します。 デフォルトで有効になっているため、フォーム送信の設定に必要な構成がさらに削減されます。 送信処理は、サイトのHTMLファイルがNetlifyのビルドボットによって解析される展開中に設定されます。

Netlify Edgeは、サイトとアプリケーションが公開されているグローバルなアプリケーション配信ネットワークです。 A / Bテスト、ロールバック、ステージング、段階的ロールアウトなどの機能を提供します。 Netlify Edgeでのすべてのデプロイはアトミックです。つまり、サイトは、すべてのファイルがアップロード/更新され、サイトへの変更の準備ができた場合にのみ稼働します。 サイトがデプロイされると、本番環境にデプロイされるときにnetlify.appのサブドメインが割り当てられます。 Netlify Edgeは、プレビューとブランチのデプロイ（ステージング、開発など）もサポートしています。

ビルドボットがデプロイ中にサイト上のHTMLフォームを解析するため、Netlifyフォームの送信処理が機能します。 コンパイルされたAngularサイトのようなクライアント側のJavascriptレンダリングされたフォームは、これらのボットでは見つかりません。 そのため、Netlifyフォームの通常の設定はAngularフォームでは機能しません。

ただし、これには回避策があります。 送信を受信するために、非表示のプレーンHTMLフォームがindex.htmlファイルに追加されます。 このフォームはビルドボットで機能します。 Angularフォームを送信すると、この非表示のフォームにPOSTリクエストが送信され、Netlifyフォームによってキャプチャされます。

この記事では、リアクティブフォームを作成します。 また、非表示のHTMLフォームにPOSTリクエストを送信するサービスも開発します。 最後に、アプリをNetlifyEdgeにデプロイします。

例

アプリの作成方法を説明するために、多くのWebサイトで一般的なフィードバックフォームの例を取り上げます。 このフォームを使用して、サイトのユーザーからのコメント/苦情、質問、提案を、名前と電子メールとともに収集します。 また、サイトの評価を収集するためにも使用します。

要件

このチュートリアルに従うには、NetlifyアカウントとAngularCLIがインストールされている必要があります。 CLIがない場合は、npmを使用してインストールできます。

 npm install -g @angular/cli

Netlifyアカウントにまだサインアップしていない場合は、ここでアカウントを作成できます。 Netlifyは、Github、Gitlab、Bitbucket、またはEメールを介してサインアップを提供します。 選択した展開方法によっては、他の要件になる場合があります。 それらは、各展開方法の下に記載されます。

アプリの設定

まず、アプリを作成してfeedbackと呼びます。 作成するときに、プロンプトで要求されたらルーティングを追加します。

 ng new feedback

次に、フィードバックフォーム、正常な送信メッセージページ、および404ページの3つのコンポーネントを生成します。 Netlifyフォームを使用すると、フォームエントリの送信が成功するとページに移動できます。 これがSuccessComponentを使用する目的です。

 ng gc feedback ng gc success ng gc page-not-found

コンポーネントを生成した後、 app-routing.module.tsファイル内のAppRoutingModuleの各ページへのルートを追加します。

 const routes: Routes = [ { path:'', component: FeedbackComponent }, { path: 'success', component: SuccessComponent }, { path: '**', component: PageNotFoundComponent } ];

FormBuilderサービスを使用してリアクティブフォームを作成します。 これは、基本的なフォームコントロールを使用するよりも便利で、繰り返しが少ないためです。 アクセスするには、 app.module.tsファイルにReactiveFormsModuleを登録する必要があります。

非表示のHTMLフォームにPOSTリクエストを行うため、 HttpClientModuleも登録する必要があります。

 import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // other imports ReactiveFormsModule, HttpClientModule ] }) export class AppModule { }

app.component.htmlの内容を変更して、ルーターアウトレットのみを使用します。

 <router-outlet></router-outlet>

異なるページはいくつかのスタイルを共有します。 したがって、以下のスタイルをstyles.cssに追加します。

 html, body { height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } h1 { margin: 0; text-align: center; } h1, p, label { font-family: Arial, Helvetica, sans-serif; } p { max-width: 25rem; } #container { border: none; padding: .4rem; border-radius: 0; flex-direction: column; display: flex; } hr { width: 80%; } button { color: white; background-color: black; font-size: large; padding: .5rem; border-radius: .5rem; margin-top: 1rem; } @media screen and (min-height: 700px) { html, body { align-items: center; justify-content: center; } } @media screen and (min-width: 480px) { #container { border: .1rem solid lightgray; padding: 2rem; border-radius: .5rem; } html, body { align-items: center; justify-content: center; } }

リアクティブフォームを作成する

FeedbackComponentクラスでは、フォームの作成に使用するFormBuilderサービスをインポートすることから始めます。 また、フォーム入力の検証のためにValidatorsクラスをインポートします。

 import { FormBuilder, Validators } from '@angular/forms';

次に、 FormBuilderサービスをFeedbackComponentコンストラクターに追加して挿入します。

 constructor(private fb: FormBuilder) { }

次に、注入されたFormBuilderサービスのgroupメソッドを使用してフォームモデルを定義します。 また、フォーム入力を送信するときに発生する可能性のあるエラーを保持するために、 errorMsgプロパティを追加します。 フォームに表示されるエラーアラートを閉じるcloseErrorメソッドも含まれています。

フォームモデルの各コントロールは、 Validatorsクラスのバリデーターを使用して検証されます。 入力のいずれかが検証に失敗した場合、フォームは無効になり、送信は無効になります。 emailコントロールの場合のように、フォームコントロールに複数のバリデーターを追加することを選択できます。

 export class FeedbackComponent { feedbackForm = this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.email, Validators.required]], type: ['', Validators.required], description: ['', Validators.required], rating: [0, Validators.min(1)] }); errorMsg = ''; closeError() { this.errorMsg = ''; } // ... }

コンポーネントのテンプレート（ feedback.component.html ）に、これを追加します。

 <div> <div class="error" [class.hidden]="errorMsg.length == 0"> <p>{{errorMsg}}</p> <span (click)="closeError()" class="close">︎</span> </div> <h1>Feedback Form</h1> <hr> <p>We'd like your feedback to improve our website.</p> <form [formGroup]="feedbackForm" name="feedbackForm" (ngSubmit)="onSubmit()"> <div> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="suggestion"> <label for="suggestion">Suggestion</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="comment"> <label for="comment">Comment</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="question"> <label for="question">Question</label><br> </p> </div> <div class="inputContainer"> <label>Description:</label> <textarea rows="6" formControlName="description"></textarea> </div> <div class="inputContainer"> <div> <label>How would you rate our site?</label> <label>{{feedbackForm.value?.rating}}</label> </div> <input formControlName="rating" type="range" name="rating" max="5"> </div> <div class="inputContainer"> <label>Name:</label> <div class="nameInput"> <input formControlName="firstName" type="text" name="firstName" placeholder="First"> <input formControlName="lastName" type="text" name="lastName" placeholder="Last"> </div> </div> <div class="inputContainer"> <label>Email:</label> <input formControlName="email" type="email" name="email"> </div> <div class="inputContainer"> <button type="submit" [disabled]="feedbackForm.invalid">Submit Feedback</button> </div> </form> </div>

form要素には、作成したモデルに対応する[formGroup]="feedbackForm"属性が必要であることに注意してください。 また、各入力要素には、モデル内の対応するフォームコントロールに対応するformControlName=""属性が必要です。

フォームのスタイルを設定するには、これをfeedback.component.cssに追加します。

 #options { display: flex; flex-direction: column; } #options label { margin: 0 0 0 .2rem; } .radioOption { margin: 0 0 .2rem 0; } .inputContainer { display: flex; flex-direction: column; margin: .5rem 0 .5rem 0; } label { margin: .5rem 0 .5rem 0; } .nameInput { display: flex; flex-direction: column; } button:disabled { cursor: not-allowed; pointer-events: all; background-color: slategrey; } #ratingLabel { display: flex; justify-content: space-between; margin: .5rem 0 .5rem 0; } #ratingValue { font-weight: bolder; font-size: large; border: .1rem solid lightgray; padding: .4rem .6rem .1rem .6rem; margin: 0; vertical-align: middle; border-radius: .3rem; } .error { color: darkred; background-color: lightsalmon; border: .1rem solid crimson; border-radius: .3rem; padding: .5rem; text-align: center; margin: 0 0 1rem 0; display: flex; width: inherit; } .error p { margin: 0; flex-grow: 1; } textarea, input { margin: .1rem; font-family: Arial, Helvetica, sans-serif; padding: 5px; font-size: medium; font-weight: lighter; } .close { cursor: default; } .hidden { display: none; } @media screen and (min-width: 480px) { #options { flex-direction: row; justify-content: space-around; } .nameInput { flex-direction: row; justify-content: space-between; } }

フォームは次のようになります。

隠しHTMLフォームの追加

前述のように、Netlifyフォームビルドボットが解析できる非表示のHTMLフォームを追加する必要があります。 その後、提出物はリアクティブフォームから非表示のHTMLフォームに送信されます。 HTMLフォームはindex.htmlファイルに入れられます。

このフォームは、リアクティブフォームと同じ名前にする必要があります。 さらに、 netlify 、 netlify-honeypot honeypot、 hiddenの3つの属性が含まれている必要があります。 ボットは、Netlifyがそれらからの入力を処理できるように、 netlify属性を持つフォームを探します。 netlify-honeypot属性は、送信が行われたときにキャプチャが表示されないようにするために追加され、追加のスパム保護を有効にします。

 <!doctype html> <html lang="en"> <!-- Head --> <body> <form name="feedbackForm" netlify netlify-honeypot="bot-field" hidden> <input type="text" name="firstName"/> <input type="text" name="lastName"/> <input type="text" name="email"/> <input type="text" name="feedbackType"/> <input type="text" name="description"/> <input type="text" name="rating"/> </form> <app-root></app-root> </body> </html>

file入力要素の値を設定できないため、この方法を使用してファイルをアップロードすることはできないことに注意してください。

隠しフォームへのPOSTリクエストの作成

リアクティブフォームからHTMLフォームに送信を送信するには、 index.htmlへの送信を含むPOSTリクエストを作成します。 操作は、 FeedbackComponentのonSubmitメソッドで実行されます。

ただし、その前に、 FeedbackインターフェイスとNetlifyFormsServiceの2つを作成する必要があります。 インターフェイスから始めましょう。

 touch src/app/feedback/feedback.ts

このファイルの内容は次のとおりです。

 export interface Feedback { firstName: string; lastName: string; email: string; type: string; description: string; rating: number; }

NetlifyFormsServiceには、フィードバックエントリを送信するためのパブリックメソッド、汎用エントリを送信するためのプライベートメソッド、およびエラーを処理するための別のプライベートメソッドが含まれます。 追加のフォームに他のパブリックメソッドを追加できます。

それを生成するには、以下を実行します。

 ng gs netlify-forms/netlify-forms

データをフォームに投稿すると、Netlifyは成功アラートを含むHTMLページを送信するため、 submitEntryメソッドはObservable<string>を返します。 これはサービスです：

 import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } }

フォームの送信をHttpParamsとして送信します。 ContentTypeのヘッダーは、値application/x-www-form-urlencodedに含める必要があります。 成功した場合、非表示のフォームに投稿すると、Netlifyからの一般的な成功メッセージを含むHTMLページが返されるため、 responseTypeオプションはtextとして指定されます。 このオプションを含めないと、応答がJSONとして解析されるため、エラーが発生します。 以下は、一般的なNetlify成功メッセージのスクリーンショットです。

FeedbackComponentクラスでは、 NetlifyFormsServiceとRouterをインポートします。 NetlifyFormsService.submitEntryメソッドを使用してフォームエントリを送信します。 送信が成功すると、成功した送信ページにリダイレクトされ、フォームがリセットされます。 リダイレクトにはRouterサービスを使用します。 失敗した場合、 errorMsgプロパティにエラーメッセージが割り当てられ、フォームに表示されます。

 import { Router } from '@angular/router'; import { NetlifyFormsService } from '../netlify-forms/netlify-forms.service';

その後、コンストラクターにNetlifyFormsServiceとRouterの両方を挿入します。

 constructor( private fb: FormBuilder, private router: Router, private netlifyForms: NetlifyFormsService ) {}

最後に、 FeedbackComponent.onSubmitのNetlifyFormsService.submitEntryメソッドを呼び出します。

 onSubmit() { this.netlifyForms.submitFeedbackEntry(this.feedbackForm.value).subscribe( () => { this.feedbackForm.reset(); this.router.navigateByUrl('/success'); }, err => { this.errorMsg = err; } ); }

正常な送信ページを作成する

ユーザーが送信を完了すると、Netlifyは前のセクションの最後のスクリーンショットに示されている一般的な成功メッセージを返します。 ただし、独自のカスタム成功メッセージページにリンクすることはできます。 これを行うには、非表示のHTMLフォームにaction属性を追加します。 その値は、カスタム成功ページへの相対パスです。 このパスは/で始まり、ルートサイトからの相対パスである必要があります。

ただし、非表示のHTMLフォームを使用する場合、カスタム成功ページの設定は機能しないようです。 非表示のHTMLフォームへのPOSTリクエストが成功すると、一般的なNetlify成功メッセージがHTMLページとして返されます。 action属性が指定されていてもリダイレクトされません。 したがって、代わりに、 Routerサービスを使用して送信した後、成功メッセージページに移動します。

まず、前に生成したSuccessComponentにコンテンツを追加しましょう。 success.component.htmlに、以下を追加します。

 <div> <h1>Thank you!</h1> <hr> <p>Your feedback submission was successful.</p> <p>Thank you for sharing your thoughts with us!</p> <button routerLink="/">Give More Feedback</button> </div>

ページのスタイルを設定するには、これをsuccess.component.cssに追加します。

 p { margin: .2rem 0 0 0; text-align: center; }

ページは次のようになります。

FeedbackComponentクラスでは、すでにRouterサービスをインポートとして追加し、コンストラクターに注入しました。 onSubmitメソッドでは、リクエストが成功し、フォームがリセットされた後、成功した送信ページ/successに移動します。 これを行うには、ルーターのnavigateByUrlメソッドを使用します。

404ページの作成

404ページは必要ないかもしれませんが、持っていると便利です。 page-not-found.component.htmlの内容は次のようになります。

 <div> <h1>Page Not Found!</h1> <hr> <p>Sorry! The page does not exist.</p> <button routerLink="/">Go to Home</button> </div>

スタイルを設定するには、これをpage-not-found.component.cssに追加します。

 p { text-align: center; }

これは404ページがどのように見えるかです。

展開前にルーティングを修正する

Routerサービスを使用しているため、すべてのルーティングはクライアントで行われます。 アプリのページへのリンクがアドレスバーに貼り付けられている場合（ディープリンク）、またはページが更新されている場合、そのリクエストはサーバーに送信されます。 アプリのフロントエンドで構成されているため、サーバーにはルートが含まれていません。 これらのインスタンスでは、404ステータスを受け取ります。

これを修正するには、すべてのリクエストをindex.htmlページにリダイレクトするようにNetlifyサーバーに指示する必要があります。 このようにして、Angularルーターはそれらを処理できます。 興味があれば、この現象の詳細をこことここで読むことができます。

まず、 srcフォルダーに_redirectsファイルを作成します。 _redirectsファイルは、Netlifyサイトのリダイレクトおよび書き換えルールを指定するプレーンテキストファイルです。 サイト公開サイトディレクトリ（ dist/<app_name> ）に存在する必要があります。 これをsrcフォルダーに配置し、 angular.jsonファイルのアセットとして指定します。 アプリがコンパイルされると、 dist/<app_name>に配置されます。

 touch src/_redirects

このファイルには、以下のルールが含まれます。 これは、サーバーへのすべてのリクエストをindex.htmlにリダイレクトする必要があることを示しています。 また、これらのリダイレクトが200ステータスを返す必要があることを示すために、最後にHTTPステータスコードオプションを追加します。 デフォルトでは、 301ステータスが返されます。

 /* /index.html 200

最後に行う必要があるのは、 angular.json er projects > {your_project_name} > architect > options > assetsに以下のオプションを追加することです。 それをassets配列に含めます。

 { "glob": "_redirects", "input": "src", "output": "/" }

アプリをローカルでプレビューする

フィードバックアプリをデプロイする前に、プレビューすることをお勧めします。 これにより、サイトが意図したとおりに機能することを確認できます。 とりわけ、リソースへのパスが壊れているなど、ビルドプロセスに起因する問題を発掘する可能性があります。 まず、アプリを作成する必要があります。 次に、サーバーを使用してコンパイル済みバージョンを提供します。 Webアプリ用の軽量ライブリロードサーバーであるlite-serverを使用します。

注：アプリはまだNetlifyにデプロイされていないため、POSTリクエストを行おうとすると404エラーが発生します。 これは、Netlifyフォームがデプロイされたアプリでのみ機能するためです。 以下のスクリーンショットに示すように、フォームにエラーが表示されますが、展開すると機能します。

1. まず、lite-serverをインストールします。
   

    npm install lite-server --save-dev

2. 次に、アプリのワークスペースディレクトリ内で、アプリをビルドします。 ファイルが変更されるたびにビルドが実行されるようにするには、 --watchフラグを渡します。 アプリがコンパイルされると、結果はdist/<app name>出力ディレクトリに書き込まれます。 バージョン管理システムを使用している場合は、 distフォルダーをチェックインしないでください。これは、生成され、プレビューのみを目的としているためです。
   

    ng build --watch

3. コンパイルされたサイトにサービスを提供するには、ビルド出力ディレクトリに対してlite-serverを実行します。
   

    lite-server --baseDir="dist/<app name>"

サイトは現在localhost:3000で提供されています。 ブラウザで確認し、展開を開始する前に期待どおりに機能することを確認してください。

展開

AngularプロジェクトをNetlifyEdgeにデプロイする方法は複数あります。 ここでは3つを取り上げます。

1. netlify-builderを使用して、
2. GitとNetlifyWeb UIを使用して、
3. NetlifyCLIツールを使用します。

netlify-builderを使用する

netlify-builderは、AngularCLIを介したAngularアプリのデプロイを容易にします。 この方法を使用するには、アプリがAngular CLIv8.3.0以降を使用して作成されている必要があります。

1. Netlifyダッシュボードの[サイト]タブから、新しいプロジェクトを作成します。 Gitを使用してプロジェクトを作成することはないため、空のフォルダーを「サイトフォルダーをここにドラッグアンドドロップ」とマークされた点線の領域にドラッグします。 これにより、ランダムな名前のプロジェクトが自動的に作成されます。 必要に応じて、後でサイトのドメイン設定でこの名前を変更できます。
   

   

   
   これは、プロジェクトが作成された後に表示されるはずです。
   

   

2. この方法を使用してデプロイする前に、アカウントからNetlifyプロジェクトのAPIIDとNetlifyパーソナルアクセストークンを取得する必要があります。 プロジェクトAPIIDは、サイト設定から取得できます。 [サイト設定]> [一般]> [サイトの詳細]> [サイト情報]の下に、プロジェクトのAPIIDが表示されます。
   

   

   

   
   ユーザー設定で個人アクセストークンを取得できます。 [ユーザー設定]> [アプリケーション]> [個人用アクセストークン]で、[新しいアクセストークン]ボタンをクリックします。 プロンプトが表示されたら、トークンの説明を入力し、[トークンの生成]ボタンをクリックします。 トークンをコピーします。 永続性のために、これらの値をプロジェクト内の.envファイルに保存できますが、バージョン管理システムを使用している場合は、このファイルをチェックインしないでください。
   

   

   

   

   

3. 次に、ngaddを使用してnetlify-builderをプロジェクトng addします。
   

    ng add @netlify-builder/deploy

   インストールが完了すると、APIIDと個人用アクセストークンを追加するように求められます。
   

   

   
   これらをここに追加することはオプションです。 バージョン管理システムを使用している場合は通常チェックインされるangular.jsonファイルに追加されるため、このプロンプトは無視してかまいません。 この種の機密情報をコードリポジトリに保存することは安全ではありません。 このファイルをチェックインしていない場合は、APIIDと個人用アクセストークンを入力するだけです。 以下のエントリは、 architect設定の下のangular.jsonファイルで変更されます。
   

    "deploy": { "builder": "@netlify-builder/deploy:deploy", "options": { "outputPath": "dist/<app name>", "netlifyToken": "", "siteId": "" } }

4. あとは、次のコマンドを実行してアプリケーションをデプロイするだけです。
   

    NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy

   または、これをスクリプトに入れて、アプリをデプロイする必要があるときに実行することもできます。
   

    # To create the script touch deploy.sh && echo "NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy" >> deploy.sh && chmod +x deploy.sh # To deploy ./deploy.sh

   これは、このコマンドを実行したときに表示される出力です。
   

   

2.GitとNetlifyWebUIの使用

AngularアプリのコードがGithub、Bitbucket、またはGitlabのいずれかでホストされている場合は、NetlifyのWebUIを使用してプロジェクトをホストできます。

1. Netlifyダッシュボードの[サイト]タブで、[ Gitからの新しいサイト」ボタン。
   

   

2. コードリポジトリサービスに接続します。 アプリコードがホストされているサービスを選択してください。 Netlifyにリポジトリの表示を許可するように求められます。 これはサービスごとに異なります。
   

   

3. コードリポジトリを選択します。
   

   

4. 次に、デプロイメントとビルド設定を指定します。 この場合、デプロイ元のブランチを選択し、buildコマンドをng deploy --prodとして指定し、publishディレクトリをdist/<your app name>として指定します。
   

   

5. [サイトの展開]ボタンをクリックすると、完了です。

3. NetlifyCLIツールの使用

1. 開始するには、次のようにNetlifyCLIツールをインストールします。
   

    npm install netlify-cli -g

   インストールが成功すると、端末に次の結果が表示されます。
   

   

2. 次に、次のコマンドを実行してNetlifyにログインします。
   

    netlify login

   このコマンドを実行すると、ブラウザウィンドウに移動し、NetlifyCLIを承認するように求められます。 [ Authorize ]ボタンをクリックします。 承認が付与されたら、タブを閉じることに進むことができます。

   

   

3. 新しいNetlifyプロジェクトを作成するには、端末で次を実行します。
   

    netlify init

   Angularアプリを既存のNetlifyプロジェクトに接続するか、新しいプロジェクトを作成するように求められます。 [新しいサイトの作成と構成]オプションを選択します。

   

   次に、チームと展開するサイトの名前を選択します。 プロジェクトが作成されると、CLIツールはプロジェクトのサイトの詳細を一覧表示します。
   

   

   その後、CLIツールは、NetlifyアカウントをGitホスティングプロバイダーに接続して、Webhookを構成し、キーをデプロイするように求めるプロンプトを表示します。 これをオプトアウトすることはできません。 ログインするオプションを選択してから、Netlifyを承認します。
   

   

   次に、ビルドコマンドを入力するように求められます。 使用する：
   

    ng build --prod

   その後、展開するディレクトリを指定するように求められます。 アプリの名前とともにdist/<app name>を入力します。
   

   

   その最後に、コマンドはこの出力を完了して表示します。
   

   

4. アプリをデプロイするには、次のコマンドを実行します。
   

    netlify deploy --prod

   --prodフラグを使用すると、ビルドが本番環境に確実にデプロイされます。 このフラグを省略すると、 netlify deployコマンドは、テストとプレビューに使用される一意のドラフトURLにビルドをデプロイします。 展開が完了すると、次の出力が表示されます。
   

   

フォーム送信の表示

フォームの送信は、サイトの[フォーム]タブにあるNetlifyダッシュボードで表示できます。 app.netlify.com/sites/<your_site_name>/formsで見つけることができます。 このページには、アクティブなすべてのフォームが一覧表示されます。 非表示のフォーム要素に入力するname属性は、ダッシュボード上のフォームの名前です。

フォームを選択すると、そのフォームのすべての送信が一覧表示されます。 すべてのエントリをCSVファイルとしてダウンロードするか、スパムとしてマークするか、削除するかを選択できます。

結論

Netlifyフォームを使用すると、バックエンドを作成または構成しなくても、アプリからフォーム送信を収集できます。 これは、連絡先情報、顧客からのフィードバック、イベントの登録など、限られた量のデータのみを収集する必要があるアプリで特に役立ちます。

AngularリアクティブフォームとNetlifyフォームを組み合わせると、データモデルを構造化できます。 Angularリアクティブフォームには、データモデルとフォーム要素を相互に同期させるという追加の利点があります。 UIレンダリングに依存しません。

NetlifyフォームはNetlifyEdgeにデプロイされた場合にのみ機能しますが、ホスティングプラットフォームは非常に堅牢で、A / Bテストなどの便利な機能を提供し、アプリのビルドとデプロイを自動化します。

• このプロジェクトのソースコードを参照してください→

フォームでのNetlifyの使用について詳しくは、こちらをご覧ください。