About_this

他社調査の名目で自分のブログを移築した話

これは FJCT Advent Calendar 2018 の3日目の記事です。 2日目は @hunter9x のElasticsearchのQueryが遅い時のトラブルシューティング でした。 4日めは @o108minmin さんの 2018年度新人技術研修の取り組みについて 話です。

こんにちは。FJCT でエンジニアをしている こんふみ です。 本記事では、普段の仕事ではなく、個人のブログを移築した話をしたいと思います。

TL;DR

• ブログを移転しました

• GCS と Cloudflare を使って、Hugo でビルドした静的WEBサイトを配信しています。

はじめに

毎年この時期は、アドベントカレンダーに参加するは良いもののネタが全然思いつかず悩んでいるわけです。

そもそも振り返ってみると、たまの休日にパソコンの前に座っていろいろ試行錯誤をしたとしてもブログなどに残す習慣が無いので忘れがち。前回やったことを調べなおすから先に進まないのでモチベーションが上がらず、休日はサボリ気味になるという負のループを断ち切るべく、ブログそのものをエンジニアリングの対象にしてみようという思いつきからこの記事はスタートしています。

（その思いつきが妥当なのかについては諸説あると思うので、突っ込まないであげてください）

移行計画

思い立ったが吉日ということで、移行後の青写真を描いておきます。

もともとは はてなブログ を利用しており、以前のブログは http://con-humi.hatenablog.com/ でした。 全然更新してないですね…

移行後のブログの要件は下記の通りとします。

• Markdown で記事を書ける
• 独自ドメインでやる
• GitHub でコンテンツを管理する

以前 hugo を使ってブログを作ろうとしたことがあるので、ブログは hugo を使って作成し、 静的WEBサイトとして公開することとします。

ブログを公開するインフラはどうするかですが、冬はスノーボードに行かなければならない（義務感）なので お金は接続したいところ。 GCP さんには永久無料枠があるのを知っていたので、 GCP の永久無料枠を中心にインフラを検討します。

インフラの検討

コンテンツ置き場はおそらく GCS が 5GB 無料 なので当分大丈夫。

ドメインは10年分を買っているのに遊ばせているやつがあるので 実質無料 。

とりあえず SSL 化ができれば良いなと思っていろいろ調べていたところ、Cloudflare を使うと 無料で SSL 化ができそうなのに加えてコンテンツのキャッシュをしてくれるのでストレージへの アクセスも減ってくれそうなので、Cloudflare を使ってみることにします。

移行作業

Hugo をつかってコンテンツ（ブログの投稿）を作成する

自分は Windows10 の Laptop を使っているので、WSL（Ubuntu） 環境で hugo を利用したいと思います。

hugo のリリースページ から最新のバージョンをDLします。Ubuntu は dpkg を使えるので、 deb 形式のパッケージをDLしました。

curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.52/hugo_extended_0.52_Linux-64bit.deb
sudo dpkg -i hugo_extended_0.52_Linux-64bit.deb
hugo version

Theme の設定やポストの作成は 公式ページ に従って実施しました。

Theme とかFabicon関係とかの見た目は後々凝っていきたいと思います。

GCS に専用のバケットを作成する

GCS には webサイトをホスティングする機能があるので、それを利用します。

GCS で webサイトをホスティングするには、GCS のバケット名をウェブサイトのドメインと同じに する必要があります。

ここでハマりどころだったのが、WEBサイトのドメインのバケット名を作るためには、Google にドメインの所有者であるという登録をする必要があるところです。

公式ドキュメント に従って設定すれば良いのですが、ドメインを配信している権威サーバーをちゃんと認識できていなかったため、いろいろ試行錯誤することになりました。 自分のドメインを、ドメインを管理しているサービスのDNSサーバーとは別のDNSサーバーで配信していた人はわけが分からなくならないように注意しましょう。 自分は お名前.com で購入したドメインを mydns.jp で配信していたのを忘れていて時間を取ってしまいました。

conhumi.net のサブドメインとして、ブログ用に blog.conhumi.net を切り出し、これを GCS のバケット名に設定します。

バケットを公開設定にするのには、 こちら を参考にしました。

Cloudflare で GCS のコンテンツを公開

Cloudflare で WEB サイトを配信するには、 cloudflare の DNS を利用してレコードを配信する必要があります。（有料プランでは自前のDNSサーバーも使えるようです）

