はじめに

システムの可視化ツールであるGrafanaをiPhoneで閲覧できるアプリを作りまして、宣伝用のWebページはどこに作ろうかなと考えてたところ、Netlifyというなかなか良いサービスを見つけたのでその紹介をしようと思います。

ついでに、このブログにも広告を入れてみました。コンテンツが少ないという理由でAdSenseから蹴られましたので、これを機会に更新頻度を上げていこうと思ってます。よろしくお願いします。

ついでのついでですが、GrafanizerというiPhoneアプリも一度使ってみてフィードバック頂けるとありがたいです。こちらもよろしくお願いします。

さて、最近ちょこちょこ聞くNetlifyですが、やはりGitLabページをHTTPSで配信出来るという点が個人的には一番魅力ですね。

HTTPSになるとNetlifyのページにもある通り、SEO的にも有利になり、またHTTP2.0も有効になるのでパフォーマンスがアップするというメリットがあります。まぁ、このページにHTTPSが必要かという疑問はありますが、単純にHTTPSってだけでなんとなく今風の最先端って感じでかっこいいですよね。

とは言っても、作業が難しいとか面倒だったりすると単純にかっこいいからとか言ってられないわけですけれど、ほんと簡単でした。
もし静的ジェネレーターで作られたページがあれば、数十分でHTTPSに移行出来ると思います。数ステップでできますので、このページを見た人がやってみようと思うきっかけになれば幸いです。

Netlifyを使うとGitLabやGitHub, Bitbucketで作成したページをHTTPS接続でカスタムドメイン運用が出来るようになります(GitLab以外は試していないので、多分ですが)。
というのも、GitLabはFreeプランでもプライベートリポジトリが持てますので、わざわざGitHubやBitbucketで試していないのです。GitLabページはソースを公開することなくWebページを持つことが出来るのでおすすめです。

流れ的には下記の感じです。単純なページであれば次の「静的ジェネレーターだけを利用したベーシックな方法」だけです。

GitLabでの流れになっていますが、GitHubやBitbucketでも多分同じになると思います。

静的ジェネレーターだけを利用したベーシックな方法

アカウントの作成

まずはアカウントを作成します。このときにリポジトリがあるサービス経由で認証させるとリポジトリとの連携も楽になります。 もしアカウントとページのどちらも持ってないという状態であればGitLabがおすすめです(そろそろしつこいですが回し者ではありません)。

リポジトリの選択

アカウントを作成しログインした後は公開しているページがあるリポジトリを選択する画面になります。アカウント認証と同じサービス経由であれば認証不要でリポジトリ一覧が表示されるので適当に選択しましょう。

静的ジェネレーターの選択

GitHubページやGitLabページを持っている人であればなんらかの静的ジェネレーターを利用しているとは思いますが、もしもまだ利用してないということであればHugoがおすすめです。

Golang製なので変換に掛かる時間が速いし、なによりバイナリ一つで動くので依存関係に悩まされることもありません。 まあ、テーマなどは少ないものの、ブログくらいであれば自分でテーマを作ってもそれほど面倒でもないでしょう。テーマの作り方はこちらでも触れてます。

ということで、Hugoを使うのであれば Publish derectory は public にし、Build command は hubo を設定しましょう。

設定すると指定したリポジトリからソースを取り寄せて自動的にDeployが始まります。

HTTPSのカスタムドメイン

サイトが出来上がったら、カスタムドメインを指定してHTTPSを有効にすれば、それだけでHTTPSなブログが完成です。

証明書の更新等も不要というメンテナンスフリーと、費用が一切かからないというコストフリーは嬉しいですね。

HTMLのソースを丸っとアップロード

Gitリポジトリとの連携が売りな感じのNetlifyですが、実はRESTなAPIでのアップロードにも対応してたりしますので、実は静的ジェネレーターを利用していない人でもAPI経由でアップロード出来るようになっています。
でも、ここではGitLabCIと組み合わせ、画像の最適化を行った上でアップロードする方法を紹介してみようと思います。

Netlify REST API

Netlify is a hosting service for the programmable web. It understands your documents and provides an API to handle atomic deploys of web sites, manage form submissions, inject javascript snippets, and much more. This is a REST-style API that uses JSON for serialization and OAuth 2 for authentication.

API | Netlify

はい、実際に書きたかったのはここからになります。前フリ長すぎですね。

GitLabではCIの機能が付属しており、HugoなどもCIの機能で実行されています。そこで、CIのビルド時に各種コマンドを差し込めば同時に実行してくれるというわけです。

詳しい内容はGitLabCIのページを熟読してもらうとして、このブログではこんな設定にしています。

image: nobuhito/hugo
pages:
  script:
    # update for theme
    - git submodule init
    - git submodule update
    # http://qiita.com/tusimarimo/items/0c0e666fecdda2ac927a
    - pngquant --ext .png --speed 1 static/img/*.png --force
    # http://qiita.com/soramugi/items/2e405dc40c29e9d6b60c
    - find static/img/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;
    # create public
    - hugo
    - zip -r -q public.zip public
    - curl -silent --header "Content-Type:application/zip" --header "Authorization:Bearer XXXXXXXXXX" --data-binary "@public.zip" https\://api.netlify.com/api/v1/sites/XXXXX-00000.netlify.com/deploys > /dev/null
  artifacts:
    paths:
      - public
  only:
    - master

Dockerの設定

Netlifyでもビルドの環境はあるようですが、すこし見た感じではあまり自由度が高く無さそうです。 RubyとかJS界隈の人であれば満足できそうな感じもしますが、Hugoを選択しているあたりでもう依存地獄とは縁を切りたいというのを分かってもらえてるかと思います。

そこでGitLabのCIなのですが、GitLabCIはDockerを利用できるので自由にパッケージを追加できます。

上記のサンプルでは、GitLabにあったHugoのサンプルのDockerfileを調整して必要なパッケージを追加しています。

詳しい内容は nbuhito/hugo - Docker Hubを参照してください。

画像の最適化

ローカルでは何も考えずにスクリーンショットを撮っちゃうので、今時のモバイルで見ると画像が必要以上に大きすぎて表示までに長い時間がかかったりします。

そこで、PNGとJPEGに対して画像の圧縮等を掛けています。ここらへんは他サイトのC&Pですので、コメントにあるページを参照ください。

感じ的には、それほど時間がかからないのに効果は大きいと思います。

Netlifyへアップロード

ここで実際にNetlifyへアップデートを掛けています。

API経由ではZIPファイルを受け付けますので、ZIPに圧縮してCurlで送信という処理です。

アップロードにはAccessTokenが必要になります。ログイン後、左上にアカウント名がありますので、「OAuthApps → PersonalAccessTokens」で作成・取得できます。

おわりに

長くなりましたが、こんな感じで無料のHTTPSサイトを持てるようになります。作業的にも、Gitリポジトリと連携させればお手軽に、APIを利用すれば凝ったことも出来ますのであらゆるWebサイトで利用できるのではないでしょうか？

いやー、いい時代になったものです。

---

最近あまり更新してなかったんですが、iOSアプリも公開したのでこれを機会に 宣伝を兼ねて また更新していこうと思う。