VuePressで構築してる社内ポータルサイトを

GitHubのwebhookから自動ビルドして、

ちょっと幸せになった話

@noliaki / 山田典明

2018.11.9 / #ゆるWeb札幌

VuePressとは？

ざっくり言うと、マークダウンファイルを置いておくだけで、いい感じに静的ページとして吐き出してくれるヤツ

デモ

GitHubのwebhookとは？

GitHubになんらかのイベントがあったら、指定したURLにPOSTリクエストを送ってくれる

どのイベントでPOSTリクエストを送るのか選べる

そもそも
なんでVuePress🤔?

きっかけ

もともとGitHubのwikiで、チーム内のルール、コーディングガイドライン等、マークダウンでドキュメント化していた
最初は良かったが、ページが増えてくると見辛くなってきた
どこのリポジトリにドキュメント化されているのか、わからなくなってきた

欲しいもの

これを見たら大丈夫、というような
一元的に管理できるものが欲しかった
マークダウンでそのまま書きたかった

そこでちょうど

🎊VuePressが登場🎊

マークダウンで書ける!
良い感じで静的webサイトが出来ちゃう
静的webサイトなのに検索まで出来ちゃう
vueも書けちゃう

デプロイは??

最初はbuildして生成された

HTMLをrsyncでサーバーに

アップロードしていた

ツライ😨

ちょっとの変更でもbuildしてrsyncしてってのがツライ
↑ 一つのシェルスクリプト（npm scripts)でまとめたけど、微妙
今までブラウザのみで更新できたのに更新するハードルが上がってしまった

そこで

webhook

masterにpushがあったタイミングでホスティングしてるサーバーでVuePressのbuildを走らせる

サーバー

masterにpush

POSTリクエスト

VuePress

build

git pull

ブラウザ操作のみでデプロイできるようになった
Gitよくわかんないっていうデザイナーでも更新・編集できるようになった
更新頻度が上がった

セキュリティについて

POSTリクエストを受け付けるサーバーは公開状態にしておく必要がある
秘密の合言葉を設定できるがアプリケーション側まではリクエストはどこからでも来てしまう

秘密の合言葉の設定

バリデーション等は↓こちらを参照

https://developer.github.com/webhooks/securing/

これ以外にも、

もうちょっと安全にしたいなーと調べてたら、IPが公開されてた

{
  "verifiable_password_authentication": true,
  "github_services_sha": "2f2313161ed4f940a57ae3f0936eb8e9695bb8a8",
  "hooks": [
    "192.30.252.0/22",
    "185.199.108.0/22",
    "140.82.112.0/20"
  ],
  "git": [
    "192.30.252.0/22",
    "185.199.108.0/22",
    "140.82.112.0/20",
    "13.229.188.59/32",
    "13.250.177.223/32",
    "18.194.104.89/32",
    "18.195.85.27/32",
    "35.159.8.160/32",
    "52.74.223.119/32"
  ],
  "pages": [
    "192.30.252.153/32",
    "192.30.252.154/32",
    "185.199.108.153/32",
    "185.199.109.153/32",
    "185.199.110.153/32",
    "185.199.111.153/32"
  ],
  "importer": [
    "54.87.5.173",
    "54.166.52.62",
    "23.20.92.3"
  ]
}

https://api.github.com/meta

これでFirewallなりミドルウェアなりでリクエストをフィルタ出来る✊

まとめ

面倒くさいこと・ツライ手作業は機械任せにしたほうが幸せだし確実（自動化の主な目的）
最初の環境構築に時間がかかるけど、知見が得られる
関わるメンバー全員が更新できるようにしたほうが、自分ごと化しやすい