websiteの構成を更に変えました

去年の6月にWordPressを脱却しHugoになった当サイトですが、更に構成を変えました。
せっかくなので内容を説明します。そんなに難しくなかったのでwebにあまり詳しくない音屋の方にも届きますよう・・・

(2024/08/22追記: 現在はastroに移行済み)

これまでの構成について#

ロリポップレンタルサーバ
- 10年ほど前に安定したサーバを求めて契約。
- その後WordPressが使いたくてプランをアップグレードし、去年まで運用していました。
- DTM関連データのバックアップ用途としても使用していました。

ムームードメイン
- ロリポップ契約と同時に oto-hako.net ドメインを取得。
- 現在も続投。
Hugo
- 「静的サイトジェネレータ」(以下SSG)のひとつ。
- MarkDown記法で書いたテキストファイルをhtmlに変換してくれます。簡単です。
- SSGは他にも種類があり、Hugoは若干時代遅れな気がしないでもないですが、使っているテーマがいい感じなので採用。
github
- Hugoの中身のmarkdownファイルのバージョン管理用として使用。
デプロイ用Action
- MarkDownファイルをmainブランチにpushするとロリポップに自動反映されるGitHub Actions。
- こちらの記事を参考にしました。
Tokusetsu 3
- アルバム特設サイト用に使用。
- そよもぎはテンプレートだけ拝借して、自前でconfigファイルとページ変換用のスクリプトを書いて運用しています。
- 変換されたページをHugo内のディレクトリに入れることで、Hugoの枠組みに乗せることができます。
- 現在は新しいTokusetsu 4 も公開されているようなので、これから始める方はそちらの方がよいでしょう。
  - (というかデザインもいい感じなので自分も移行したいです。)

今回変えたポイントについて#

ロリポップ -> netlify + Amazon s3 になりました。
WordPressを使わなくなったため、ロリポップを続投する意義が薄くなったためです。

netlifyは静的サイト置き場に特化したサービスで、HugoなどのSSGと相性がいいです。ベーシックな使い方であれば無料です。
Hugoのテンプレートが用意されているため、デプロイはnetlify側で全部やってくれます。GitHub Actionsを用意する必要もないです。
ドメインはそのまま使うため、設定はこちらの記事を参考にしました。

音声ファイル置き場 + DTM関連データのバックアップ用途はAmazon s3に移行しました。
(googleドライブでもいいんですが、他の用途でも容量食いそうなので分けてます。)
s3は有料ですが、基本的には値段がデータ容量に比例するのでそこまで費用はかからないはず…！

また、音声ファイル置き場のURLを簡素にするため、こちらの記事を参考にNetlify上でリダイレクトの設定をしました。

netlify.toml

[[redirects]]
  from    = "/files/*"
  to      = "http://<バケット名>.s3.<リージョン>.amazonaws.com/files/:splat"
  status  = 200
  force   = true

このように設定することで、https://oto-hako.net/files/vo/shayou_off.mp3 みたいなurlでアクセスするとs3にあるファイルを参照してくれます。

Amazon s3を使うまでの流れ#

rootアカウント作って支払い用のクレカ情報とか入力する
- rootアカウントの2要素認証設定する (できるだけセキュアに)
操作用のユーザ作る
- 「IAM」か「IAM Identity Center」を使います。
- IAM Identity Centerの方がセキュアですが、毎回認証情報が変わります。ブラウザにログインする用途はこっちを使ったほうがいいでしょう。
- IAM は認証情報が固定のため上記よりはセキュリティレベルが低いです。
  - 操作権限を絞って特権アカウントと使い分けるのがよいでしょう。
  - 自分はs3に直接アクセスできる権限だけ付与したユーザを作り、cyberduckとかrcloneからアクセスできるようにしました。
公開用のバケットを作る
- バケットを公開するには「ブロックパブリックアクセス」のチェックボックスをすべてoffにしておきます。
- 更にバケットポリシーに以下を設定するとデータ公開の準備が整います。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:getobject",
            "Resource": "arn:aws:s3:::<バケット名>/*"
        }
    ]
}

まとめ#

netlify + 独自ドメイン + s3 + Hugo (+ github)
ドメインとs3の部分だけ有料

誰かの参考になれば幸いです。ではまた！