読者です 読者をやめる 読者になる 読者になる

ビットコイン・ブロックチェーン技術ブログ|合同会社ジャノム

ビットコイン・ブロックチェーン専門企業からの目線で、最新技術を一般の方に分かりやすく解説します

Wercker + Gulp + EJS + Amazon S3 + GitHub + CloudFlare で作る!完全自動化・月額1円ウェブサイト

設定メモ

こんにちは。代表の日向です。

会社ウェブサイトを表題にある様々なサービスを組み合わせ、ソースコードから自動的にビルド&デプロイを行い、 超低コストでホスティングできる仕組みを作りましたので、だいたいどんな感じで作ったのかというレポートを掲載します。

はじめに

突然ですが、みなさんはスタティックな(サーバ側の処理がほとんど発生しない)ウェブサイトを作る時、何を使っているでしょうか?

一般的にはレンタルサーバを使ったり、Wordpressホスティングサービスを使ったりすることが多いと思いますが、 どうせサーバ側の処理なんて要らないのにわざわざ高い月額費用を払ってサーバを借りるのは非常に馬鹿らしいですし、 OS や Wordpress のバージョンを上げたりなんだりと日々のメンテナンスも結構煩わしかったりしますよね。

ですので、なるべくコスト(金銭的コスト・人的コストの両方)をかけずにスタティックなウェブサイトを構築できる方法を密かに模索しています。 ページ数の少ないシンプルなウェブサイトを作る場合には GitHub Pages を使うのが個人的にはかなりイケていると思っていて、 当社ウェブサイトも実は GitHub Pages を使って構築していたのですが、ソースコードの後処理的なことができず不便だったため、 タイトルにあるように最新(?)のサービスを組み合わせてそれっぽい仕組みを作ってリニューアルしてみました。 本記事ではその取り組みについて紹介させていただきます。

GitHub にプッシュするだけで、ヘッダやフッタを自動的にページに挿入して公開してくれますので非常に便利です! このページを参考に、ぜひあなたのウェブサイトも自動化してみましょう!

経緯

