【第1回環境立ち上げ編】基礎から学ぶJamstack構成のサイト開発

はじめに

はじめまして。
株式会社メンバーズ モダンフロントエンド研究会のかわにしです。

メンバーズでは急速に進化する生成AIと、次々と新しい技術が登場するモダンフロントエンドに取り組むエンジニアを増やすことを目的に、「モダンフロントエンド研究会」が設立され人材の育成や技術研究、社内外への普及活動に取り組んでいます。
そこで得た知識をブログという形で広く共有することにしました。

今回がこのシリーズの第一回目となります。今後シリーズを通じて、Astro + microCMS + AWSを使用したJamstackなポータルサイトの開発手法を紹介していきます。
その過程で、以下のことをお伝えする予定です。

• モダンなフロントエンド開発の環境構築

• microCMSの使い方

• Astroの使い方

• AWS Amplify、CodeCommitの使い方（CodeCommitは2024年7月に新規受付終了がアナウンスされましたが、2025年11月25日に一般提供（GA）へ復帰し、新規アカウントでもリポジトリを作成できます。※2026年8月時点）

• CI/CD

開発環境の構築から順を追って説明しますので、Jamstack初心者の方はもちろん、エンジニア初心者の方にもおすすめです。
今回は開発環境立ち上げ編として、Node.jsの導入からAstro立ち上げまでを行います。
開発完了までの過程はシリーズに分けて定期的に公開予定ですので、どうぞご期待ください。

まずはJamstackについて学びたい方は「非エンジニアにもわかるJamstack - ヘッドレスCMS導入時によく採用されるJamstackとは？」を是非ご覧ください！

前提

• 本開発ではVisual Studio Code（以下VSCode）を使用します。（他のエディターを使っていただいても問題ありません。）

• 開発にはmacOSを使用しています。（Windowsで実行する際に別途Windows用の手順が必要な場合があります。）

• シェルはzshを使用しています。

STEP1 miseでNode.jsをインストール

Node.jsはJavaScript実行環境です。
Node.jsは主にサーバーサイドのJavaScript実行環境として、ウェブサーバーを実行したり、フロントエンドのJavaScript開発環境に利用されています。

Astroの開発ではフロントエンドの開発環境としてNode.jsを使用します。
また、Node.jsを直接インストールすると、プロジェクトごとにNode.jsのバージョンを変えたい場合に困るので、今回はバージョン管理ツールmiseを経由してNode.jsをインストールします。
ターミナルからインストールを行います。

1. miseをインストール

curl https://mise.run | sh

Copy

2. miseがインストールできたか確認する

~/.local/bin/mise --version

Copy

3. シェルでmiseを有効化する

echo 'eval "$(~/.local/bin/mise activate zsh)"' >> ~/.zshrc

Copy

4. 設定を読み込み直す

source ~/.zshrc

Copy

5. 動作を確認する

mise doctor

Copy

6. Node.jsのLTS（長期サポート）をインストール

mise use node@24

// 管理中のツールを確認
mise ls

Copy

7. Node.jsがインストールされたか確認

node -v

Copy

8. npmのバージョンを確認

npm -v

Copy

参考サイト：https://mise.jdx.dev/getting-started.html

補足

Node.jsのバージョン管理ツールは、miseの他にもnvm、n、fnmなどがあります。
miseはmacOS・Linuxに加えてWindowsも正式にサポートしているため、OSを問わず同じ設定ファイルで運用できます。

STEP2 Astroのセットアップ

プロジェクトディレクトリ

プロジェクトディレクトリを任意の場所に任意の名前で作成します。
そして、VSCodeを起動し、「開く...」から先ほど作成したプロジェクトディレクトリを選択します。
今回はプロジェクトディレクトリ名を「jamstack-portal」としました。

1. プロジェクトディレクトリを作成

2.プロジェクトディレクトリに移動

Astroをインストール

1. VSCodeのターミナルでAstroをインストール

npm create astro@latest

Copy

2. 続いてのプロジェクトのセットアップはこのようにしました。

1. Where should we create your new project?（プロジェクトの場所の設定）

   プロジェクトディレクトリ直下に作成するので、「./」とします。

2. How would you like to start your new project?（初回のディレクトリ構成の設定）

   A basic, helpful starter project (recommended) / Use blog template / Use docs (Starlight) template / Use minimal (empty) template の4つの選択肢があります。

   今回はAstroが用意したサンプル構成のA basic, helpful starter project (recommended)を選択します。

3. Install dependencies? （依存関係のインストールの可否）

   インストールするのでYesを選択します。

4. Initialize a new git repository?（gitの初回リポジトリの設定）

   次回の記事にてAWSのcode commitでリポジトリを制作するため、今回はNoを選択します。

3.ローカル開発サーバーの立ち上げ

npm run dev

Copy

4. ブラウザでAstroのウェルカムページが開いたら成功です

http://localhost:4321/

Astroの環境構築により生成されるファイル

先ほどのセットアップでA basic, helpful starter project (recommended) を選択するとこのような構成のファイルが生成されます。

• astro

  • Astroが自動生成する作業用フォルダ。型情報やコンテンツコレクションのキャッシュが置かれる。基本的に触ることはなく、Git管理の対象外。

• .vscode

  • extensions.json - オススメのVSCodeの拡張機能を設定する。

  • launch.json - VSCodeのデバッグ機能を使うための設定。

※複数人で開発をする場合、.vscodeフォルダもGit管理とすることでチーム間でVSCodeの設定を共有することができます。

• public

  • public配下にあるフォルダはデプロイ時に何も処理をせずにルートに配置される。（ファビコンなど）

• src

  • assets - 画像などAstroによる最適化の対象となるファイルを置く。publicとは異なり、ビルド時に圧縮やリサイズが行われる。

  • components - 再利用可能なUIパーツ群。

  • layouts - 再利用可能なレイアウト（Header、Footerなど）。

  • pages - webサイトのページのルーティングを行い、pages配下のディレクトリ構造およびファイル名が各ページのURLと連動する。.astro、.md、.mdx、.htmlファイルに対応している。

• .gitignore

  • gitの管理対象外のデータを設定する。

• astro.config.mjs

  • astroのconfig設定のファイル。astroのインテグレーションの設定や立ち上げポート番号の設定などがある。

• tsconfig.json

  • セットアップで設定したTypeScriptのルールレベルが設定されている。ここで変更が可能。

• dist

  • 立ち上げ直後はないが、npm run buildによってデプロイするためのファイル群がdistフォルダ配下に生成される。

STEP3 ローカル環境でビルド

ローカルでビルドを実行します。ビルド後はdistフォルダが生成され、この内容はpreviewで表示ができます。

npm run build

Copy

npm run preview

Copy

次回の予告

第1回目はここまでです。
今回はNode.jsとAstroの導入を行いました。Node.jsはJamstack開発にとどまらず、SSRのフロントエンドフレームワークやバックエンドのサーバーとして使用ができるので、開発の幅が広まります。
VSCodeは設定や拡張機能が用意されており、個人やチームにあった設定ができます。こちらについては今後の記事で触れる予定です。

次回の第2回目は、「Node.jsのバージョンの話とGit導入について」です。
ご興味のある方は次回も是非ご覧ください。