> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firecrawl.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Astro
> Astro と Firecrawl を組み合わせて、コンテンツ重視のサイトで Web データをスクレイピング、検索、Interact できます。
## 前提条件
* SSR が有効化された Astro プロジェクト (`output: "server"` または `"hybrid"`)
* Firecrawl APIキー — [無料で取得できます](https://www.firecrawl.dev/app/api-keys)
## SDKをインストール
```bash theme={null}
npm install firecrawl
```
`.env` に API key を追加します:
```bash theme={null}
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## Webを検索する
`src/pages/api/search.ts` を作成します:
```typescript theme={null}
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async ({ request }) => {
const { query } = await request.json();
const results = await firecrawl.search(query, { limit: 5 });
return new Response(JSON.stringify(results), {
headers: { "Content-Type": "application/json" },
});
};
```
または、サーバーサイドでレンダリングされるページ (`src/pages/search.astro`) で、リクエスト時に検索します。
```astro theme={null}
---
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
const query = Astro.url.searchParams.get("q");
let results = [];
if (query) {
const searchData = await firecrawl.search(query, { limit: 5 });
results = searchData.web || [];
}
---
検索結果
{results.length > 0 ? (
) : (
ウェブを検索するには ?q= を指定してください
)}
```
## ページをスクレイピングする
`src/pages/api/scrape.ts` を作成します:
```typescript theme={null}
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async ({ request }) => {
const { url } = await request.json();
const result = await firecrawl.scrape(url);
return new Response(JSON.stringify(result), {
headers: { "Content-Type": "application/json" },
});
};
```
または、サーバーサイドでレンダリングされるページでリクエスト時にスクレイピングします (`src/pages/scrape.astro`) :
```astro theme={null}
---
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
const target = Astro.url.searchParams.get("url");
let markdown = null;
if (target) {
const result = await firecrawl.scrape(target);
markdown = result.markdown;
}
---
スクレイピングされたコンテンツ
{markdown ? {markdown} : ページをスクレイピングするには ?url= を渡してください
}
```
## ページとInteractする
`src/pages/api/interact.ts` を作成します:
```typescript theme={null}
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async () => {
const result = await firecrawl.scrape("https://www.amazon.com", {
formats: ["markdown"],
});
const scrapeId = result.metadata?.scrapeId;
await firecrawl.interact(scrapeId, {
prompt: "Search for iPhone 16 Pro Max",
});
const response = await firecrawl.interact(scrapeId, {
prompt: "Click on the first result and tell me the price",
});
await firecrawl.stopInteraction(scrapeId);
return new Response(JSON.stringify({ output: response.output }), {
headers: { "Content-Type": "application/json" },
});
};
```
## 次のステップ
フォーマット、アクション、プロキシなど、スクレイピングのオプションをすべて掲載
Webを検索し、ページ全体のコンテンツを取得
クリック、フォーム入力、動的コンテンツを抽出
クロール、map、バッチスクレイピングなどを含むSDKの完全なリファレンス