皆さん、プライベートプロジェクトやってますか？
いろいろプロダクトを作っていると、そのアプリケーションの動作環境にかかる費用も馬鹿にならず、インフラ運用に手を取られ、新しいプロダクト作成に支障が出てしまうこともあります。

私もそうでしたが、試行錯誤の末、その悩みを解決すべく生まれたのが「ぼくのかんがえたさいきょうの、むりょうさーばれす。」です。サーバレス環境を無料で調達しましょう！

TL;DR

GitLab PagesとGoogle Apps ScriptをJSONPでつなぐ。

よくあるサーバレスアーキテクチャと入れ替えてみる。

サーバレスアーキテクチャでよく用いるのは、AWSでS3/CloudFront、Lambda/API Gatewayと更にはDynamoDBを使うというものでしょう。
ただ、アーキテクチャも比較的複雑（独自ドメインもCloudFrontを使わないと設定できないし、API　Gatewayを通さないとLambdaが呼べない。）になってしまいます。
その上、もちろん有料（無料枠があるとはいえ。）。お金ないもん。
というわけで、これを、GitLab PagesとGoogle Apps Script、ストレージはGoogle Sheetsに置き換えます。

とてもシンプルになりました。

解説

それぞれの要素を解説します。

GitLab Pages

GitLabはGitのホスティングサイトで、Gitに登録されたコンテンツからWebページを公開することができます。その機能の名前がGitLab Pagesです。
GitLab Pagesは、静的コンテンツ(HTML、JavaScript、CSSなど)を配置するのに利用します。
カスタムドメインでSSLも利用できます。
また、デプロイ時は、Gitリポジトリの変更をフックしてCDできるのでバージョン管理もバッチリです。
静的ページをそのまま公開することもできますし、Pushされたときに各種コマンドを実行することが可能なので、Jekyllなど、静的サイトジェネレータを使用することもできます。

Google Apps Script

Google Docsや、Gmail、Googleカレンダーに連携可能なアプリケーションを書くことができます。基本JavaScriptで書きますが、コマンドラインツール（clasp）を使うことでTypeScriptを使用することもできます。
Google Apps Scriptの一つに、Web　APIを公開する機能があるので、今回はそれを使用します。
ただし、Google Apps Scriptは無料では独自ドメインを使用することができず、かつCORS（他サイトからの直接のAPI通信）をすることができません。そこでJSONPを用います。JSONPを使うことで、カスタムドメインからGoogle Apps Scriptを使用することができます。

Google Sheets

Googleのオンライン表計算ソフトです。
Google Apps Scriptで表の内容をAPI経由で入出力することができます。

設定手順

GitLab Pages

公開ディレクトリをもつGitディレクトリを作成します。
例えば、publicというディレクトリを公開ディレクトリとするプロジェクトを作成します。
また、Gitディレクトリのトップに .gitlab-ci.yml というファイルを作ります。

ディレクトリ構成

public
 └ index.html

.gitlab-ci.yml の内容は以下です。

.gitlab-ci.yml

pages:
  stage: deploy
  script: echo dummy
  artifacts:
    paths:
    - public
  only:
  - master

これでGitLabのリポジトリにPushすると、Webページとして公開されます。
デフォルトのURLは
https://<username>.gitlab.io/<projectname>
です。このURLをカスタムするためには、ドメイン、およびSSL証明書を取得し、DNSのCNameに<username>.gitlab.ioを指定するのと、Gitlabのプロジェクトの、Settings→Pages で設定を行います。
詳しくはこちらに記載されています。

Google Apps ScriptとSheets

Chromeのプラグインをインストールし、WebのエディタでJavaScriptを記載、公開することができます。
こちらにとても良くまとめていただいています。
また、claspというツールを使って、ローカルで作成したJavaScriptをGoogle Apps Scriptにアップローヅすることも可能です。

Google Apps ScriptにはSheetsにアクセスするAPIが用意されています。Sheetsの使い方もこちらにまとめていただいています。

ただし、Google Apps Scriptは他ドメインのWebページからRestアクセスすることができません。
ので、JSONPを利用して通信を行います。

SheetsのデータをJSONPでレスポンスするサンプルコードは以下です。

sample.gs

function doGet() {
  var sheet = SpreadsheetApp.getActive().getActiveSheet();
  var rows = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn() - 1).getValues();
  var keys = sheet.getRange(1, 1, 1, sheet.getLastColumn() - 1).getValues()[0];
  var data = rows.reverse().map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
  return ContentService
    .createTextOutput('callback(' + JSON.stringify(data) + ')')
    .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

あとは、HTMLでこのデータを受け取るようにすれば完成です。
HTMLは先に記述したように、GitLabにPushしておきます。

index.html

<script>
callback(data) {
  console.log(JSON.stringify(data));
}
</script>
<script src="${Google Apps ScriptのURL}"></script>

これでデータを受け取り、コンソール出力することができます。

まとめ

サーバレスにすることでインフラの面倒をクラウドの中の人に任せ、自分はソフトウェアの構築に集中する事ができます。
しかも無料となれば、使わない手はないでしょう！
皆さんのプライベートプロジェクト運用のご参考になれば幸いです。

サンプル

本書のサーバレスアーキテクチャを使って、開発者用ニュースサイトを立ち上げてみました。無料インフラでもこれくらいのサービスが提供できます。是非体験してみてください。