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

    広告メディア事業部広告メディア事業部
    2019.05.09

    IT技術

    Netlify(ネットリファイ)とは?

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

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

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

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

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

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

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

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

    Netlify の特徴

    無料で利用できる

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

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

    独自ドメインを利用可能

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

    CDN で高速配信

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

    https に対応

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

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

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

    つまり HexoGatsbyGitbook を利用できます。

    JenkinsCircleCI といった 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 サイトのソースコードです。

    1git add public/index.html  # 変更を記録するファイルを選択
    2git commit -m "update index.html" # 変更点を記録
    3git push origin master # 変更をリモートリポジトリに反映

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

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

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

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

    Git リポジトリと連携

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

    Sites タブを開きます。

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

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

    GitHub のほか GitLabBitbucket と連携可能です。

    今回は例として、 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 addgit commit でソースコードを管理し、git push でリポジトリに反映するだけです。

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

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

    1git add public/index.html  # 変更を記録するファイルを選択
    2git commit -m "update index.html" # 変更点を記録
    3git push origin master # 変更をリモートリポジトリに反映

    さいごに

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

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

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

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

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

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

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

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

    featureImg2020.08.04エンジニアの働き方 特集社員としての働き方社員としてのエンジニアの働き方とは?ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと...

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    広告メディア事業部
    広告メディア事業部
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background