algolia-deploy-integration

Deploy Algolia-powered apps to Vercel, Fly.io, and Cloud Run with proper API key management and InstantSearch frontend integration. Trigger: "deploy algolia", "algolia Vercel", "algolia production deploy", "algolia Cloud Run", "algolia Fly.io", "algolia InstantSearch".

설치로 이동

저장소: jeremylongshore/claude-code-plugins-plus-skills
최근 소스 활동: 2026년 7월 17일 22:18
감지된 SKILL.md 언어: 영어
스타: 2,604
포크: 378

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

검색으로 돌아가기 설치로 돌아가기

name	algolia-deploy-integration
description	Deploy Algolia-powered apps to Vercel, Fly.io, and Cloud Run with proper API key management and InstantSearch frontend integration. Trigger: "deploy algolia", "algolia Vercel", "algolia production deploy", "algolia Cloud Run", "algolia Fly.io", "algolia InstantSearch".
allowed-tools	Read, Write, Edit, Bash(vercel:), Bash(fly:), Bash(gcloud:), Bash(npm:)
version	1.6.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["saas","search","algolia"]
compatibility	Designed for Claude Code

Algolia Deploy Integration

Overview

Deploy Algolia-powered applications to production platforms with proper API key separation (Admin on backend, Search-Only on frontend) and InstantSearch widget integration.

Prerequisites

Algolia App ID + Admin key (backend) + Search-Only key (frontend)
Platform CLI installed (vercel, fly, or gcloud)
algoliasearch v5 for backend, react-instantsearch or instantsearch.js for frontend

Instructions

Step 1: Backend API Key Configuration

Vercel

# Environment variables in Vercel
vercel env add ALGOLIA_APP_ID production       # Your Application ID
vercel env add ALGOLIA_ADMIN_KEY production     # Admin key (server-side only)
vercel env add ALGOLIA_SEARCH_KEY production    # Search-only key (can be public)

# For client-side access (Next.js convention)
vercel env add NEXT_PUBLIC_ALGOLIA_APP_ID production
vercel env add NEXT_PUBLIC_ALGOLIA_SEARCH_KEY production

Fly.io

fly secrets set \
  ALGOLIA_APP_ID=YourApplicationID \
  ALGOLIA_ADMIN_KEY=your_admin_key \
  ALGOLIA_SEARCH_KEY=your_search_key

Google Cloud Run

# Store in Secret Manager
echo -n "your_admin_key" | gcloud secrets create algolia-admin-key --data-file=-
echo -n "your_search_key" | gcloud secrets create algolia-search-key --data-file=-

# Deploy with secrets mounted as env vars
gcloud run deploy search-service \
  --image gcr.io/$PROJECT_ID/search-service \
  --set-secrets=ALGOLIA_ADMIN_KEY=algolia-admin-key:latest,ALGOLIA_SEARCH_KEY=algolia-search-key:latest \
  --region us-central1

Step 2: Backend Search API (Next.js API Route)

// app/api/search/route.ts
import { algoliasearch }  ;
 { ,  }  ;

 client = (
  process..!,
  process..!
);

   () {
   query = request...() || ;
   page = (request...() || );

   { hits, nbHits, nbPages } =  client.({
    : ,
    : {
      query,
      : ,
      page,
      : [, , , ],
      : [],
    },
  });

   .({ hits, : nbHits, : nbPages, page });
}

npm install react-instantsearch algoliasearch

// components/AlgoliaSearch.tsx
import { liteClient } from 'algoliasearch/lite';
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
  Pagination,
  Highlight,
} from 'react-instantsearch';

const searchClient = liteClient(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);

function Hit({ hit }: { hit: any }) {
  return (
    <article>
      <h3><Highlight attribute="name" hit={hit} /></h3>
      <p>${hit.price}</p>
      <p>{hit.category}</p>
    </article>
  );
}

export default function AlgoliaSearch() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox placeholder="Search products..." />
      <div style={{ display: 'flex', gap: '2rem' }}>
        <aside>
          <h4>Category</h4>
          <RefinementList attribute="category" />
          <h4>Brand</h4>
          <RefinementList attribute="brand" searchable />
        </aside>
        <main>
          <Hits hitComponent={Hit} />
          <Pagination />
        </main>
      </div>
    </InstantSearch>
  );
}

npm install instantsearch.js algoliasearch

import instantsearch from 'instantsearch.js';
import { searchBox, hits, refinementList, pagination } from 'instantsearch.js/es/widgets';
import { liteClient } from 'algoliasearch/lite';

const searchClient = liteClient('YourAppID', 'YourSearchOnlyKey');

const search = instantsearch({
  indexName: 'products',
  searchClient,
});

search.addWidgets([
  searchBox({ container: '#searchbox' }),
  hits({
    container: '#hits',
    templates: {
      item: (hit, { html, components }) => html`
        <article>
          <h3>${components.Highlight({ hit, attribute: 'name' })}</h3>
          <p>$${hit.price}</p>
        </article>
      `,
    },
  }),
  refinementList({ container: '#category-filter', attribute: 'category' }),
  pagination({ container: '#pagination' }),
]);

search.start();

// app/api/health/route.ts
import { algoliasearch } from 'algoliasearch';

const client = algoliasearch(process.env.ALGOLIA_APP_ID!, process.env.ALGOLIA_ADMIN_KEY!);

export async function GET() {
  const start = Date.now();
  try {
    const { items } = await client.listIndices();
    return Response.json({
      status: 'healthy',
      algolia: {
        connected: true,
        latencyMs: Date.now() - start,
        indexCount: items.length,
      },
    });
  } catch (error) {
    return Response.json({
      status: 'degraded',
      algolia: { connected: false, error: String(error) },
    }, { status: 503 });
  }
}

Issue	Cause	Solution
`NEXT_PUBLIC_` var undefined	Not set in Vercel env	Add with `vercel env add`
InstantSearch shows no results	Wrong Search-Only key	Verify key ACL includes `search`
Backend write fails on Vercel	Using search key for indexing	Use `ALGOLIA_ADMIN_KEY` (non-public)
Cold start timeout	Large client init	Use lite client where possible