Astro と Cloud Run で構築するシステム管理規約 ― 正しい運用のためのガイドライン

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

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

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

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

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

さて、今回は、[Astro](https://astro.build/) を使った静的サイトの構築について書いていきます。

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

引用：[公式ページ](https://docs.astro.build/ja/getting-started/)

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

また、[The Top 100+ Developer Tools 2022](https://stackshare.io/posts/top-developer-tools-2022) でも取り上げられているとおり、Developer 界隈で注目度の高い Tool でもあります。

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

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

Astro を選択した理由は、以下のとおりです。
- メンテナンス性。
   - 規約を追加・更新していく上で、編集が容易なフォーマットが望ましい。 
      - Markdown は、非 Developer でも簡単に文章を修正できる。
- アクセス制限の必要性。
   - 内部文書であるため、サイトへのアクセスを制限する必要がある。
      - [Identity-Aware Proxy](https://cloud.google.com/iap?hl=ja) を設定することで Group Account でアクセスを制限できる。

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

## 構成
今回の構成です。
![HOGE_TERMS.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/59e58f1b-ac06-65f7-1e7d-8a1c92896e59.png)


## 構築
### 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 分野に関わらず知識を吸収していきたいと思います。