Blog

Seiji Akatsuka

ShifterでWebhookによる外部デプロイが可能になりました!

ShifterはWordPressによるサイトの作成からスタティックサイトのジェネレート、SSLとグローバルCDNによるセキュアな高速配信が可能なオールインワンプラットフォームですが、時にNetlifyやAmazon S3など外部のウェブサイトホスティングサービスを利用する必要がある場合、ジェネレート済みの静的サイトをダッシュボードからダウンロードしてGitリポジトリにコミットし直すなど非常に面倒な手間が必要でした。

これらの手間を取り除き、Shifterから外部のホスティング環境への継続的なデプロイを可能にするために、Webhook機能をリリースしました。
この機能はビジネスプラン以上のプランでご利用いただけます。
無料トライアルの機能には含まれませんが、Shifterの基本機能を気に入っていただけたらぜひアップグレードしてご利用ください。
https://www.getshifter.io/

概要

外部のウェブサイトホスティングサービスのBuild hook URLをShifter側に設定すると、Shifterのジェネレートが完了したタイミングで外部のホスティングサービス側がGit上のデプロイスクリプトを介してShifter上の静的サイトをPullします。
Webhookの仕様はこちらのドキュメントをご参照ください。

Shifter Webhooks
https://support.getshifter.io/webhooks

デプロイスクリプト for Netlify

今回追加したWebhook用のデプロイスクリプトは最も要望の多かったNetlifyへのデプロイバージョンになります。
Netlifyを活用すれば、他のスタティックサイト ジェネレーターでデプロイしたサイトを含めたスタティックサイト の統合的な管理や、無料のカスタムドメイン機能、パスワードでのアクセスコントロールも可能です。
今後他のホスティング環境用のスクリプトも増やしていく予定ですが、ご自身でもリポジトリをフォークしてカスタマイズしていただけますので、ぜひお試しください。
https://github.com/getshifter/webhook-artifact-created

NetlifyへのWebhookデプロイ

それではNetlifyへのデプロイを試してみましょう。

事前準備Shifterのリポジトリを自分の環境にクローン


https://github.com/getshifter/webhook-artifact-created
Netlifyではクローン先はGitHub, GitLab, Bitbucketの中から好きなものを選択できます。

Netlifyにデプロイ設定を行う


Build settingsでクローンしたShifterのリポジトリを指定します。

NetlifyのIncoming webhook URLを取得する


Build hooksの項目で「Add build hook」をクリックしてURLを取得します。

NetlifyのIncoming webhook URLをShifterのWebhookに追加する


ShifterダッシュボードのSITES > WEBHOOKSタブ
Add new webhookの項目にNetlifyで取得したURLを設定します。
今回はMethod欄はPostのままにします。

Netlifyにデプロイ

デプロイの流れは以下です。

1 ShifterダッシュボードでWordPressを起動してサイトを編集

2 ShifterダッシュボードでWordPressで作ったサイトをジェネレート

3 Netlify側でデプロイされたか確認

無事デプロイされました

通知の設定


Slackなどへの通知が欲しい場合はNetlify側のDeploy notificationsで設定できます。
ShifterではWebhookではなく外部への通知機能として機能拡張を検討中です。

この機能が、Shifter上のスタティックサイト ジェネレーターと外部の様々なモダンなホスティング環境との新しい可能性を広げ、私たちWordPressユーザーがより簡単にJAMstackライクなサイトが構築できるよう貢献できると嬉しいです。

Shiftupでデモします!

この機能のデモを含む発表を4/3日のイベントでも行いますので、ご興味ある方はぜひお気軽にお越しください。

4/3 (水) 開催 Shiftup! JP_Getshifter Vol3!はじめてのスタティックサイトジェネレーター
https://eventregist.com/e/xiza3ieCWYFc

それでは!

Share on facebook
Share on twitter