当社ウェブサイト (https://janom.co.jp/) は GitHub Pages を使って構築していたのですが、 GitHub にあげたソースコードがそのまま HTTP(S) で見えるようになるという仕組みのため、 例えば「ソースコードに後処理をかけて別ファイルのヘッダ・フッタファイルを統合して HTML ファイルを生成する」といったことができないという難点があります。

ですのでいままではシングル・ページ・アプリケーションのような構成にしてすべてのページを無理やり一つの HTML ファイルに突っ込んでいたのですが、 ページ数やコンテンツ量が増えるにつれて厳しくなってきました。

「もうこれ……管理……無理……」という状況になりましたので、GitHub Pages を諦めてなるべく低コストかつ全自動ですべて処理されるようにしよう、 ということで今回の仕組みづくりに至りました。

やりたいこと

以下を目指します。

設定手順

さすがに使ったものをすべて事細かく書いていくとキリがありませんので、今回作った仕組みの概略を示します。

重要な部分のみを記しており、これがすべてではありませんので、 より詳細な情報についてはソースコード等をご確認ください。

リポジトリディレクトリ構成

Gulpによる自動化

Gulp は Node.js で書かれたビルドシステムです。 非同期に複数の処理を同時に走らせられることや、プラグインが多数用意されており、複雑な処理 (例えばソースコードをminifyしたり、ソースコードの変更を監視し自動リビルドしたり) が一発で実行できるなどの特徴があり、非常に便利です。

ビルドステップや具体的な実行内容はすべてリポジトリのルートディレクトリにある gulpfile.js に記載してありますので、 詳細についてはこちらを見てもらうとして、ここでは今回作った Gulp タスクの一覧を載せるだけにとどめます。

  • commit-hash - gitの最新コミットIDを取得
  • dist-clean - クリーンアップ処理
  • ビルド関連
    • dist-copy - 後処理の必要のない画像ファイルや各種データファイルをコピー
    • dist-ejs - EJSテンプレートファイルの処理
    • dist-js - JavaScriptソースコードを一つのファイルに固めてminifyする
    • dist-css - CSSソースコードを一つのファイルに固めてminifyする
  • デバッグ
    • watch - ソースコードの変更を監視し、変更が検知された場合に自動リビルドを行う
    • connect - 開発中の内容を見るためのテスト用サーバの立ち上げスクリプト

Werckerによる自動ビルド・デプロイ

Wercker は Travis CI のような CI サービスですが、GitHub や Bitbucket のプライベートリポジトリでも無料で使えるのが大きな特徴の一つとなっています。 (※なお、そのかわり無料アカウントでは同時ビルド数が2までに制限されており、この制限を撤廃するのに料金が発生するようです)

ウェブから GitHub との連携と利用するリポジトリの選択を行ったら、 あとは基本的にはリポジトリのルートディレクトリにある wercker.yml という YAML ファイルに実行したい処理を記述するだけです。

Wercker では前述の gulp によるビルド処理を走らせた後、Amazon S3 にアップロードする処理を走らせるようにしています。

実際の設定ファイルの内容はリポジトリを見てください……といいたいところですが、極めて短く記述できましたので全文を載せます。

box: nodesource/trusty
build:
  steps:
    - npm-install
    - hgen/gulp:
        tasks: dist-clean
    - hgen/gulp:
        tasks: dist
deploy:
  steps:
    - s3sync:
        key_id: $AWS_ACCESS_KEY_ID
        key_secret: $AWS_SECRET_ACCESS_KEY
        bucket_url: $AWS_BUCKET_URL
        source_dir: dist/

これだけです。超簡単です。

Amazon S3 の設定

Amazon S3 のいわゆる静的ウェブサイトホスティング機能を利用します。 詳しい設定方法についてはネット上にいくらでも転がっていますので省略します。

設定が終わったら、利用するバケットにアクセスできる IAM ユーザを作り、アクセスキー等を Wercker のウェブ UI から指定します。

具体的には環境変数として以下の三つを定義します。

  • AWS_ACCESS_KEY_ID - IAMのアクセスキー
  • AWS_SECRET_ACCESS_KEY - IAMのシークレットキー
  • AWS_BUCKET_URL - バケットのURL。s3://BUCKET_NAME のように先頭に s3:// をつける必要があります

CloudFlareで簡易SSL

CloudFlare はリバースプロキシ動作をする CDN サービスです。

……が、今回は CDN としてではなく、CloudFlare の提供する無料 SSL 機能の利用を目的としています。 Let's encrypt などの無料の SSL 発行サービスもありますが、結局サーバが必要となってしまいますので、 Amazon S3 とユーザの間に CloudFlare を噛ませることでウェブサイトの SSL 化を行います。

設定方法等はいくらでも転がっているようですので省略します。

動作確認

もろもろ設定ができたら動作確認を行います。

GitHub にプッシュを行うと自動的に Wercker でのビルド&デプロイ作業が進行するはずです。

f:id:mhyuga:20160819144355p:plain

上の図のようになれば成功です。 URL を叩いてみて正しく反映されているか確認しましょう。

これで、GitHub にプッシュするだけで自動的にビルド&デプロイが行われるようになりました!

月額費用

最後に月額費用を試算してみましょう。

まず、利用している外部サービスは GitHub、Wercker、Amazon S3、CloudFlare といったところですが、 Amazon S3 以外はすべて無料プランですので料金は一切発生しません。

Amazon S3 の利用料金はというと、執筆時点(2016年8月19日)で東京リージョンでは

  • ストレージ利用料金 - $0.033 / GB / month
  • リクエスト料金 - $0.0037 / 10,000リクエスト
  • 転送料金 - 1GBまで無料

です。

それぞれ直近一ヶ月の実績をもとに計算をしてみると、

{\displaystyle
\$ 0.033 \times 0.02 \text{GB} + \$ 0.0037 \times \frac{5000}{10000} + \$ 0 = \$ 0.00251
}

となり、月額約0.25円という試算となります。 そんなにアクセスがないというのもあると思いますが、なんか1円切ってますね()

さいごに

スタティックなウェブサイトを作る賢い方法は他にもたくさんありますし、運営者や開発者の趣味(プログラミング言語の趣向等)によってもやりやすい方法は異なるでしょうから、 必ずしもこの記事の方法が最適とは限らないでしょう。 しかしながら、この記事をお読みいただき「あぁ、確かにそういう方法もあるのか!」という発見が少しでもあれば幸いに思います。

ぜひこれを機に色々な方法を試していただければと思います。 逆に、「こんな方法もあるよ」というのがありましたらコメント欄等から教えていただけますと非常に助かります。