NIki/ Blog & Tools

Home / Blog

Site

このサイトの構成と使用しているツール・環境

  • #Astro
  • #AWS
  • #GitHub
  • #個人サイト

このサイトの構成と使用しているツール・環境

このサイト「NIKI’s Workshop」は、FFXIVやMTGなど趣味の記録や、自分で作ったツールを置くために作った個人サイトです。

同時に、WebやAWSについて実際に手を動かしながら学ぶための場所でもあります。

今回は最初の記事として、このサイトをどのような環境で作っているのか、どんなサービスやツールを使っているのかをまとめておきます。

自分自身が後から、

これ、どうやって作ったんだっけ？

となったときの備忘録も兼ねています。

サイト全体の構成

現在は、大まかに次のような構成になっています。

ローカルPC
  │
  │ Astroでサイトを制作
  ▼
Git / GitHub
  │
  │ Push
  ▼
GitHub Actions
  │
  │ OIDCでAWSへ認証
  ▼
Amazon S3
  │
  ▼
Amazon CloudFront
  │
  ▼
独自ドメイン

Webサイトそのものは静的サイトとして作っています。

常時動作するWebサーバーを用意するのではなく、AstroでHTMLを生成してAmazon S3へ配置し、Amazon CloudFront経由で配信する方式です。

個人サイトなので、できるだけシンプルで、維持費が小さく、管理するサーバーも少ない構成を目指しています。

Astro

サイト制作にはAstroを使用しています。

最初はHTMLを直接書いていましたが、ブログや自作ツールが増えていくことを考えてAstroへ移行しました。

Astroでは、開発中は .astro ファイルを編集します。

src/
├─ components/
├─ layouts/
└─ pages/
   ├─ index.astro
   └─ blog/
      └─ index.astro

.astro はそのまま公開するファイルではありません。

ビルドすると、

.astro
  ↓
Astroでビルド
  ↓
HTML / CSS / JavaScript
  ↓
dist/

という形で、Webブラウザから配信できる静的ファイルが生成されます。

開発時のコマンド

ローカルの開発サーバーを起動します。

npm.cmd run dev

公開用のファイルを生成します。

npm.cmd run build

自分のWindows環境ではPowerShellの実行ポリシーとの兼ね合いから、npm ではなく npm.cmd を使用しています。

Git / GitHub

ソースコードはGitで管理し、GitHubに保存しています。

基本的な流れは、

ファイルを編集
 ↓
ローカルで確認
 ↓
GitへCommit
 ↓
GitHubへPush

です。

Gitの操作にはGitHub Desktopも使用しています。

このサイトでは、GitHub側のソースコードをサイトの「正本」として扱い、公開先を直接編集する運用は基本的に行わない方針です。

GitHub Actions

GitHubへPushした後の公開処理にはGitHub Actionsを使用しています。

GitHubへPush
 ↓
GitHub Actions起動
 ↓
Astroをビルド
 ↓
distをAWSへデプロイ
 ↓
CloudFrontから公開

これによって、毎回手作業でファイルをアップロードする必要がなくなります。

AWS

このサイトの公開基盤にはAWSを使用しています。

主に使用しているサービスは次の通りです。

Amazon S3

Astroが生成した静的ファイルの配置先として使用します。

S3自体を一般公開するのではなく、CloudFrontを経由してサイトを配信する構成にしています。

Amazon CloudFront

S3に配置したWebサイトをユーザーへ配信するために使用しています。

Amazon Route 53

独自ドメインのDNS管理に使用しています。

AWS Certificate Manager（ACM）

HTTPS通信に必要な証明書の管理に使用しています。

AWS IAM / OIDC

GitHub ActionsからAWSへデプロイするための認証に使用しています。

長期間使用するアクセスキーをGitHubへ保存するのではなく、OIDCを使ってGitHub ActionsからAWSへ認証する構成にしています。

なぜこの構成にしたのか

現在のサイトはブログやHTML、CSS、JavaScriptなどの静的コンテンツが中心です。

そのため、

Astro
+
Amazon S3
+
Amazon CloudFront

という静的サイト向けの構成にしました。

この構成なら、WebサーバーのOSやApacheなどを自分で管理する必要がありません。

アクセスが少ない個人サイトでも常時サーバーを起動しておく必要がないため、運用コストを抑えやすい点もメリットです。

AWSを勉強していることもあり、単にサイトを公開するだけではなく、実際にAWSのサービスを組み合わせて運用すること自体もこのサイトの目的の一つです。

セキュリティについて

このサイトでは、AWSを利用していることや使用しているサービスなど、技術的な構成の一部を公開しています。

一方で、セキュリティ上公開する必要がない情報については掲載しない方針です。

例えば、以下の情報は公開しません。

  • AWSアカウントを特定できる情報
  • IAM Roleなどの具体的な識別情報
  • S3などの具体的なリソース名
  • APIの実際のエンドポイント
  • 認証情報
  • 内部設定や詳細なセキュリティ設定

「どんな技術を使って、なぜその構成にしたのか」は公開しつつ、実際の環境を特定したり攻撃したりするための手掛かりになる情報は出さない、という線引きで運用していく予定です。

現在使っている主なツール

用途使用しているもの
OSWindows
サイト制作Astro
JavaScript実行環境Node.js
パッケージ管理npm
ソース管理Git
リポジトリGitHub
Git操作GitHub Desktop
自動デプロイGitHub Actions
静的ファイル保存Amazon S3
コンテンツ配信Amazon CloudFront
DNSAmazon Route 53
HTTPS証明書AWS Certificate Manager
AWS認証・権限管理AWS IAM / OIDC

今後やりたいこと

今後は、

  • ブログ記事の追加
  • FF14やMTGなどの記事カテゴリ
  • 自作ツールの公開
  • FF14のレイド履歴書
  • サイト内のLikeやPV表示
  • 定期処理やAPIを使った動的機能

などを少しずつ追加していく予定です。

動的な機能についても、必要になった段階でAWS LambdaやAmazon API Gateway、Amazon DynamoDBなどのサーバーレスサービスを利用することを検討しています。

最後に

このサイトは完成したシステムを公開するだけの場所ではなく、自分が実際に試したことや学んだことを残していく場所でもあります。

「なぜこの構成にしたのか」「どこで困ったのか」「どう解決したのか」も含めて記録していけば、後から自分で見返したときにも役に立つはずです。

まずはこの構成をスタート地点として、少しずつ育てていきます。

← Blog一覧に戻る