個人的なオンラインブックマークをサーバレスなどを駆使して作った話

カラクリスタ・ブックマークのスクリーンショット

~~カラクリスタ・ブックマーク~~ （今はこの the.kalaclista.com に統合されています）

これは何？

オンラインブックマークサイトです。

まぁ古い呼び方をすれば、ただのリンク集ですね。

何故作ったのか

私は以前から、

自分が貯めたブックマーク、どこかで共有できたら良いんだけどなー

と考えていたのですが、いかんせん SNS ライクなモノは使いたくなかったのと、あと共有する前提でブックマークを公開するのであれば、ある程度は見た目とか触りたい、というのもあって、自分で DIY する事にしました。

……と言いつつも、実際には、

hugo と netlify-cms を使えば、オンラインブックマークぐらい出来るじゃろ

みたいな雑な発想で作る作業を始めたのはここだけの話。

どうやって作ったか

基本的には、

StaticSiteGen としてhugo を使いつつ
Gitlab CI で aws s3 + cloudfront で良い感じな自動デプロイを出来る様にした後
netlify-cms で Gitlab アカウントで編集できる様にした

という感じで構成されています。

まぁリポジトリ自体の公開設定をプライベートにしてあるんでソースは公開していないんですが、 Gitlab CI の設定ファイルは、

https://alm-research.com/blog/deploying-hugo-on-aws-with-gitlab-ci/Deploying Hugo on AWS with Gitlab CI - Draft Journal

で紹介されている設定ファイルを参考にしつつ、下記の様な感じで自動デプロイをやっています：

stages:
  - build
  - deploy

variables:
  AWS_DEFAULT_REGON: XXXXXXX
  BUCKET_NAME: favs.nyarla.net
  CLOUDFRONT_DIST_ID: XXXXXXX

build-by-hugo:
  stage: build
  image: monachus/hugo
  script:
    - hugo
    - rm -rf public/2019
    - rm -rf public/2018
    - rm -rf public/bookmark
  artifacts:
    paths:
      - public
  only:
    - master

deploy-to-s3:
  stage: deploy
  image: garland/aws-cli-docker
  dependencies:
    - build-by-hugo
  script:
    - aws configure set preview.cloudfront true
    - aws s3 sync ./public s3://$BUCKET_NAME --delete;
    - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DIST_ID  --paths "/*";
  only:
    - master

また netlify-cms の設定ファイルは下記の様な感じです：

backend:
  name: gitlab
  repo: nyarla/online-bookmark
  auth_type: implicit
  app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

#publish_mode: editorial_workflow
media_folder: static/uploads
public_folder: /uploads

site_url: https://favs.nyarla.net
display_url: https://favs.nyarla.net
logo_url: https://nyarla.net/assets/avatar.svg
show_preview_links: false

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "-"

editor:
  preview: true

collections:
  - label: "Bookmark"
    name: "bookmark"
    folder: "content/bookmark"
    create: true
    delete: true
    extension: "md"
    format: "frontmatter"
    slug: "{{year}}-{{month}}-{{day}}T{{hour}}-{{minute}}-{{second}}"
    fields:
      - { name: "title", label: "Title", required: true, widget: "string" }
      - {
          name: "link",
          label: "Link",
          required: true,
          widget: "string",
          pattern: ["^https?://", "http or https URI"],
        }
      - { name: "tags", label: "Tags", required: true, widget: "list" }
      - {
          name: "date",
          label: "Date",
          required: true,
          widget: "datetime",
          format: "YYYY-MM-DDTHH:mm:ss+09:00",
        }
      - {
          name: "body",
          label: "Comment",
          required: false,
          widget: "markdown",
          buttons: [],
        }

作ってみた感想など

まぁ Web サイトの HTML 自体は割と雑だし、AWS での設定などを手作業でやっていて色々とハマった所もあったものの、とりあえずオンラインブックマークサイト（と言う名のリンク集）は手軽に作れる様になったんだなーという感じでした。

あと、今回はファイル配信を S3 から Cloudfront 経由のみで公開しているのですが、

Apache などで言う所の Directory Index で index.html が表示されない問題

という罠を踏み、一時作業の手が止まったんですが、これは最終的には Lambda@Edge で下記のスクリプトを食わせる事によって解決させました：

"use strict";

exports.handler = (event, context, done) => {
  var request = event.Records[0].cf.request;
  var destURI = request.uri;
  var destLen = destURI.length;

  if (destURI[destLen - 1] === "/") {
    destURI = destURI + "index.html";
  }

  request.uri = destURI;

  return done(null, request);
};

まー本当、色々とザックリと作ったワリにはしっかりとモノが動いているので、今のインターネットは便利になったんだなーと思った次第です。はい。

以上

ちなみに今回作ったオンラインブックマークサイトである カラクリスタ・ブックマーク ですが、ブックマークの移植が未だ全然出来てなくて中身スッカスカやんけって言う問題もあるのと、あと細かい調整も詰めてないので、

あ、お察しクオリティーですね。これは。

と言う感じではある、と自分でも思ってます。

とは言え、インターネットサービスをピタゴラスイッチして作った仕組みとしては上手く行った感はあるので、あとはもうちょっと情報とか細かい所を詰めて、また調整して良いオンラインブックマークサイトに出来たらな良いなぁ、と今のところは考えています。はい。

と言う事で今日の話は以上です。終わります。