こんなときに
- Githubを使っている
- Netlifyでホスティングをしている。したい。
- 開発中の状態をスマホでプレビューしたり、人に見せたい。けど公開状態にはしたくない。
手順
- Githubと連携したリポジトリを用意する
- Netlifyと接続する
- 開発用ブランチを切って作業を進めて、そのブランチをpush
- Githubを開いてプルリク
- プルリクの画面でnetlifyが反応する。
1. Githubと連携したリポジトリを用意する
githubと連携できれば中身はなんでも。もちろんフロント系の何か。
2. Netlifyと接続する
ホスティングサービス。いろいろできる、そしてオシャレなUI。
Netlify: All-in-one platform for automating modern web projects.
Githubアカウントで登録できる。
Githubと連携して、そのmasterブランチをpushがあるたび自動でビルドして公開することができる。
netlify側にビルドのコマンドを任せることもできる。だからvueとかreactとかも載せられる。しゅごい。
とりあえずnetlifyでサイトをデプロイできたら、準備完了。
3. 開発用ブランチを切って作業を進めて、push
ひとまず公開状態になっているmasterではなく、開発用にブランチを切って作業をする。そしてそのブランチをpush。
git checkout -b dev
git commit -a -m "message"
git push -u origin dev
4. Githubを開いてプルリク
以下のように、デフォでmasterの画面に出ていることもある。
画面通りにプルリクを出す。
（自分で自分にプルリクって出せるんだね…）
5. プルリクの画面でnetlifyが反応する。
netlifyと連携していると、何やらいろいろチェックしてくれるっぽい。（何チェックしてるのかは不明
一番下の、deploy-previewの横のdetailsを開く。
なんとmasterに公開する前のプレビューが、「deploy-preview…」というURLでデプロイされている。
https://deploy-preview-1--netlify-sample01.netlify.com/
特にこっちで設定する必要なく自動でデプロイしてくれてた。しゅごい。
このリンクは、マージしても有効だった。（いつまで有効なのか謎…
参考
Netlify + GitHub + VueJSのPWAでdeploy previewをやってみた – Takeshi Amano – Medium