HugoのサイトをAWSのS3に簡単にアップロードするまで

ローカルのものをAmazon Web Services(以下AWS)のストレージサービスであるS3に コマンド一発でアップするまでをざっくりと記載します。

yarn run deploy

で、サイトのビルドとアップロードを自動化できるようにします。

前提

  • OSはMac
  • Homebrewインストール済み
  • Hugoの環境は作成済み
  • AWSの AWS_ACCECC_KEY_IDAWS_SECRET_ACCESS_KEY は取得済みであること

用意するもの

両方ともコマンドラインツールです。

yarn : フロントエンド系のパッケージマネージャ

awscli : AWSをコマンドで操作するツール

yarnのインストール

brew install yarn

awscliのインストール

brew install awscli

awscliの設定

以下のコマンドを実行

aws configure --profile AWSプロファイル名(あとで使う)

すると以下が表示されてくるので、各項目を入力します

AWS Access Key ID [None]: 認証情報のAWS_ACCESS_KEY_IDをコピペ
AWS Secret Access Key [None]: 認証情報のAWS_SECRET_ACCESS_KEYをコピペ
Default region name [None]: ap-northeast-1 # ap-northeast-1で東京
Default output format [None]: # 入力不要

これで、 ~/.aws/config~/.aws/credentials というファイルに設定が追記されます

package.jsonを作成

yarnが使う設定ファイルのようなもの

作成

cd /Hugoの/ディレクトリ
yarn init -y
ls -la  # package.jsonというファイルができているのを確認する

初期状態のpackage.jsonの中身

{
  "name": "ディレクトリの名前",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

package.jsonを書き換える

{
  "name": "ディレクトリの名前",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "hugo server -t テーマのフォルダ名",
    "deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
  }
}

6-9行目の scripts 内に記述したものは yarn run startyarn run deploy などで簡単に実行できます。

オプションの意味

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
           Hugoをビルド(publicを生成)

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                      ^^
                                      Hugoのビルドが成功したらあとに書いたコマンドを実行するよ

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                         AWSのS3に<AWSプロファイル名>でアクセスするよ

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                                                            ^^^^
                                                                            ディレクトリを同期するよ

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                                                                 ^^^^^^^^
                                              ローカルで消えてるものはAWS上でも削除するよ

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                                                                           ^^^^^^^^
                                                  コピー元のディレクトリHugoの場合は./public/で固定

"deploy": "hugo -t テーマのフォルダ名 && aws s3 --profile AWSプロファイル名 sync --delete ./public/ s3://バケット名/"
                                                                                                    ^^^^^^^^^^^^^^^^
                                                                                             コピー先のS3バケット名

実行

以降は以下のコマンドを実行すると、ビルドとアップロードを自動で実行してくれます。

yarn run deploy

Makefileを作る、スクリプトを書いてPATHに通すなど色々方法はあるのですが、 yarn を使った方法が一番お手軽かつ、そのディレクトリ(プロジェクト)内で のみの設定になるので、影響範囲が限定されて安全ですね。