Help us understand the problem. What is going on with this article?

Golang Hugoで高速なブログを作る -- Travis CI, S3, CloudFront Route53

More than 1 year has passed since last update.

この記事では、3つのトピックを組み合わせて、AWSを利用したブログの作り方を説明しています。

  • hugoでブログを作る
  • Travis CIで自動ビルド、サイトをS3にアップロードしてCloudFrontを介して公開する
  • Route53とCredential Managerを使って独自ドメインかつHTTPSで公開する

コストはアクセス量によりますが、最小で月額100円程度です。
結果として、こんな感じのサイトが出来上がります。→ https://juntaki.com/
ソースコードはこちら

Hugoとは

HugoはMarkdown形式のコンテンツからStaticなWebサイトを生成するツールです。生成されるサイトをまるごとCDNにおいてしまえば、クライアントからは高速1にロードされます。

Hugoの使い方

まずはHugoのインストール、初期構成の生成を行います。

go get -v github.com/spf13/hugo
hugo new site ~/new_site

ディレクトリ内は次のようになります。

archetypes
config.toml
content
data
layouts
static
themes

テーマはここにあるものから選んでみます。themesディレクトリ以下にサブモジュールとしてcloneすると、テーマの更新が簡単になります。

新しいコンテンツを作って、試しにビルドしてみます。

hugo new blog/test.md
emacs contents/blog/test.md
hugo server --watch

ブラウザからhttp://localhost:1313/ にアクセスすると、ライブリロードでビルド結果が見えます。あとは、気に入るまでconfig.tomlやstaticディレクトリをカスタマイズします。肝心のコンテンツも追加します。

Travis CIでビルドしてS3にアップロード

S3にバケットを作成し、Webページが公開できる設定にします。インデックスドキュメントにindex.htmlを指定しておきます。

image

バケットポリシーを設定しておけば、アップロードするだけでWebページとして公開されます。バケットポリシーの例 →匿名ユーザーへの読み取り専用アクセス許可の付与

CloudFrontでは直接S3のバケットをOriginとして設定できますが、Default Root Object以外のインデックスドキュメントの指定ができません。なので、上記の設定でS3のエンドポイントURLをOriginにするのがおすすめです。2

Travis CIの設定は以下のようにします。AWSのCredentialをAWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYの環境変数として与えると、awsコマンドが使ってくれます。

language: go
sudo: false
dist: trusty
before_install:
  - pip install --user awscli
  - export PATH=$PATH:$HOME/.local/bin
install:
  - go get -v github.com/spf13/hugo
script:
  - hugo
  - aws s3 sync public/ s3://juntaki.com --delete
notifications:
  email:
    on_failure: always

この段階でS3のエンドポイントURLからはサイトが見えるようになっているはずです。

Certificate ManagerでSSLの証明書を取得する

Certificate ManagerはAWS版Let's encryptです。無料です。
証明書取得の前に独自ドメインに対してRoute53のDNSサーバーを設定しておきます。次にCertificate ManagerでSSL証明書を作るときの認証のため、admin@ドメイン名でメールを受け取れるようにしておきます。3

Certificate ManagerでSSL証明書を取得します。
image

CloudFrontの設定

CloudFrontの設定で特に必要なのは以下の4つです。Distribution StatusがDeployedとなるまで30分くらい根気強く待ちます。失敗するとデプロイ待ちが長いので、慎重にやりましょう。

項目 設定内容
Alternate Domain Names 独自ドメイン
SSL Certificate CustomSSL
Custom SSL Client Support SNI
Origin Domain Name S3のエンドポイントURL

キャッシュのInvalidate

すぐに変更をCloudfrontまで反映したい場合に、CDN上のキャッシュを捨てるには下記のコマンドを実行します。

aws cloudfront create-invalidation --distribution-id <distribution-id>--paths '/*'

独自ドメインの設定

CloudFrontのGeneralタブから確認できるDomain Nameに対して、AレコードのAliasを設定します。

まとめ

Webサービスを作るインフラとして、AWSはなんでも揃っていて強力です。
作成したサイトと、ソースコードはこちらです。参考にしてください。
Blog: https://juntaki.com/
Github: https://github.com/juntaki/juntaki.com


  1. Wordpressのように動的に生成する場合や、レイテンシが大きい遠くのサーバに置く場合と比較して。単なるブログにはオーバースペック感がありますがAWSをいろいろ使ってみるのにはとっつきやすい題材です。 

  2. hugoのビルド時に--ugryURLを使えば、S3のバケットをOriginにしても問題ないです。ただ、URLが長くなるし、uglyと言われたら使いにくいですよね。 

  3. Zoho MailがWebからも使えてお手軽です。AWSでもAmazon SESなんてサービスもあるのか・・。 

m3dev
インターネット、最新IT技術を活用し日本・世界の医療を改善することを目指します
https://m3.recruitment.jp/engineer/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした