他社調査の名目で自分のブログを移築した話
これは 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年度新人技術研修の取り組みについて 話です。