最近のVue界隈の記事で気になっていていたNetlifyでのデプロイを試してみました。
Nuxtがv1をリリースしたせいか、Netlifyのビルドでこける
NetlifyのNodeのバージョンが低いためにビルドが失敗してしまいます。
これはNetlifyのNodeのバージョンが上がるまで、どうしても解決できない問題なので回避策を模索しました。
こちらのブログではdistディレクトリをgitのリポジトリに入れてしまうことを実践しています。
しかしdistのディレクトリをリポジトリに入れることはどうしてもやりたくないことでした。
なのでこの方法以外に何とか解決できる方法がないかを探りました。
2018/2/8 追記
そんな対応してないわけないよな～とは思っていたのですが、サイトに掲載されていることに気づきました。
https://www.netlify.com/docs/continuous-deployment/#build-environment-variables
NODE
You can set the Node.js version we use to build your site in two different ways:
Add a /.nvmrc to your repository. This will also tell any other developer using the repository which version of Node.js it depends on. You can either set a specific version or just have a major version in the file, like the number 6 for the latest version of node 6.x
Set a NODE_VERSION environment variable. You can set this as a variable in the build environment either while linking the repository or afterward from the site settings screen in our UI. The value inside can be anything you would use with nvm.
ということで、私はbuild settingにNODE_VERSIONを追加しました。
NodeのバージョンはローカルのNodeのバージョンと合わせるのが最善でしょう。
そしたらビルドできました！
以下は過去の記事ですが、こういう方法でも今後もいけるでしょう。
push-dirでdistのみを別ブランチにpushできる！
結論としてはdistディレクトリのみをpush-dirというライブラリを使って、Githubの別ブランチとしてプッシュすることで、マスターブランチで管理することなく、公開をすることができました。
npm i --save-dev push-dir
"scripts": {
...
"generate": "nuxt generate",
"deploy": "nuxt generate && push-dir --dir=dist --branch=release --cleanup"
},
npm run deploy
push-dirはNuxt.jsがGithub pagesで公開するためのTipsとして載せているライブラリです。
https://ja.nuxtjs.org/faq/github-pages/
Github Pagesでの公開もありだとは思いますが、必ずリポジトリ名が一階層の別のディレクトリとなってしまい、ちょっと設定が面倒くさくなってしまうため一度試してみたものの、Nuxt.jsとの相性は良くないように思います。
Netlifyの設定
Netlifyのビルドの設定は切って下さい。また、publish directoryの設定も切ってください。
一瞬ハマった点
Gitの状態が空でないとエラーで怒られるというのに微妙にハマりました。
Git not clean
と出たら、このライブラリが出してるGitの状態が空ではないというエラーです。
後々考えれば、そのまんまの通りの意味なのですが、初回はどこで何が悪さしてるのかわからず、ちょっと悩みました。
ライブラリのソースコードを読んで理解できました。
git status --porcelain が空じゃないときにこのメッセージが出るようです。
このコマンドを打って該当のファイルをどうにかしたらうまくいきました
非公開リポジトリをデプロイする際にも使えそう
この方法の利点としてはもし非公開リポジトリで開発していたとしても、Githubにビルドした結果のみをプッシュするリポジトリを作ってしまえば、Netlifyと組み合わせて静的サイトを無料で配信することができるということになることです。
git remote add release http://github.com/userhoge/hogehoeghoge.git
push-dir --remote=release --dir=dist --branch=release --cleanup
生のコードのpush先を間違えることには十分気をつけてください。
おわりに
言い忘れていましたが、この方法は静的サイトの公開のみに対応しています。
なんだか小さいアプリを作っていると結局SSRいらんやんて事が多いです。
SSR抜きにしてもNuxt.jsはめっちゃ便利。
Netlifyのバージョンが上がってくれれば、公開リポジトリに関してはこんなことをする必要はなくなります。
しかしながら、非公開リポジトリに対しても手軽に公開できる環境を用意できるのはなかなか良さそうです。