Astroで開発環境専用ページを作る

AstroSSR

コード同様このサイトの記事はVSCodeで基本的に書いていたが、普段マークダウンはQiita・Qiita Team・GitHubで書いてるのもありWeb UIで書きたくなった。

AIに指示して簡単にデザインを作ってもらったんだけど、build時もそのページを作成してしまったのでdevの時だけ作るようにしたかった。
どうすればいいのかというと、プリレンダしないようにするのと、環境変数で分けて404を返すようにしてあげるとよい。

Astroファイルの先頭に以下を追加すると、開発環境でのみアクセス可能になります：

  • export const prerender = false でサーバーサイドレンダリングを有効化
  • 本番環境では404を返すように条件分岐を追加

他に方法はあるかもしれないが、とりあえずこのサイトは開発環境でのみ/editorにアクセスできるようになっていて本番は404が返るようになっているはずだ。
同様に開発環境専用ページへの導線を出したい場合は環境変数で制御してあげるとよい。

ナビゲーションメニューに開発環境専用のリンクを追加する例：

{
  !import.meta.env.PROD && (
    <li>
      <a href="/editor" class="nav-link nav-link-dev">
        エディタ
      </a>
    </li>
  );
}