---
title: Astro v4.10リリース！型安全な環境変数を実験的にサポート
url: https://roboin.io/article/2024/06/09/astro-v4-9/
description: オープンソースの静的サイトジェネレーター「Astro」のバージョン4.10がリリースされました。このリリースでは、新しい型安全な環境変数のサポートや、コンテナーAPIの強化、全HTTPメソッドに対応したリライト機能など、多くの新機能が追加されています。
publishedDate: 2024-06-09T08:09:03.000Z
modifiedDate: 2024-06-09T08:09:03.000Z
thumbnail: https://roboin.io/api/media/file/thumbnail-21.webp
thumbnailAlt: サムネイル
thumbnailCaption: N/A
---

# Astro v4.10リリース！型安全な環境変数を実験的にサポート

オープンソースの静的サイトジェネレーター「Astro」のバージョン4.10がリリースされました。このリリースでは、新しい型安全な環境変数のサポートや、コンテナーAPIの強化、全HTTPメソッドに対応したリライト機能など、多くの新機能が追加されています。

この記事では、**Astro 4.10**のアップデート内容について詳しく解説します。

## Astro 4.10の主な更新内容

### 実験的な`astro:env`モジュール

Astro 4.10では、新しい実験的なモジュールとして`astro:env`が導入されました。このモジュールを使用すると、**環境変数を型安全に扱う**ことができます。

環境変数を使うと、アプリケーションを異なる環境で異なる設定で動作させることができます。しかし、これは多くの複雑さを伴います。たとえば、クライアントとサーバーの両方で必要な変数があり、サーバー側の変数は**機密情報**であることが多いです。これらを効率的に管理するために、`astro:env`が開発されました。

以下は、`astro:env`の使い方の例です。

```typescript
import { defineConfig, envField } from "astro/config";

export default defineConfig({
  experimental: {
    env: {
      schema: {
        API_PORT: envField.number({
          context: "server",
          access: "secret",
          default: 7000
        }),
        PUBLIC_DASHBOARD_V2: envField.boolean({
          context: "server",
          access: "public",
          default: false
        }),
      }
    }
  }
})
```

定義した変数は、`astro:env/server`や`astro:env/client`モジュールから取得できます。

```typescript
import { PUBLIC_DASHBOARD_V2, getSecret } from "astro:env/server";

if (PUBLIC_DASHBOARD_V2) {
  const API_PORT = getSecret("API_PORT") // number
  await fetch(`https://my-secret-api.com:${API_PORT}/v2`)
}
```

スキーマで定義されていない変数は、`getSecret()`で取得できます。これは、CloudflareやNode.js、Denoのいずれの環境でも動作します。

### 全HTTPメソッドでのリライト

バージョン4.9で導入されたリライト機能は、`GET`リクエストに限定されていましたが、Astro 4.10では、すべてのHTTPメソッドに対してリライトをサポートするようになりました。

[Astro v4.9リリース！コンテナーAPIやReact 19のサポートなど](https://roboin.io/article/2024/05/29/astro-v4-9/)

これにより、異なるメソッドのリクエストを他のエンドポイントにルーティングできます。リライトは、新しいリクエストを作成し、既存のヘッダーやボディを新しいリクエストにコピーすることで実現されます。

たとえば、APIへのアクセスをデフォルトバージョンのAPIエンドポイントにリライトする場合、次のように記述できます。

```typescript
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(({ request, url }, next) => {
  if(request.method === "POST" && url.pathname === "/api") {
    return next("/api/v2");
  }
});
```

### Astroの埋め込み

Astro 4.10では、コンテナーAPIを使用してAstroコンポーネントを他のフレームワークや環境に埋め込むことができるようになりました。これにより、Astroコンポーネントをより多くの場面で利用することが可能になります。

公式ブログでは、PHPアプリケーション内でAstroコンポーネントを使用するデモが示されています。

```typescript
import * as components from "./dist/server/all.mjs";
import { renderers } from "./dist/server/renderers.mjs";
import { manifest } from "./dist/server/entry.mjs";
import { experimental_AstroContainer as AstroContainer } from "astro/container";

const container = await AstroContainer.create({
  manifest,
  renderers,
  resolve(s) {
    const found = manifest.entryModules[s];
    if(found) {
      return `/astro-project/dist/client/${found}`;
    }
    return found;
  }
});

const html = await container.renderToString(components.ReactWrapper);

// Log to the console so that PHP injects the HTML into its page.
console.log(html);
```

### コンテナーAPIのヘルパー

また、コンテナーAPIをVite環境でより簡単に利用するためのヘルパー関数も追加されました。`getContainerRenderer()`を使用すると、各パッケージのクライアントおよびサーバーレンダリングスクリプトを手動で設定する必要がなくなります。

```diff
import { experimental_AstroContainer as AstroContainer } from "astro/container";
import ReactWrapper from "../src/components/ReactWrapper.astro";
import { loadRenderers } from "astro:container";
import { getContainerRenderer } from "@astrojs/react";

test("ReactWrapper with react renderer", async () => {
 const renderers = await loadRenderers([getContainerRenderer()])
 const renderers = [
 {
  name: "@astrojs/react",
   clientEntrypoint: "@astrojs/react/client.js",
   serverEntrypoint: "@astrojs/react/server.js",
  },
 ];
  const container = await AstroContainer.create({
    renderers,
  });
  const result = await container.renderToString(ReactWrapper);

  expect(result).toContain("Counter");
  expect(result).toContain("Count: <!-- -->5");
});
```

## Astro 4.10へのアップデート方法

既存のプロジェクトをAstro v4.10にアップデートするには、`@astrojs/upgrade`を使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。

```bash
npx @astrojs/upgrade
```

```bash
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest
```

## まとめ

Astro 4.10は、新しい型安全な環境変数のサポートや全HTTPメソッドでのリライト機能、コンテナーAPIの強化など、多くの新機能を含むリリースです。これにより、より柔軟で効率的な開発が可能となります。興味がある方はぜひ新しいバージョンを試してみてください。

また、Astro 4.10の詳細について紹介した動画も公開されているので、合わせてチェックしてみてください。

<iframe src="https://www.youtube-nocookie.com/embed/lm2br5_zcHg" title="Astro 4.10: Accelerating content site development" style="border: 0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 参考

- [Astro 4.10 | Astro](https://astro.build/blog/astro-4100/)