Netlify活用法

Netlifyのセットアップ

Netlifyへコンテンツをホストすると、GitHub Pagesなどの付帯サービスに比べていくつかの利点があります。

• 表示スピードの改善
• データベース統合機能
• 認証設計

公式のリファレンスを読みながら、正しく設定しましょう。

Ref.:

• Build configuration overview | Netlify Docs
• File-based configuration | Netlify Docs

ドメイン設定

1. 支払い方法を追加 サイトに支払い方法を追加するには、Netlify ダッシュボードの「請求と使用状況」セクションに移動し、支払い情報を追加するための指示に従います。

2. カスタムドメインを登録 サイトのカスタムドメインを登録するには、Netlify ダッシュボードの「ドメイン設定」セクションに移動し、“カスタムドメインを追加” ボタンをクリックします。指示に従ってカスタムドメインを登録および設定します。

3. DNS 検証 カスタムドメインのDNS検証を行うには、「ドメイン設定」セクションで追加したカスタムドメインを選択し、提供された指示に従ってDNS検証プロセスを完了します。

フォーム設定

1. フォームの作成: 必要なフォーム要素を設計し、ウェブページに組み込みます。

2. テストとデバッグ: フォームをテストし、エラーがあれば特定して修正します。

3. 有効化: Netlify サイト管理画面から、有効化します。Forms> Enable form detection。

既にデプロイ済の場合、フォーム検出を有効にした後、変更を反映させるためにサイトを再デプロイする必要があることに注意してください。

Ref.:

• Forms setup | Netlify Docs

デプロイ

Netlifyでのデプロイは、Gitリポジトリとの連携やドラッグ＆ドロップによる手動デプロイなど、複数の方法が選べます。ここではGitHubと連携した場合の流れを解説します。

Ref.:

• Create deploys | Netlify Docs

1. Netlify ダッシュボードでのデプロイ設定

1. Netlifyにログインし、ダッシュボードにアクセスします。
2. New site from Git ボタンをクリックし、GitHubやGitLabリポジトリを選択します。
3. デプロイするブランチとビルド設定を指定します。
4. Netlifyは自動でnpm installやnpm run buildなどのビルドコマンドを実行し、サイトを公開します。

2. netlify.tomlの利用

netlify.tomlを作成することで、あらかじめNetlifyのデプロイやビルド設定を詳細にカスタマイズできます。

[build]
  publish = "public"
  command = "hugo --gc --minify  --source exampleSite --themesDir ../../ -t repo --cleanDestinationDir --baseURL $HUGO_BASE_URL"
 
[context.production.environment]
  HUGO_VERSION = "0.118.2"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"
  HUGO_BASE_URL = "https://awesome-identity.netlify.com"
 
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture --source exampleSite --themesDir ../../ -t repo --baseURL $DEPLOY_PRIME_URL"
 
[context.deploy-preview.environment]
  HUGO_VERSION = "0.118.2"
 
[context.branch-deploy]
command = "hugo --gc --minify --source exampleSite --themesDir ../../ -t repo --baseURL $DEPLOY_PRIME_URL"
 
[context.branch-deploy.environment]
HUGO_VERSION = "0.118.2"
 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 301

特定のプロジェクトと Hugo 設定に一致するように netlify.toml ファイルをカスタマイズしてください。 この構成ファイルは、Netlify がサイトを構築および展開する方法を制御します。

ビルド・デプロイの自動化

ここでは、Actions workflowとHookを設定します。

1. Netlifyの Build & Deploy > Build hooks セクションから、Build Hook URLを取得します。
2. GitHubリポジトリのシークレットにNETLIFY_BUILD_HOOK_URLとしてURLを登録します。
3. GitHub Actionsで以下のように構成し、Build Hookを呼び出します。

.github/workflows/netlify.yaml:

name: Trigger Netlify Build
on:
  workflow_dispatch:
  schedule:
    # Run at 0815 daily
    - cron: '15 8 * * *'
jobs:
  build:
    name: Request Netlify Webhook
    runs-on: ubuntu-latest
    steps:
      - name: Curl request
        run: curl -X POST -d {} ${{ secrets.NETLIFY_BUILD_HOOK_URL }}

contextセクションで、特定のビルド環境に応じたコマンドや設定を指定することができます。これにより、例えばプレビュー環境用のビルド設定を区別して適用することが可能です。

認証とセキュリティ

Netlifyでは、ユーザー認証やアクセス制御も簡単に設定できます。サードパーティの認証サービス（OAuth 2.0、Netlify Identityなど）を使ってユーザー管理が可能です。また、外部の認証プロバイダーと統合し、SAML シングルサインオン (SSO) を使用することも可能です。これは組織レベルでのアクセス制御に役立ち、管理が一元化されます

認証の手法

• Netlify Identity：Netlify自身の認証サービスで、ユーザー登録、ログイン、パスワードリセット機能を提供します。これは、Git Gateway を介して Git プロバイダー（GitHub, GitLab, Bitbucket）と連携して動作し、編集者がコンテンツにアクセスして変更を加えるための安全な方法を提供します。
• サードパーティとの統合：Google、GitHubなどを使ったOAuth 2.0ベースの認証もサポート。

