Netlifyでデプロイしてみた話

そもそもNetlifyとはなにか？

Netlifyは静的サイトをホスティングサービスのうちの一つです。ホスティングサービスというのは、外部のサーバーを介して、自分のデータをweb上で公開できるサービスのことです。静的サイトホスティングサービスには、GithubPages、Netlify、Amazon S3、Vercelなどがあります。

ポートフォリオをデプロイする際、これまではGithub Pagesを使ってデプロイしていたが、思い切ってNetlifyを使ってデプロイしてみた話をご紹介します。これからフロントエンドのポートフォリオを作成して自分の作品を一般公開したいと考えている人はぜひご一読ください。

Netlifyを選んだ理由

• 無料で使える
• ドメイン名をカスタムできる
• Githubと連携していて自動デプロイが可能

GithubPagesも無料で使えますが、ドメイン名に自由度がないのと、自動デプロイ機能がありません。この問題をNetlifyが解決してくれます。

ドメイン名の設定

ドメイン名をカスタムできるというのは自分の好きな名前のURLで公開できるということであり、以下画像の設定で編集することができます。

自動デプロイ

これまでGithubPagesでデプロイしていたときは、自動デプロイの機能がなかったため、コミットをプッシュする度にローカルでビルドしないといけませんでした。しかし、Netlifyではビルドコマンドを設定できるため、ローカルでビルドしなくてもリモート上で自動的にビルドしてくれます。それによってプッシュ前に毎回ビルドコマンドを叩く手間が省けると同時にビルドし忘れてデプロイできていなかったというミスを未然に防ぐことができるようになりました。

ビルドの設定

以下のNetlifyの画像がビルドの設定画面です。設定箇所がいくつかありますが、赤枠の箇所のように設定すればうまくいきます。

• Build command　　　ビルドするyarn(またはnpm)コマンドを入力
• publish directory　 　ビルド後に生成されるビルドの対象となるフォルダを入力
• Builds　　　　　　　 プッシュした時に自動的にビルドが走る設定
• Production branch　 ビルドの対象となるブランチを設定

**自動デプロイ設定の際に気をつけるべきこと** ローカル上のnodeバージョンが少し古い場合、Nelify上のnodeバージョンもそれに合わせる必要があります。 nodeのバージョンはNetlifyのGUIで設定できないため、プロジェクト内で.node-versionsファイルを設置し、その中でnodeバージョンを記載することでNetlify上のnodeバージョンを指定することができます。

以下画像はローカル上とNetlify上のnodeのバージョンが異なってビルドが失敗した時

Tips

NetlifyにはGithub上からデプロイの監視ができるステータスバッジという便利機能もあります。以下の画像みたいにGithubのリポジトリ上にnetlifyのデプロイが成功していることを通知するバッジをつけることでnetlifyのデプロイがうまく行っているかをGithub上で確認できます。

Netlify上でStatus badgeを選択すると、ステータスバッジのURLを取得でき、これをREADME上に貼ることで確認することができます。