NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法

広告メディア事業部

2021.12.20

Netlify（ネットリファイ）とは？

Web サイトを作成したとき、いったいどこにアップロードすればいいか頭を悩ませることはありませんか？

FC2 サーバーや、さくらのレンタルサーバー、ロリポップレンタルサーバーなどもありますが、今回は海外のサービスである Netlify（ネットリファイ） を紹介したいと思います。

自分で作成した HTML ファイルを公開する場合、手軽に利用できるのでおすすめです。

Netlifyは静的コンテンツを配信してくれるWebサービス

Netlify（ネットリファイ）とは、静的コンテンツ（HTML・CSS・JavaScript) を配信してくれる Web サービスです。

Github や Gitlab 、Bitbucket といった Git リポジトリサービスと連携することで、git push をした途端に、サイトを更新することができます。

こんな方にオススメの記事

HTML、CSS、 JavaScript を利用したサイトを作ることができる方
git でソースコードを管理している方
GitHub を利用している方
Netlify をよく分かっていない方

Netlify の特徴

無料で利用できる

個人用途であれば無料で利用することができます。

月の転送量上限が 100GB までという制限があります。（記事更新時点）

独自ドメインを利用可能

独自ドメインをもっている場合、追加の課金をすることもなく独自ドメインでサイトを運用できます。

CDN で高速配信

CDN (コンテンツデリバリネットワーク) によって世界中に高速で Web サイトを配信できます。

https に対応

Netlify で公開するサイトは特に設定することもなく、すべて HTTPS 対応になります。

静的サイトジェネレーターのビルドコマンドに対応

Node や Ruby、Python、Hugoを使った静的サイトジェネレーターのビルドコマンドに対応しています。

つまり Hexo や Gatsby、Gitbook を利用できます。

Jenkins や CircleCI といった CI ツールを設定する必要はありません。

GitHub のプレイベートリポジトリのサイトを公開できる

GitHub のリポジトリはプライベートにしておいて、ウェブサイトとして公開したいフォルダだけを Netlify を介して配信するということが可能です。

Netlify Form で簡単にお問い合わせフォームが作成可能

Web サイトにコンタクトフォーム（お問い合わせ）を実装しようとする場合、バックエンドのサーバーが必要になります。

ですが、 Netlify では Form 機能を提供しているため、簡単な問い合わせであれば Netlify を利用するだけで実現可能です。(お問い合わせの画面は実装する必要があります)

Git のブランチごとにテスト

Git のブランチごとに Web サイトを公開することができます。

ブランチごとに Web サイトを公開し、公開内容を実際に確認してから、 master ブランチ（本番環境）に取り込むといった運用が可能です。

master ブランチ以外のブランチは管理人以外閲覧不可にする設定も可能です。

Webhooks に対応

Webhook に対応しています。サイトのデプロイ時に Slack で通知するということが可能です。

Netlify の短所

Netlify で PHP は動作しません。

そのため WordPress 等は動きません。

HTML、CSS、JavaScript といった静的コンテンツの配信に特化しています。

NetlifyとGithub と連携してWebサイトを公開する

さて、 Netlify の魅力を述べたので、早速使ってみましょう！

簡単なので安心してください。

以下のようなソースコードを管理した GitHub リポジトリがあると仮定して話を進めます。

publicフォルダに HTML、CSS、JavaScript が格納されたごくごく単純な Web サイトのソースコードです。

GitHub のリポジトリ名は web-design-practice-1 と仮定します。

このソースコードを Netlify を利用して、 Web サイトとして公開しましょう。

Netlify にサインイン/ログイン

アカウントの登録には Github、Gitlab、Bitbucket、Email が利用可能です。

Git リポジトリと連携

サインアップしたら以下の画像のような画面になると思います。

Sites タブを開きます。

'New site from Git' をクリックします。

どこの Git リポジトリと連携するか聞かれます。

GitHub のほか GitLab、Bitbucket と連携可能です。

今回は例として、 GitHub と連携したいので、GitHub をクリックします。

別ウィンドウで GitHub と Netlify を連携するか問われます。

GitHub のアカウントでログインして認証してください。

どのリポジトリと連携するのか聞かれます。

ご自身の Web サイトのソースコードを管理している GitHub リポジトリを選択してください。

今回の場合 web_design_practice_1を選択します。

Web サイトの設定

次に Web サイトの設定を行います。

今回 Web サイトのソースコードが格納されているのは public フォルダーとしていました。

なので Netlify の 'Publish directory' には public と入力します。

設定が完了したら 'Deploy site' をクリックします。

もし、サイトの作成に Hexo や Gatsby を使っている場合、'Build command' に npm run build などを記載することで、自動的にビルドできます。

Hugo や ruby の Jekyll なども設定可能です。

この場合 'Publish directory' にはビルド結果が出力されるフォルダを指定してください。

おそらく dist や build といった名前になると思います。

公開内容を確認

お疲れ様です！

以上で Web サイトの公開設定が完了しました。

画面に表示されている URL をクリックすることで公開内容を確認できます。

NetlifyでWebサイトを更新する

Netlify は Git リポジトリの変更を検出すると、自動的にサイトの内容を更新します。

つまり、我々 Web 製作者が行う必要があるのはソースコードを更新し、git add, git commit でソースコードを管理し、git push でリポジトリに反映するだけです。

Git でソースコードを管理するだけで、サイトの更新作業を行えるのです。

例： public/index.html を変更した時

さいごに

以上、Netlify についてでした。

Git でバージョン管理をしながらソースコードを書いているのなら、わざわざ、Web サイトを更新するために特別な操作をする必要もなくなり、更新がとても楽になります。

Netlify とは Web サイトのビルド、公開を一括で行うサービス
Netlify は HTTPS、CDN 対応で高機能
Git リポジトリと連携すると、ソースコードがプッシュされるたびにサイトの更新作業を自動で行う

気軽にサイトを公開できるので、自身の成果物を示すポートフォリオなどに利用するのも良いと思います。

自分の作ったサイトの公開先の一つとしていかがでしょうか？

こちらの記事もオススメ！

2020.07.17

ライトコード的「やってみた！」シリーズ

「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！ ※作成日が新しい順に並べ...

2020.07.27

IT・コンピューターの歴史特集

IT・コンピューターの歴史をまとめていきたいと思います！弊社ブログにある記事のみで構成しているため、まだ「未完成状態」となっています...

2020.08.04

エンジニアの働き方特集

社員としての働き方社員としてのエンジニアの働き方とは？ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと思います！...

書いた人はこんな人

広告メディア事業部

「好きを仕事にするエンジニア集団」の（株）ライトコードです！

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎！

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit

初回投稿日:2019.05.09