NetlifyのSplit TestingとFunctionsの使い方まとめ

Published: 2020年9月15日 by tomsato

Netlifyとは

NetlifyはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス

GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる

ブログのホスティング方法、無料プランについて独自ドメインの設定方法などについては以下の記事で解説している

Netlifyの使い方入門 無料料金枠や独自ドメイン設定方法について

この記事ではSplit TestingとFunctionsの使い方についてまとめる

Split Testing

Split Testingとは

GitHubのブランチをベースにしたA/Bテストを行うための機能のこと

参考 公式ドキュメント:Learn more about Split Testing in the docs

※ 9/15現在BETA版となっている

Split Testingの機能を使うためにはダッシュボードから「Split Testing」タブに遷移する

下記の画像からわかるようにGitHubのブランチが2つ以上ないと使えないことに注意

Netlify split testing画面1

また表示割合を調整することができるのでカナリアリリース的に、新バージョンを段階的にリリースしていくことができる

※ カナリアリリースとはサービスの新機能を全体の5%など一部のユーザーのみに利用できるようにリリースし 新機能に問題がないことを確認しながら10%→25%→50%など段階的に全体に向けて展開していくデプロイ手法のこと

参照ブランチの割り振り方法

利用ユーザーがアクセスする度に同じブランチを参照するように nf_ab というCookieにどのブランチを見ているかを保存している

Netlify split testing画面4

「Value」にブランチ名が書いてあるのかと思いきや数字が書いてあるがきっと数字を元にどのブランチを参照するかを決めているはず

Cookieを見ているため、以下の操作を行うと別のブランチを参照してしまう可能性がある

  • ブラウザや端末(PC,スマホ)を変えてアクセス
  • Chrome等のシークレットブラウザを開き直してアクセス
  • Cookieを削除してアクセス

またCookieの有効期限が1年で設定されているので1年経つと書き換わる可能性がある

注意点

注意点としては複数のA/Bテストを同時に実行することができない

Split Testingの使い方

まずはGitHubでA/Bテスト用のブランチを用意する

今回は「master」ブランチの他に「master-a」「master-b」の2つのブランチを用意する

ブランチを用意することでSplit Testingが設定できるようになる

Netlify split testing画面2

ブランチは2つ以上設定することができ、ブランチ毎に表示の割合を設定することができる

その際に割合の合計値が必ず100%になるように1つのブランチを動かすと他のブランチの数字が勝手に変動してしまうため 数値の右側にあるロックボタンを押すことで数値を固定することができる

「Start test」で反映ができる

Netlify split testing画面3

停止したい場合は「Stop test」を押せばデフォルトのブランチだけ配信する状態になる

ソース側でブランチ名を判定する方法

環境変数 BRANCH でブランチ名を取得することができる

React, Vue.jsを使用して取得する場合

process.env.BRANCH

Google Analyticsに分析情報を送信する

Google Analyticsは、イベントに関連付けることができるディメンションデータをサポートしているため、この機能を使用して分析データを送信することができる

参考:カスタム ディメンションとカスタム指標

NetlifyのSnippet Injection機能を利用するとデプロイ時にJavaScriptスニペットを <head> タグか <body> タグ末尾に挿入することができるため

この機能を使いGoogle Analytics用のスクリプトの設定を行うことができる

参考:Snippet injection

Snippet Injectionはダッシュボードから「Settings」タブの「Build & deploy」→「Post processing」→「Snippet injection」から設定ができる

Netlify Google Analytics設定方法

NetlifyのSnippet Injectionで埋め込むスクリプト内に {{ BRANCH }} を入力しておくとブランチ名に置き換わるため

以下のようなスクリプトを記載することで、設定をすることができる

<!-- install Google Analytics' JS tracker before using this code -->
<!-- https://developers.google.com/analytics/devguides/collection/analyticsjs/ -->
<script>
  ga('send', 'pageview', {
    'Branch':  '{{ BRANCH }}'
  });
</script>

Functions

Functionsとは

FunctionsはNetlifyでAWS Lambdaを使えるようにした機能

AWSのアカウントを用意する必要もなく、またAWS Lambdaの設定をする必要もなく、関数の管理等は全てNetlify内の設定で完結ができる

面倒なサービスディスカバリの管理やAPIゲートウェイの構成などが不要になるとのこと

参考 公式ドキュメント:Learn more about Functions in the docs

現在JavaScript(Node.js)とGoで構築されたサーバレス関数をデプロイすることができる

Netlify Functions画面1

Functionsの使い方

ダッシュボードより「Settings」タブを選択、「Functions」より

Netlify Functions画面2

「Edit settings」をクリックする

Functionsに設定するソースコードを格納するディレクトリを選択する

今回は「./functions」を記載して「Save」にて設定完了する

そして実際にサンプルを用意してみる、公式が用意しているサンプルを利用することとする

Netlify Functions Examples

./functions/hello.js を作成する

$ vim ./functions/hello.js
exports.handler = function(event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
};

そしてこのファイルを実際にGitHubにプッシュを行い、デプロイが終わったことを確認して

https://<自分のサイト>/.netlify/functions/hello にアクセスをすると「Hello, World」が表示される

このように ./functions/hello.js で作成した関数が /.netlify/functions/hello というパスで呼び出すことができるように、配置するファイルパスはURLに使われることになる

上記で記述したサンプルのリンクでは、以下のように色々なサンプルが用意しているのでもう少し拡張したいという人は見てみると吉

  • asyncバージョン
  • GET/POSTパラメータの受け取り方
  • 環境変数の読み込み方
  • APIリクエストを行う方法
  • Slackに投稿する方法

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