Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

NetlifyでWebサイトをらくらく公開&運用

Webサイト制作

本記事の対象者

・Netlifyってなに?
・作ったサイトを無料で公開したい
・運用を楽にしたい
こういった方向けです。

こんにちは。

今回はNetlifyを知らない方向けに、

  • Netlifyとは
  • サイト公開+運用の手順

を紹介します。

Netlifyとは

Netlifyは静的Webサイトのホスティングサービスです。
イメージを掴んでいただくために、管理画面から最も基本的な機能を紹介します。



こちらが管理画面から、サイトのデータをアップロードします。
アップロード方法は2つあり、

①のエリアにサイトのフォルダをドロップ
②Gitのリポジトリからアップロード

です。

非常にシンプルですね。
Gitホストサイトは、Github、GitLab、Bitbucketから選べます。
後ほど紹介しますが、これらのリモートリポジトリにプッシュするだけでNetlify経由で自動的にサイトへ反映できます。

Netlifyでできること

4つプランがありそれぞれできることが変わりまが、
個人でWebサイトやポートフォリを公開する分であれば、無料のSTARTERプランで十分です。



STARTERプランでできる代表的な機能を紹介します。
(たまに内容に変更が入るのですが、2020年10月10日時点での情報です。)

Webサイトの公開

上記のように、Webサイトを公開できます。
サイトの数に制限はありません。何サイトでもアップロードして公開できます。
ただ無限にアップロードできるわけでもなく、100GB/月までと、容量制限があります。
個人運用で100GBを超えることはなさそうですが、有料プランで容量は増やせます。
またGithubのプライベートリポジトリからの公開も可能なので、サイトを公開したいけどソースは公開したくないといった場合でも対応できます。

CDNサーバーから高速配信

NetlifyにアップロードされたサイトはCDNサーバーに保管されます。
CDNの説明は割愛しますが、閲覧者の居場所に限らず高速で配信できます。

独自ドメインの使用

お名前.comなどのドメイン発行サービスと連携して自由にドメインを設定できます。
Netlify内でアドレスを割り当て、ドメイン発行サービス(お名前.com等)でDNS設定を行うイメージ。

https対応

今や使うのが当たり前のhttpsですが、
無料かつ自動的にhttps対応してくれます。

ビルド機能

ここが素晴らしいのですが、Node.jsのビルドコマンドに対応しています。(RubyやPythonにも対応しているようです。)
WebpackやGulpを用いてCSSやJSファイルをビルドしているサイトでも、Netlify内でビルドを行うことができます。
流行りのSSR(サーバーサイドレンダリング)にも対応可能ですね。
なのでビルド前のプロジェクトファイルをプッシュするだけで、自動ビルド→デプロイができます。

Netlify Forms

静的コーディングしたフォーム(お問い合わせ等)とNetlifyを連携できます。
方法は非常に簡単で、HTMLのformタグの中に一言、「netlify」と書けば連携完了です。
formをsubmitすると、自動でNetlifyに入力データが飛びます。メール通知等も可能です。
個人的には、最も簡単なお問い合わせフォームの実装方法です。

その他、有料ですが、

  • Basic認証
  • サイトデプロイ時の通知設定(メールやSlackに対応)
  • サイトのアナリティクス機能
  • 複数メンバーでの運用

も可能です。
非常に高機能ですね。

Netlifyのデメリット

  • PHPが動作しない
  • データベースが無い


が挙げられます。
なので、WordPressなどの動的サイトは公開できません。

近年のWebアプリはフロントとバックエンドを分離してAPIで接続する方式(できるだけ疎結合)が主流なので、
フロント側の運用に特化したサービスというところでしょうか。
WebサイトをJavascript、API、Markupで構築するアーキテクチャを示すJamstackという言葉自体も
Netlify創業者のMatt Biilmann氏が提唱したものです。
※Jamstackの定義は少し複雑なので公式で確認しましょう。
WordPressサイトを無料で公開したい場合はXfreeなどがありますね。

Netlifyの使用例

サイトを公開するまでの手順を紹介します。
Githubと連携するので、公開後にコードを修正した場合、Githubにプッシュすると自動的にWebサイトに反映される感じです。

1.Netlifyへのアカウント登録

Netlifyにアクセスして、「Sign up」からアカウント登録しましょう。
日本語は未対応ですが、難しいことは問われません。
Githubアカウントで登録すると後々便利です。

2.Webサイトの公開

先述の通りファイルを直接ドロップする方法とGithubリポジトリと接続する方法がありますが、
今回はGithubリポジトリの方法で進めます。
Jamstack公式の説明にも、Jamstackの構築方法について「Using Git workflows」とあるので、Gitベースで管理するのがこのサービスのキモだと思います。
(ちなみにファイルを直接ドロップする公開方法は、ドロップすると即座にURLが発行+公開されて作業完了です。)



画面内の②を選択します。



Githubか、GitLabか、Bitbucketから選択できます。
私はGithubを使っているのでGithubを選択します。



すると、Githubのリポジトリが一覧で表示されます。
アカウントをGithubアカウントで登録した場合は特に設定無しで出てくるかと思います。
アップロードしたいサイトのリポジトリを選択します。



リポジトリを選択すると、公開前の設定画面に移動します。
Owner : 無料アカウントなら1人しかいないのでいじらなくてOKです。
Branch to deploy : デプロイするブランチを選択します。基本masterでOKと思います。

その下のbuild settingですが、Webpackやgulpのビルドが必要な場合、
またVue.js React Nuxt.js Next.jsといったJSフレームワークを使っている場合は、
package.jsonなどを参照してビルドコマンドを記入しましょう。
Publish directoryはビルドしたファイル群を保存するフォルダ名を選択します。
勝手にフォルダを生成してくれるのでdistなどとつけておけばOKです。

今回はビルドコマンドも不要なサイトなので、Build commandとPublish directoryは空のままでOKです。
Deploy siteを押しましょう。



こちらの画面に移動します。もう、公開完了です。

①が公開されたサイトのURLです。クリックするとサイトが表示されるはずです。
②はビルド+公開のステータスです。ビルド中、ビルドエラーとうのステータスがここに表示されます。
③ドメインの設定ができます。独自ドメインを割り当てたい場合はこちらから設定します。

3.サイトの修正

サイトを修正した際、Githubにプッシュで自動的にサイトに反映させる設定の説明をしようと思ったのですが、
Githubリポジトリから公開したため、Githubとの連携もすでに完了しています。
コードに修正を加えてプッシュすると、自動的にNetlify側でビルドが走り変更内容を公開してくれるようになっています。

Xserverなどで運用している場合は、修正→FTPツールでアップロード+Githubへ修正ver.の公開の手間がありましたが、だいぶ楽になりますね。

簡単でしょう

本ブログも、Nuxt.js+ヘッドレスCMS+Netlifyという構成で公開しています。
自分でサーバーを持たない、サーバーレス構成です。
ヘッドレスCMS、Netlifyともに無料プランなので、維持費用はドメイン費用の年間数百円のみです。
また、公開前にすべてのページを事前ビルドし、表面のみをCDN配信している形なので、表示が非常に高速で、セキュリティ的にも安心です。

本記事と直接は関係ないですが、ヘッドレスCMSにはmicroCMSを用いています。(Saas型のヘッドレスCMSサービスです。)
microCMSにもwebhook機能があり、記事を投稿すると自動的にNetlifyのビルドが走って記事が公開されるようになっています。
これらを用いれば、開発者はGitベースで管理、運用者はCMSのみ触れればサイトを運用していけそうですね。



それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