Hugo + AWS Amplifyで最速でブログの環境を作る

 Posted on July 22, 2019  |  4 minutes  |  1913 words  |  Yu Ichijo

いきなりお久しぶりという失態をかましています

最初の投稿からもう１ヶ月経とうとしております。 お久しぶりです。クソザコエンジニアのjaramonです。

初めてブログを作った事もあり、今までずーっとGoogle Search Consoleと戦っておりました。 これで多分大丈夫だろうと思い、放置しては確認して。。。を繰り返して１ヶ月。

もういいからブログ書こう （まだ正しく設定できているか分からない。）

今回はこのブログの構成をサクッと紹介したいと思います

タイトルにもある通り、このブログは

  • AWS Amplify（ウェブアプリケーション）
  • Hugo（静的サイトジェネレータ）
  • AWS Route53（ドメイン）
  • Github（コード）

で作成しています。

Githubのリポジトリ作成

ブログ用のリポジトリを作成します。 そのリポジトリでHugoのコードを管理しましょう。

Hugoのインストール

私はMacなので、Homebrewでインストールします。

$ brew install hugo

Hugoのテーマの取得 + 設定 + 動作確認

Hugoのテーマを決めます。（https://themes.gohugo.io/）

テーマを決めたら、Readmeに沿ってインストールしましょう。 インストールする際、 git submodule add を促してくることがありますが、レポジトリからソースコードを取得する際、サブモジュールは取得できないらしいです。 大人しく git clone しましょう。

（※個人的な感想ですが、ここが一番時間かかります。迷わずに決め切りましょう。）

テーマをインストールしたらテーマに合わせてHugoの設定をしていきましょう。 基本的に config.toml を編集するだけで十分かと思います。

動作確認が完了したらpushしておきます。

AWS Route53の設定

今回はドメインをAWSで取得してみました。 もし別のサービスでドメインを取得している場合は、ネームサーバをAWSにする設定をしましょう。

AWS Amplify アプリの作成

今回のメインです。

  1. AWS Amplify コンソールで、新しいアプリを作成します。リポジトリを聞かれるので、↑のGithubのリポジトリを設定して認証も通します。
  2. branchは無難にmasterを選択します。
  3. ビルド手順を指定します。ここで、フレームワークが自動的にHugoとなっています。ビルドのコマンドも自動で作成されました。すごい！！！
version: 0.1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

これでビルドとデプロイが始まり、無事に完了するはずです。

# Starting phase: build
# Executing command: hugo
2019-06-23T15:12:17.496Z [WARNING]: Error: "/codebuild/output/src405079418/src/blog/themes/beautifulhugo/layouts/partials/head.html:64:1": parse failed: template: partials/head.html:64: function "hugo" not defined
2019-06-23T15:12:17.498Z [ERROR]: !!! Build failed
2019-06-23T15:12:17.498Z [ERROR]: !!! Non-Zero Exit Code detected
2019-06-23T15:12:17.498Z [INFO]: # Starting environment caching...
2019-06-23T15:12:17.498Z [INFO]: # Environment caching completed
Terminating logging...

そんな甘くなかった。

調べたところ、AmplifyのHugoのバージョンが古く、 hugo という関数が実装されていないとのことでした。 ビルドアクティビティを見ると、プロビジョンという項目があります。

# Use the standard Amazon Linux base, provided by ECR/KaOS
# It points to the standard shared Amazon Linux image, with a versioned tag.
FROM 137112412989.dkr.ecr.us-west-2.amazonaws.com/amazonlinux:2
MAINTAINER Amazon AWS

# Framework Versions
ENV VERSION_NODE_8=8.12.0
ENV VERSION_NODE_10=10.16.0
ENV VERSION_NODE_12=12
ENV VERSION_NODE_DEFAULT=$VERSION_NODE_10
ENV VERSION_RUBY_2_4=2.4.6
ENV VERSION_RUBY_2_6=2.6.3
ENV VERSION_BUNDLER=2.0.1
ENV VERSION_RUBY_DEFAULT=$VERSION_RUBY_2_4
ENV VERSION_HUGO=0.55.6
ENV VERSION_YARN=1.16.0
ENV VERSION_AMPLIFY=1.7.2

そして、そのHugoのインストールも自動でやってくれちゃってます。困った。 というわけで、パワーで解決してみました。それがこちら。

version: 0.1
frontend:
  phases:
    build:
      commands:
        - rm -rf /user/bin/hugo
        - wget https://github.com/gohugoio/hugo/releases/download/v${VERSION_HUGO}/hugo_${VERSION_HUGO}_Linux-64bit.tar.gz
        - tar -xf hugo_${VERSION_HUGO}_Linux-64bit.tar.gz hugo -C /
        - mv ./hugo /usr/bin/hugo
        - rm -rf hugo_${VERSION_HUGO}_Linux-64bit.tar.gz
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

Hugoの再インストールをAmplify上で唯一編集ができるビルド設定で行ないました。 VERSION_HUGOは環境変数で渡しています。

力こそパワー

20分ほど待つと無事に終わると思います。内部的にはCloudFrontを作っているみたいなので、時間は結構かかります。 アクセス用のURLが表示されていますので、アクセスしてみましょう。

AWS Amplify ドメインの設定

ドメイン管理でカスタムドメインを追加しましょう。 これはAWS Route53に登録したドメインです。 他にサブドメインで運用している場合は、サブドメイン管理から追加しましょう。

私の場合は、 https://jaramon.com と https://www.jaramon.com を https://blog.jaramon.com に飛ばしたかったので、サブドメインを追加しました。 リダイレクトの設定が別であるのですが、それだけだとダメみたいです。 また、追加するとRoute53に自動でいくつかのレコードが作られます。

後はリダイレクトの設定を追加すれば完了です！！

完走した感想

最初はS3、CloudFrontを自作しようかと思ったのですが、CloudFrontは作成も削除も時間がかかるので、一箇所間違えるだけでとんでもない時間がかかります。（２敗） 心が折れかけた時に、AWS Amplifyを使ってみたところ、とてつもなく簡単にできたので感動しました。 まだHugoには慣れてないので、時間がある時にHugoの方をいじっていこうかと思います。

そして、この記事をdeployした時に気づきました。AWS AmplifyのHugoのバージョンが上がっていることに。 ビルド設定のcommandsにhugoと書くだけで問題なくなりました。 力こそパワーとはなんだったのか。

AWS  blog