こんにちは。Enabling team の山本です。

みなさんは花粉症対策されていますか🌲？

この記事の1週間前から、花粉症対策として、「フラクトオリゴ糖」を毎日接種していました。
「フラクトオリゴ糖」は、サトウキビからできたハチミツのような液体です。

くしゃみや鼻水といった花粉症の諸症状は、かなり落ち着いてきており、「フラクトオリゴ糖」効果を信じ始めました。

プラシーボ効果の可能性もあるため、引き続き接種を続けます。

さて、今回は、Astro を使った静的サイトの構築について書いていきます。

ご存じのとおり、

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

引用：公式ページ

Vue や Svelte、Solid など、今をときめく Framework 群に対応したスーパー Framework です。（主観）

また、The Top 100+ Developer Tools 2022 でも取り上げられているとおり、Developer 界隈で注目度の高い Tool でもあります。

と言いましても、「Astro を使ってみたいから❗️」という理由で構築するのは、構築後の運用で負債になる可能性があります。

今回構築するのは、システム管理規程です。外部に公開するものではなく、内部向けのサイトです。

Astro を選択した理由は、以下のとおりです。

メンテナンス性。
- 規約を追加・更新していく上で、編集が容易なフォーマットが望ましい。
  - Markdown は、非 Developer でも簡単に文章を修正できる。
アクセス制限の必要性。
- 内部文書であるため、サイトへのアクセスを制限する必要がある。
  - Identity-Aware Proxy を設定することで Group Account でアクセスを制限できる。

TL;DR

Astro は、非エンジニア向けの静的サイトを簡単に構築できます。もちろん、React も併用できます。
Astro は、独特の記法であるため、慣れが必要です。これは、どの Framework にも共通すると思います。
Astro は、Docs が充実しており、初めての人でも比較的簡単に実装できます。

構成

今回の構成です。

構築

Create project

以下の command で雛形を作成しました。

pnpm create astro@latest
cd hoge-contents    # hoge-contents は Project 名
pnpm up             # dependency の解決

cfce0f642bfe:/workspaces/hoge-terms-1# tree
.
├── README.md
├── HOGE_TERMS.drawio.svg
├── cloudbuild.yaml
├── cytonn-photography-n95VMLxqM2I-unsplash.jpg
└── developer-contents
    ├── Dockerfile
    ├── README.md
    ├── astro.config.mjs
    ├── nginx.conf
    ├── node_modules
    │   ├── astro -> .pnpm/astro@2.1.3/node_modules/astro
    │   ├── prettier -> .pnpm/prettier@2.8.4/node_modules/prettier
    │   └── prettier-plugin-astro -> .pnpm/prettier-plugin-astro@0.7.2/node_modules/prettier-plugin-astro
    ├── package.json
    ├── pnpm-lock.yaml
    ├── public
    │   ├── assets                           # Add
    │   │   └── release-flow.png             # Add
    │   ├── favicon-196.png                  # Add
    │   └── favicon.svg
    ├── src
    │   ├── components
    │   │   └── Card.astro
    │   ├── env.d.ts
    │   ├── layouts
    │   │   ├── ContentsLayout.astro         # Add
    │   │   └── Layout.astro
    │   └── pages
    │       ├── contents                     # Add
    │       │   ├── architecture.md          # Add
    │       │   ├── document-guideline.md    # Add
    │       │   ├── on-call.md               # Add
    │       │   ├── release.md               # Add
    │       │   └── security.md              # Add
    │       └── index.md                     # Add
    └── tsconfig.json

12 directories, 24 files
cfce0f642bfe:/workspaces/hoge-terms-1#

Start Astro

ローカルでテストする場合は、以下の command を terminal で実行します。

pnpm run dev

Dockerfile

FROM node:lts AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --mode custom

FROM nginx:alpine AS runtime
ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html

まとめ

規約ページの構築について書きました。
現在の Frontend の技術 Stack は、移り変わりが早く、どの Framework を使ったとしても、陳腐化・負債化は避けれないと思っています。
そういう意味で、ほとんどの　Framework に対応している Astro は、全方位で対応できる強みがあると思います。
サービス構築に関わる身として、最適な Architecture を描き、構築するためにも、 Frontend/Backend/DevOps/Infra 分野に関わらず知識を吸収していきたいと思います。