Ref.:

• Authenticate users with Netlify Identity | Netlify Docs

セキュリティの強化

Netlify では、以下のようなセキュリティ対策が標準で組み込まれています：

1. HTTPS 暗号化: 自動的に Let’s Encrypt を使用して SSL/TLS 証明書が発行され、HTTPS 接続がデフォルトで有効化されます。
2. DDoS 攻撃対策: トラフィックの異常なパターンを監視し、悪意のあるトラフィックをブロックすることで、サービスの安定を確保します。
3. コンプライアンス: SOC 2 Type 2 や ISO 27001 の認証を取得しており、GDPR、CCPA、PCI-DSS にも準拠しています。

また、Netlify では、Snyk や Very Good Security などのセキュリティツールとの統合を提供しており、これにより依存関係のセキュリティスキャンや個人データの暗号化が可能です。

Netlifyは、全ページにわたって自動SSL証明書（Let’s Encrypt）を提供しており、サイトのセキュリティを強化します。さらに、CI/CDパイプラインでのビルド時にもセキュリティチェックを適用できます。

Ref.:

• Very Good Security | Netlify Integrations

Decap CMS

Netlify CMS (formerly, Netlify CMS)は、簡単にサイトのコンテンツを管理できるオープンソースのヘッドレス CMS です。Git に基づいた CMS で、GitHub や GitLab にコンテンツが直接保存されます。CMS の設定には、Git Gateway を通じて認証を設定することで、コンテンツ編集者が Git リポジトリに安全にアクセスできるようにします。また、Netlify Identity を使用して、簡単なログインとユーザー管理もサポートされています​。

Ref.:

• Netlify CMS v1

設定方法

1. adminディレクトリにindex.htmlとconfig.ymlファイルを作成します。
2. config.ymlでCMSの設定を行い、Gitリポジトリと連携します。

backend:
  name: git-gateway
  branch: master
 
media_folder: "static/images/uploads"
public_folder: "/images/uploads"
 
collections:
  - name: "blog"
    label: "Blog Posts"
    folder: "_posts"
    create: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

サイトのビルドとデプロイの設定は netlify.toml ファイルで行います。

./netlify.toml ：

[build]
  publish = "public"
  command = "hugo --gc --minify  --source exampleSite --themesDir ../../ -t repo --cleanDestinationDir --baseURL $HUGO_BASE_URL"
 
[context.production.environment]
  HUGO_VERSION = "0.118.2"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"
  HUGO_BASE_URL = "https://awesome-identity.netlify.com"
 
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture --source exampleSite --themesDir ../../ -t repo --baseURL $DEPLOY_PRIME_URL"
 
[context.deploy-preview.environment]
  HUGO_VERSION = "0.118.2"
 
[context.branch-deploy]
command = "hugo --gc --minify --source exampleSite --themesDir ../../ -t repo --baseURL $DEPLOY_PRIME_URL"
 
[context.branch-deploy.environment]
HUGO_VERSION = "0.118.2"
 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 301

特定のプロジェクトと Hugo 設定に一致するように netlify.toml ファイルをカスタマイズしてください。 この構成ファイルは、Netlify がサイトを構築および展開する方法を制御します。

Netlify Function

Netlify Functions を使用すると、サーバーレスの関数を簡単に実装できます。AWS Lambda を基盤としたこの機能を活用することで、動的な API やバックエンドロジックを提供することが可能です。関数は netlify/functions/ ディレクトリに配置し、自動でデプロイされます。また、Netlify Edge Functions を使うことで、より低レイテンシーなエッジでの実行もサポートされています。

1. netlify/functionsディレクトリを作成し、hello.jsファイルを追加します。
2. hello.jsの中で以下のようにサーバーレス関数を記述します。

exports.handler = async function(event, context) {
  return {
    statusCode: 200,
    body: "Hello, World!"
  };
};

3. netlify deploy --functions=netlify/functionsコマンドを使ってデプロイします。

組織管理

Netlify は、組織管理機能を通じてチームやユーザーの管理が効率化されています。特に、SAML SSO や Directory Sync を利用することで、大規模なチームでもユーザーの自動プロビジョニングやアクセス管理が一元化されます。さらに、2要素認証 (2FA) を有効化することで、アカウントのセキュリティを強化することができます。組織レベルでの監査ログもサポートしており、全てのメンバーのアクションを追跡できます。

NOTE

Netlify Free plan では 公開リポジトリのみ連携可能。

Netlify CLIの活用

Netlify CLIを使うことで、ローカルから簡単にビルドやデプロイが可能です。また、プロジェクト管理やビルドプロセスのテストも行えます。

# CLIのインストール
npm install netlify-cli -g
 
# ログイン
netlify login
 
# プロジェクト初期化
netlify init
 
# ビルドのテスト
netlify build --dry
netlify build --context deploy-preview
 
# 手動デプロイ
netlify deploy --dir=_site --functions=functions
netlify deploy --prod

CLIを利用することで、CI/CDパイプラインの外でも迅速なデプロイが可能です。