Git
GitHub
Netlify

Netlifyを使った開発途中サイトの簡易プレビュー。開発用ブランチを一時公開する方法。


こんなときに


  • Githubを使っている

  • Netlifyでホスティングをしている。したい。

  • 開発中の状態をスマホでプレビューしたり、人に見せたい。けど公開状態にはしたくない。


手順


  1. Githubと連携したリポジトリを用意する

  2. Netlifyと接続する

  3. 開発用ブランチを切って作業を進めて、そのブランチをpush

  4. Githubを開いてプルリク

  5. プルリクの画面で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の画面に出ていることもある。

スクリーンショット 2019-06-13 18.06.57.png

画面通りにプルリクを出す。

(自分で自分にプルリクって出せるんだね…)

スクリーンショット 2019-06-13 18.09.47.png


5. プルリクの画面でnetlifyが反応する。

スクリーンショット 2019-06-13 18.12.23.png

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