静的サイトホスティングサービス Netlify が 巷で良い感じという評判をちらほら聞いていたので、実際に触ってみようと思い、ロクに説明を見ずに試したら確かにデプロイまで２０分ぐらいでできたので、その所感を書いておこうと思います。
Netlifyとは
公式の内容そのままですがサービス概要はざっくり以下のような感じです。
- GithubなどのGitホスティングサービスと連携して、ちょっと設定するだけでデプロイまで一気に行ってくれる
- Node(VueとかReactとか), Ruby, Pythonで生成される静的サイトが対応している
- HTTPS, 独自ドメインも対応可能
- サーバサイドの振る舞いは Functions (実態はLambda?) で記述可能
実際にデプロイまでやってみた例
今回は vue-cli で 作ったプロジェクトが Netlify上でデプロイされるまでのテストを行ってみました。 すでに vue-cli や vueを動かすための環境や、 githubは設定済みの状態からはじめました。
以下行なった内容とざっくり所要時間です。
- サインアップ、githubアカウントとの連携 (3分)
vue createでテストアプリケーションの作成(1分)vue createで生成されたファイルをおもむろにgit push(1分)
ここまでやった後にサイトを覗くと以下のように、確かにそのままpushしたものが何やらデプロイされているようです。
しかしこのままデプロイされたURLにアクセスしてもまだ表示されず、どうやらうまくビルドできていないようです。
- まだロクにマニュアルを見ずにとりあえず setting画面を適当に試行錯誤する (10分)
- settingの Build & Deploy の Build command と Public Direcotryを 以下のように設定(3分)
- デプロイ後の動作確認(2分)
と、上記のように本当に触りはじめてから 20分ぐらいで完了しました。サンプルをアップロードしただけなので使い込んでいるわけではないのですが、この予想以上にサクッとデプロイできる感はすごく良い感じがします。
(herokuを試した時はheroku用の設定ファイルなどで苦戦してなかなかデプロイできなかった記憶があります)
他の静的ファイルホスティング手法との比較
今まで簡単なHTML, JSのみで動く静的ファイルを公開するようなことはたまにあったのですが、 その時はAWS S3 か Githubを使っていました。これはこれで簡単だったのですが、以下のような欠点がありました。
- balelや webpackを使用したかったり、ES6以降を使いたい場合、 pushしてから ビルドするような仕組みの準備が追加で必要。今まではCircle CI でビルドして、s3にsync する、といったことをやっておりました。
- HTTPS化や 独自ドメインの設定が追加で必要。 AWSなら CloudFrontと Route 53を使えば設定は可能ですが、簡単な静的サイトを簡単に置きたい時は若干面倒に感じることがありました。
上記の課題を Netlifyは解決してくれそうです。 またサーバサイドの動作 をちょっとだけ付け加えたい場合、 AWSだと Lambdaと API Gatewayの設定が必要ですが、 Netlifyだと Functions で簡単にできるようです(未検証ですが)
とりあえずサクッと使えそうで良かったという感触ですが、もう少し使い込む機会があれば また所感をまとめられればと思います。
