2018年12月12日

デザイン

Netlifyとは? 〜概要から導入まで〜

目次

  1. Netlifyとは?
  2. 導入手順
  3. まとめ

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay12です!

前回はFirebaseのRealtime DatabaseのデータをRubyから、firebase-rubyというGemで操作を行うという記事でした。

Rubyからfirebase-rubyでRealtime Databaseにアクセスする

今回は静的ホスティングサービスである「Netlify」についてご紹介します!

Netlifyとは?

Netlifyは、静的サイトをホスティングすることができるWebサービスです。
WordPress等の動的な処理のいらないLPなどの静的なWebサイトであればNetlifyを通じて公開することができます。
公開手順も非常に簡単で、公式サイトでも「Deploy your site in seconds.」とうたっているだけのことはあり、
3ステップほどで公開することができます。


( Netlify HPより )

GitHubを使っている方でしたらGitHub Pagesというサービスをご存知の方もいるかと思いますが、そちらに近いサービスになります。

GitHub Pagesについては以前にこちらの記事で触れているので、
もしよければこちらもあわせてご覧ください。

GitHub PagesでReactアプリケーションを公開!【作りながら覚えるReact】

導入手順

アカウントの作成

まずはNetlifyのアカウントを作成します。
GitHub / GitLab / Bitbucket / メールアドレス より選択ができます。

プロジェクトの追加

アカウントの作成が終わったら、右上の「New site from Git」より新しくプロジェクトの追加を行います。

使っているバージョン管理サービスと、選択するとリポジトリ、ブランチやビルドコマンドの選択・入力ができるので、デプロイしたいサイトのリポジトリとブランチを選択します。
LP等の完全静的なWebサイトであればビルドコマンドの入力は不要です。

静的Webサイトの表示だけでしたら上記の手順で完了です。
管理画面にて、そのほか独自ドメインの設定やhttpsの設定も可能です。

独自ドメインの設定

独自ドメインの設定は設定画面より「Setup a custom domain」をクリックし設定画面へ飛びます。

上記画面に取得したドメインを入力することで設定ができます。
Netlifyではドメインはwwwサブドメインつきのドメインを推奨しているため、www付きで設定します。
httpsの設定は管理画面のドメイン設定画面内で
無料SSLであるLet’s Encryptの認証をボタン一つですることもできます。

補足

その他、ファイルの直接アップロードによるビルドにも対応しているため、
普段gitを使わない方でも使用することが可能です。

その場合は先ほどの「New site from Git」のボタンの画面で
ファイルのディレクトリごとドラッグ&ドロップすることでデプロイができます。

まとめ

今回はNetlifyについての導入手順についてご説明しました。
公開までの手順も簡単に行うことができ、また無料で利用することができるので(一部機能は有料)、ぜひ一度試してみてはいかがでしょうか?

3

3

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP