logo

Notionの更新でNetlifyに自動デプロイする方法

ロードマップ

svg

※notion-blogでsvgはブラウザの拡大をしていけば詳細に見えますが、新しいタブで開くと崩れます。詳細な画像を表示したい場合は一番下↓のリンクからお願いします。


Netlifyのdeploy方法

MAINブランチにマージしたとき

MAINにマージするとNetlifyにデプロイされる。

プレビューを確認したいときはプルリクを投げる

本番環境(deployしたいページ)の確認の仕方です。

 デバックだけならプルリクエスト作成すれば↓のプレビューで確認ができます。

ここのプレビューが使えるので、mainにマージしなくてもdraftのPRで確かめられる。

プルリク出した後に再度変更を加えて確認したい場合も、

同じブランチにプッシュすれば再度プレビューページが作られます。

プレビューのURLは同じなので注意が必要です。

プレビューページの更新のタイミングが少し分かりづらいです。

コマンドプロンプトでPOSTリクエストを送信する

Build hook のURLを生成しておけば、コマンドプロンプトからのPOSTリクエストでNetlifyのデプロイが可能。

コマンドプロンプトで実行 (powersellだと実行できない)

batファイルとかにしておけば良い。

タスクスケジューラとかでbatを自動postするように設定しておく。

curl -X POST -d '{}' {あなたのurl}

[決定版] Slack x Outgoing webhook x GAS で自動デプロイ

Slack x Outgoing webhook x GAS を使用してNotion-blogをNetlifyに自動デプロイします。

すべて無料で出来ます。

notion-blog の データベース編集を自動検知して、 NetlifyにPostコマンドを送ってデプロイするまでを自動化します。

また、URLを踏む(クリック)するだけで、Netlifyにデプロイできるようにします。

こちらを参考に設定をします。

参考:【Slack】OutgoingWebhookを利用して投稿を転送

参考:Incomming Webhook x GAS 使い方

GAS (Google Apps Script) のコードは以下です。

/// auther:u-ecmaker
/// updated: 2023/06/18
/// curlのpostコマンドをGASで発行するプログラム


// Outgoing WebHookから以下が呼ばれます。
function doPost(e) {
  sendPostRequest()
  sendSlack4doPost(e)
  var message = 'doPost()が呼ばれました。Netlifyにデプロイしました。';
  return ContentService.createTextOutput(message);
}


// URLをクリックした場合は以下が呼ばれます。
function doGet() {
  sendPostRequest()
  sendSlack4doGet()
  var message = 'doGet()が呼ばれました。Netlifyにデプロイしました。';
  return ContentService.createTextOutput(message);

  // html形式で表示したい場合は以下にする。
  // let html = '';
  // html += '<h1>Netlifyにデプロイしました。</h1>';
  // html += '<p>doGet()が呼ばれました。</p>';
  // return HtmlService.createHtmlOutput(html);
  // 参考:https://tonari-it.com/gas-url-click-doget/
}


// 指定のURLにPOSTコマンドを発行します。
function sendPostRequest(){
  var url = 'https://api.netlify.com/build_hooks/hoge1';
  var payload = '{}';
  var options = {
    method: 'post',
    contentType: 'application/json',
    payload: payload
  };
  UrlFetchApp.fetch(url, options);
}


// Incomming WebHookでSlackへの通知する関数:doGet(URLクリック)用:引数なし
function sendSlack4doGet(){
  var message = "notion-blog更新URLがクリックされました。\nNetlify の build trigger を叩きました。\nまもなくデプロイされます。";
  var jsonData =
  {
     "username" : "GAS-NetlifyDeployBot",
     "icon_emoji": ":tada:",
     "text" : message
  };
  var payload = JSON.stringify(jsonData);
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };
  //IncomingWebhookで取得したURLを設定
  UrlFetchApp.fetch('https://hooks.slack.com/services/hoge2', options);
}


// Incomming WebHookでSlackへの通知する関数:doPost(OutGoingWebhook)用:引数あり
function sendSlack4doPost(e){
  var message = "\nnotion-blog 自動更新通知\nNetlify の build trigger を叩きました。\nまもなくデプロイされます。";
  var jsonData =
  {
     "username" : "GAS-NetlifyDeployBot",
     "icon_emoji": ":tada:",
     "text" : e.parameter.text+message,
  };
  var payload = JSON.stringify(jsonData);
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };
  //IncomingWebhookで取得したURLを設定
  UrlFetchApp.fetch('https://hooks.slack.com/services/hoge2', options);
}

URLの設定

  • hoge1 には前述のNetlifyの設定ページから生成したbuilt hookのURL。
  • hoge2 にはIncomming Webhook で取得したURL(コードに2箇所あります)。
  • hoge3 (コードにはない:GASでデプロイしたURL) Outgoing Webhookから呼び出します。

Slackの設定

  • Outcgoing Webhook で監視するトリガーのページと、 Incomming Webhook で通知する(optional)通知用のチャンネルは分けます。
  • 分けないで1つのチャンネルに設定すると [トリガー→通知→トリガー…]と無限ループします。

参考:Twitter: Notionの変更をslack通知→Outgoing WebhookでDeploy URLにPOSTする

— 以下は廃案 —

ウェブサービス

参考: NetlifyとHerokuで予約投稿機能を実現する

Chrome 拡張機能を自作する

参考:Notion側からデプロイをアクションするためのブラウザ拡張を自作するアプローチ。

参考:カスタムの Chrome アプリと拡張機能を作成して公開する

できました。


この記事へのコメントや詳細な画像の確認はこちらのnotion公開ページへお願いします。

Twitter