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

はじめに

はじめまして。
株式会社メンバーズ Jamstack研究会のかわにしです。

メンバーズではJamstackやヘッドレスCMSに取り組むエンジニアを増やすことを目的に「Jamstack研究会」が設立され、Jamstackの勉強会や研究を行っています。そこで得た知識をブログという形で広く共有することにしました。
今回がこのシリーズの第一回目となります。今後シリーズを通じて、Astro + microCMS + AWSを使用したJamstackなポータルサイトの開発手法を紹介していきます。
その過程で、以下のことをお伝えする予定です。

• モダンなフロントエンド開発の環境構築
• microCMSの使い方
• Astroの使い方
• AWS Amplify、CodeCommitの使い方（CodeCommitの新規利用の停止がアナウンスされました。よって、本記事にて内容を変更する可能性があります。※2024年8月1日時点 AWS DevOps Blog）
• CI/CD

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

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

前提

• 本開発ではVisual Studio Code（以下VSCode）を使用します。（他のエディターを使っていただいても問題ありません。）
• 開発にはmacOSを使用しています。（Windowsで実行する際に別途Windows用の手順が必要な場合があります。）
• シェルはzshを使用しています。

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

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

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

1. Voltaをインストール

curl https://get.volta.sh | bash

Copy

2. Voltaの環境変数（VOLTA_HOME）の設定

echo 'VOLTA_HOME=$HOME/.volta' >> ~/.zshrc

Copy

3. 環境変数のPATHにVoltaのパスを追加（voltaコマンドが使えるようになる）

echo 'export PATH=$VOLTA_HOME/bin:$PATH' >> ~/.zshrc

Copy

4. zshrcの更新

source ~/.zshrc

Copy

5. voltaコマンドが使用できるか確認（例はvoltaのバージョン確認です）

volta -v

Copy

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

volta install node@lts

Copy

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

node -v

Copy

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

npm -v

Copy

参考サイト：https://docs.volta.sh/guide/getting-started#windows-installation

補足

Node.jsのバージョン管理ツールは、Voltaの他にもnvm、n、fnm、nodistなどがあります。
WindowsであればVoltaがよく使われています。

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?（初回のディレクトリ構成の設定）

   Include sample files (recommended) / Use blog template / Emptyの3つの選択肢があります。

   今回はAstroが用意したサンプル構成のInclude sample files (recommended)を選択します。  

3. Do you plan to write TypeScript?（TypeScriptを導入の可否）

   TypeScriptを導入するのでYesを選択します。

4. How strict should TypeScript be?（TypeScriptルールの厳しさの設定）

   Strict (recommended) / Strictest / Relaxed の3つの選択肢があります。

   今回はStrict (recommended）を選択します。

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

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

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

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

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

npm run dev

Copy

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

http://localhost:4321/

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

先ほどのセットアップでInclude sample files (recommended) を選択するとこのような構成のファイルが生成されます。

• .vscode
  • extensions.json
    • オススメのVSCodeの拡張機能を設定する。
  • launch.json
    • VSCodeのデバッグ機能を使うための設定。
  • settings.json
    • VSCodeのオプションを設定する。

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

• public
  • public配下にあるフォルダはデプロイ時に何も処理をせずにルートに設定される。（ファビコンなど）
    compounents
    • 再利用可能なUIパーツ群。
• layout
  • 再利用可能なレイアウト（Header、Footerなど）。
• pages
  • webサイトのページのルーティングを行い、pages配下のディレクトリ構造およびファイル名が各ページのURLと連動する。
  • .astro、.md、mdx、htmlファイルに対応している。
• env.d.ts
  • グローバルの環境変数の型を設定する。基本的に触ることはない。
• .gitignore
  • gitの管理対象外のデータを設定する。
• astro.config,mjs
  • astroのcongig設定のファイル。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導入について」です。
ご興味のある方は次回も是非ご覧ください。