ドメインを購入したサービスなどでネームサーバーを Cloudflare 指定のネームサーバーに変更します。

ネームサーバーの設定変更が反映されているかは、下記のようなコマンドで確認できます。

dig +norec @202.12.27.33 net IN NS # net はお使いのドメインの TLD
dig +norec @f.gtld-servers.net conhumi.net IN NS # f.gtld-servers.net は ↑ のコマンドで得られたネームサーバーから選ぶ。 conhumi.net はお使いのドメインにする

ネームサーバーの変更が反映されていれば、 ns.cloudflare.com. ドメイン配下のネームサーバーが設定されているはずです。

GCSのバケットをCNAMEで独自ドメインに見せる

conhumi.net の管理が cloudflare で行えるようになったので、blog.conhumi.net にアクセスした際にGCS の blog.conhumi.net バケットの中身を参照するように設定します。

公式のドキュメント によると、下記のような CNAME を作成します。

NAME                  TYPE     DATA
blog.conhumi.net      CNAME    c.storage.googleapis.com.

Cloudflare の管理画面上部の DNS タブから設定可能です。

設定完了後、DNS レコードが自身の見ているフルリゾルバで解決できるようになれば、晴れて独自ドメインでGCSに格納したファイルを配信できるようになります。 TTLの設定が長いと変更がなかなか反映されないこともあるので、各ネームサーバーでTTLを確認したりしながら気長に待ちましょう。

ついでに SSL の設定をしてみる

Cloudflare の管理画面上部の Crypto タブから、 Always Use HTTPS を有効化すると、http でアクセスした場合に https にリダイレクトしてくれるようになります。簡単すぎる…

CircleCI で自動ビルド

記事を更新するのに自分でGCSにアップロードしても良いのですが、せっかくなら自動でやりたいので、 CircleCIを使ってビルドすることにします。

CircleCI の解説はググればいくらでも出てくるので割愛しますが、こんな設定ファイルを書きましたので 紹介しておきます。

• .circleci/config.yml

version: 2
jobs:
  build:
    branches:
      only:
        - master
    docker:
      # specify the version
      - image: ubuntu:latest

    working_directory: ~/hugo
    steps:
      - run:
          name: Update environment
          command: apt-get update -y && apt-get install -y git curl lsb-release sudo gnupg
      - run:
          name: install hugo
          command: |
            curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.52/hugo_extended_0.52_Linux-64bit.deb
            dpkg -i hugo_extended_0.52_Linux-64bit.deb
            rm hugo_extended_0.52_Linux-64bit.deb
      - run:
          name: install gsutil
          command: |
            export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)"
            echo "deb http://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
            curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
            sudo apt-get update -y && sudo apt-get -y install google-cloud-sdk
      - run:
          name: Hugo version
          command: echo "$(hugo version)"
      - checkout
      - run:
          name: submodule update and execute
          command: |
            git submodule update --init --recursive
      - run:
          name: Building blog pages
          command: |
            HUGO_ENV=production hugo -v
      - run:
          name: Prepare gcloud command
          command: |
            echo $GCLOUD_SERVICE_KEY | base64 --decode --ignore-garbage | sudo gcloud auth activate-service-account --key-file=-
      - run:
          name: upload to gcs
          command: |
            gsutil rsync -d -r public/ gs://${GCS_BUCKET_NAME}/

環境変数として

• GCLOUD_SERVICE_KEY
  • GCP のサービスアカウントの json ファイルを base64 エンコードしたもの
• GCS_BUCKET_NAME
  • アップロード対象の GCS のバケット名

を設定します。

このファイルもブログのコンテンツを管理しているレポジトリに配置することで、 CircleCI を使って GCS のファイルを更新することが可能です。

まとめ

GCS と Cloudflare を利用して、簡単に静的WEBサイトホスティングを実現することができました。 CircleCIを利用して、GitHubへのPushをトリガーにGCSのコンテンツを更新する自動化を実現しました。

今回の記事をきっかけに、GCP や Cloudflare といった他社サービスに触れることができました。 これをきっかけに、他社サービスをいろいろと勉強して、他社のナウい（死後？）サービスに ついていけるようにしていきたいと思います。

ニフクラでもこういったナウいサービスをどんどん出していけると良いですね。

明日は @o108minmin さんの 2018年度新人技術研修の取り組みについて 話です。