HUGO と AWS Amplify Console で静的サイトを構築する

December 21, 2019

AWS Amplify Console は、Web アプリケーションや静的サイトをホスティングできる Web サービスです。 リポジトリの変更をトリガーにして、React や Vue.js などの SPA や、HUGO や Gatsby などの静的サイトジェネレータのビルド・デプロイ・ホスティングができます。

この記事では、次の内容について説明します。

  • HUGO で作った静的サイトを AWS Amplify Console を使って、ビルド・デプロイする方法
  • ログの確認
  • HUGO のバージョン固定
  • Pull Request 単位でのプレビュー URL 生成

環境

  • Git
  • Hugo v0.58.2

AWS Amplify Console でサイトを構築する

HUGO でサイトを作る

  1. ビルドするサイトを作成します。サイト作成の詳細は HUGO で静的サイトを構築する を参照のこと。

    hugo new site amplify-console-sample
    cd amplify-console-sample
  2. テーマは、git submodule で追加します。 CodePipeline では submodule は利用できないとありますが、2019年12月21日現在、submodule でのテーマ追加でもビルドできました。

    Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn’t initialize them Problem: CodePipeline does not support git submodules. CodePipeline relies on the archive link API from GitHub, which does not support submodules. Possible fixes: Consider cloning the GitHub repository directly as part of a separate script. For example, you could include a clone action in a Jenkins script.

    参照元: Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn’t initialize them

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
  1. 記事を作成します。「contents」の下にファイルが作成されます。

    hugo new posts/my-first-post.md
  2. contents/posts/my-first-post.md を開き、draft フラグを false にします。

    ---
    title: "My First Post"
    date: 2019-03-26T08:47:11+01:00
    draft: false
  3. GitHub でリポジトリを作成し、GitHub にプッシュします。

    git remote add origin git@github.com:OWNER/REPOSITORY_NAME.git
    git add .
    git commit -m "first commit"
    git push -u origin master

AWS Amplify Console の設定

  1. AWS Amplify Console にアクセスします。

  2. [GET STARTED] を選択します。 01

  3. 接続するリポジトリを選択します(ここでは GitHub を選択します)。 02

  4. 接続する GitHub アカウントに対し、AWS Amplify を認可します。 03

  5. リポジトリとブランチを選択し、[次へ]をクリックします。 04

  6. ビルド構成の設定画面で、[次へ]をクリックします。 05

  7. 確認画面で問題なければ、[保存してデプロイ]をクリックします。 06

  8. デプロイが始まります。 06

  9. 「検証」ステータスまで成功すると、アクセス用の URL が生成されます。 08

  10. URL にアクセスすると、サイトが生成されていることを確認できます。

    https://BRANCH_NAME.RANDOM-LETTER.amplifyapp.com/

ログの確認

  1. 各プロセスのログを確認するには、Amplify Console 画面のブランチ名をクリックします。 09 01

  2. 確認したいプロセスのタブを選択し、「フロントエンド」でログが表示されます。 09 02

HUGO のバージョンを固定する

AWS Amplify Console でビルドする HUGO のバージョンを固定します。

  1. 左サイドバーの「アプリケーションの設定」から「ビルドの設定」を選択します。 10 01

  2. [Edit]をクリックします。 10 02

  3. [Add package version override]をクリックし、「Hugo」を選択します。 10 03

  4. バージョンを入力し、[保存]をクリックします。 10 04

  5. 次回以降のビルドから、指定したバージョンの HUGO でビルドできます。

PR 単位で Preview ページを作る

設定

Pull Request 単位で確認用の URL を作成します。

  1. 左サイドバーの「アプリケーションの設定」から「Previews」を選択します。 11 01 01

  2. [Enable previews]をクリックします。 11 01 02

  3. [Install GitHub app]をクリックし、接続している GitHub アカウントに AWS Amplify アプリケーションをインストールします。 11 02

  4. アカウントを選びます。 11 03

  5. 「Only selecto reposities」を選択し、インストールするリポジトリを選びます。 11 04 01

  6. [Install]をクリックします。 11 04 02

  7. AWS Amplify Console の画面に戻ります。Pull Request を出す対象のブランチを選び、[Manage]をクリックします。 11 05

  8. 「Enabled」にして、[確認]をクリックします。 11 06

  9. 「Preview Status」が Enabled になれば完了です。 11 07

動作確認

  1. マスタ ブランチに対して有効にしたので、マスタ ブランチに対する Pull Request を作成します。 11 09

  2. Pull Request を作成すると、「Previews」にその PR に対するビルドが行われ、ページ URL が生成されます。 11 09

  3. Pull Request 作成後のコミットについても、自動でビルドが実行されます。