プレビュー環境を構築するのに便利なサービス
さくっとプレビュー環境を用意したい。 DBがいらない静的なサイトをクライアントに見せるのにサーバーの設定とか面倒だし費用もかかる。
そんな悩みを解決してれるNetlifyとngrokを紹介。
Netlify
これはなに
静的サイト向け自動デプロイアプリケーションです。
ローカルで作業して git push したら、自動でプレビュー環境（https）にデプロイされる。 ブランチごとにプレビュー環境をそれぞれ用意することも可能。
DBはデプロイに含まれないのであれば、やりたいことはプレビュー環境としてはこれでほぼカバーできる。
サンプル
独自ドメインを設定 https://yabukarastick.work/
独自ドメインを設定するとブランチ名がサブドメインに指定できる
develop ブランチをデプロイすると develop.yabukarastick.work として公開される
https://develop.yabukarastick.work/
必要な環境
Github GitLab Bitbucket のいずれかのアカウント
公開鍵の設定を行い上記のリポジトリにアクセス（git clone, git push ）できるマシンとスキル
カスタマイズ
かなり柔軟に設定できる。
ここからはユーザー向けのURLになる。
Deploys
Build command
デプロイ時に実行するコマンド
Publish directory
公開するディレクトリ 指定したディレクトリ以外はアクセスできない
Production branch
公開されるブランチ デフォルトはmaster
Branch deploys
ブランチのデプロイ設定 全て、ブランチはデプロイしない、個別設定のいずれかを選択 デフォルトはブランチはデプロイしない
ブランチをデプロイする設定にした際コミットのハッシュ値ごとにURLが生成される。 管理画面上からpublishするとマスターにマージされる。 独自ドメインを設定していない状態ではブランチごとにプレビューはできない。
Domains
ドメインの設定
xxxx.netlify,com の xxxxは自由に変更できる 独自ドメインも設定できる 参考→ NetlifyとGithubで独自ドメインのサイトをHTTPS化したメモ
独自ドメインのSSL化も無料でできる
ngrok
これはなに
ローカル環境を外部へ公開するアプリケーションです。
トークンの登録（最初だけ行う）を行って
ngrok がインストールされたディレクトリで以下のコマンドを叩くとローカル環境が外部に公開される。
$ ./ngrok http 80
バーチャルホストを設定している場合は公開するホスト名を指定してあげます。
$ ./ngrok http -host-header virtual-host.name 80
URLやトークンはランダムな文字列なので管理画面から確認する
トークン https://dashboard.ngrok.com/get-started
URL https://dashboard.ngrok.com/status
必要な環境
コマンドラインツール（Windowsのターミナル Git Bash のターミナル）
コマンドを叩く勇気
カスタマイズ
独自ドメインの設定→有料プラン などできる。
個人的な用途としてはgit push することなくスマホの確認用として使うくらいなので無料で満足している。
その他
以下にもエントリを書いている。
まとめ
めちゃくちゃ便利だ。 これなら15分で環境用意できる。 ありがとうございました。
