Skip to content

Amplifyを使って、Hugoで作成したWebページを公開する(3)

   

はじめに

前回の記事で、HugoプロジェクトをGitHubにアップロードしました。今回は、AWS Amplifyを使って、Hugoで作成したWebページを公開するところまで整理したいと思います。

第1回の記事でも書きましたが、従来はS3のWebホスティング機能とRoute53を利用していました。この手法ではWebページのHTTPS化に対応することが容易ではないため、Amplifyを使うことに決めました。

今回の作業では、Amazon Web Services(AWS)のアカウントが取得済みであることと、独自ドメインがAWSのRoute53の管理下に置かれていることを前提に進めます。

AWS Amplifyを使って、Webページを公開する

想定要件

以下の要件を想定して、整理します。

項目名 要件
Hugoプロジェクト名 study-hugo
GitHubリポジトリ名1 study-hugo
公開用のURL2 https://study.rkarsnk.jp/
Hugo用テーマ inkblotty
AWSのリージョン3 東京リージョン

AWS Amplifyでのデプロイ

AWSが提供しているサービスは多数あるため、目的のサービス名がはっきりしている場合は、サービス名で検索することをオススメします。

図1のように、検索欄に「Amplify」と入力すると、サービスのメニューが表示されます。

図1 Amplifyを検索

「AWS Amplify」を選択して、Amplify コンソールを開きます。

図2の画面からは、すでに一つのWebページ(このblogです)がデプロイされていることが分かります。

Amplifyでは、デプロイするアプリケーションに関して、Host Web Appと App backendの2種類が提供されています。Hugoを利用したWebページはHost Web Appを使用してデプロイします。

図2 Amplify コンソール

右上のNew appから「Host web app」を選択します。

デプロイしたいWebページのソースコードが置いたるリポジトリサービスを選択します。ここでは、GitHubを選択します。AmplifyとGitHubの連携が初めての場合、サービス間連携の許可を求めるメッセージと共にGitHubの認証情報が求められます。

図3 リポジトリサービスの選択

GitHubとの連携が完了したら、デプロイするリポジトリとブランチを選択します。ここでは一覧から「study-hugo」を選択します。また、ブランチ名はmainを指定します。

図4 リポジトリブランチの選択

リポジトリブランチの設定が完了すると、ビルド設定の構成を行います。

図5のように、Hugoプロジェクト用のビルド設定が自動的に設定されます。

図5 ビルド設定の構成

このままでは、ビルド時にgit submoduleで追加したinkblottyテーマのソースコードが取得されないため、以下のようにビルドスクリプトを修正します。ビルドスクリプトの修正後、「次へ」を選択します。

version: 1
frontend:
  phases:
    build:
      commands:
        - git submodule update
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

図5の確認画面で内容に問題なければ、「保存してデプロイ」を選択してデプロイを開始します。デプロイ作業には数分かかります。

図5 確認

作業の進捗は、図6のように表示され、プロビジョンから検証までの工程が完了すれば、デプロイ作業が完了します。

図6 デプロイ完了

デプロイされたWebページを独自ドメインで公開する

Amplifyでデプロイされた直後は、https://main.xxxxxxxx.amplifyapp.comのURLが設定されています。カスタムドメインの設定をすることで、公開用の独自ドメインを含むURLで公開することができます。

アプリの設定カテゴリから「ドメイン管理」を選択します。図7の画面が表示されるので、右上の「カスタムドメインの追加」を選択します。

図7 ドメイン管理

図8のカスタムドメインの追加画面が表示されます。 ルートドメインに自分が管理するドメインを入力し、サブドメインの設定欄でExclude Rootを設定し、study.rkarsnk.jpがmainになるように設定します。

図8 カスタムドメインの追加

保存を選択すると、カスタムドメイン設定の処理が自動的に進みます。処理内容としては、SSL証明書の発行、AWS CloudFrontの設定、Route53へのサブドメインの登録が行われます。

この処理には少し時間かかるため、コーヒーでも飲んで一服してください。

図9 カスタムドメイン設定の進捗確認(1)

図10のように、Custom DomainのStatusがAvailableになれば完了です。

図10 カスタムドメイン設定の進捗確認(2)

動作確認

ブラウザを使用して、公開用URLにアクセスします。図11のようにWebページにアクセスできるようになりました。

図11 公開後のページ

以上で、Hugoで作成したWebページを公開するための作業が完了となります。

おわりに

3回にわけて、AWS Amplifyを使って、Hugoで作成したWebページを公開する作業について整理しました。

最後まで読んでいただきありがとうございます。


  1. GitHubアカウントは作成済み。 ↩︎

  2. ドメインは取得済み。 ↩︎

  3. AWSアカウントは作成済み。 ↩︎

関連記事

  1. Amplifyを使って、Hugoで作成したWebページを公開する(2)
  2. Amplifyを使って、Hugoで作成したWebページを公開する(1)