astroを実践投入してみた
所属企業のHPのホスティングサービスを引っ越ししようとしたら、最新LTSのnodejsでビルドできなくなっていて会社に相談した所手を入れる時間を確保できたのでライブラリのアップデートなど色々手を入れてみた。
tl;dr
astro簡単に導入できたし、アイランドアーキテクチャとして色々なコンポーネントを使えるの面白い*1
ただしgoogle analyticsだけは動いてるけどまだ完全には解決していない。
そもそもの運用
元々は入社する前にwordpressで作られていたものだったが、以下の理由でwordpressの使用をやめた
- 社内にwordpress知見を持っている人がおらずバージョンアップが躊躇われた
- バージョンアップして壊れた時に対応できる時間があるとは限らない
- そのせいで対応が遅れてしまう
- ページ数も5ページほどしかなくwordpressはオーバースペック
そのためsassで書かれたcssなどをwebpackでbundleして、それをwordpressが生成したhtmlから読み込んで運用していた。
改善部分
生のhtml運用だったのでheadタグ内などを書き換えたい時にページ数分書き換える必要があるので共通部分は共通化したかった。SSIなども考えたが、サーバー用意するのが面倒なのでSSG一択。
そこで話題になってたastro触って見ようと思ってたらいつの間にか2.0が出てしまっていたので、触ってみていい感じだったのでそのまま導入した。
astroの面白かった所
入門的な記事はいっぱい出てくるだろうから面白いと感じた所を抜粋
astroのフォーマット
説明のためにastroファイルの書式はこんな感じ
Components 🚀 Astro Documentation
---
// componentなどのimport文等
import Layout from './layout.astro'
---
<!-- domを普通に記述 -->
<Layout>
<h1>Index Page</h1>
</Layout>
<style>
h1 {
color: red;
}
</style>
アイランドアーキテクチャ
astroの中にはreactやsvelteなどを同時に扱う事ができる
--- import Foo from './Foo.tsx' import Bar from './Bar.svelte' ---
これによって過去の資産使いまわせたり、一部をsvelteで書いてみるなどというお試し導入が簡単にできるのが良い
ssg
本題のssgに関してastroは基本的には静的なものの生成を目指す。例えばreactで書かれたコンポーネントを配置しビルドした時には、jsはビルド時のみ実行されレンダリング結果がビルド結果としてアウトプットされる
コンポーネントをクライアントで実行したい場合はclient:onlyをつける必要がある*2
<SvelteComponent client:only />
Template Directives Reference 🚀 Astroドキュメント
scriptタグ
frontmatter的な部分はサーバーサイドで実行されるが<script>タグで囲んだものはastroによって自動的にbundleされる
スクリプトとイベントハンドリング 🚀 Astroドキュメント
この当たり考えなくてもastroが裏で勝手にやってくれて賢い
astroの困った所
google analytics
全く気づかなかったがgoogle analytics見たらうまく動いて無さそうだった。 そこで調べてるとastroのメンテナーさんの記事が出てきてPartytown経由で実行すると良いらしい
これで一応取れていたので一旦様子を見ている
今後
全ページのcssを1つのcssとしてビルドし読み込んでいるので、これを分解していきたいとは思ってはいる。
ただページ数が少ないのもあって全ページのcssをバンドルしてると言っても、そこまで大きなサイズになっていないので特に困っていない。
astroのプロジェクトを試しに作成したりしてみたのも含めて、大枠の移行を1日で完了できたくらいには簡単に移行することができたのは良かった。
振り返って
wp剥がすことを決めた当時に話していた「ちゃんとwpアップデートの面倒を見てくれる人員を確保できている時のみ自社でwpを運用すべきなのでは」という会話を思い出した。
定期的に見直すものでもないので自分たちでアップデートできないなら制作会社だったりが管理してくれるならお金払ってやってもらったほうが良さそうだよね*3
もしも会社のHPを改変されたらというのを考えてみたが、自分は住所入力のための会社概要しか見ないので気づける気がしないな
