diff --git a/amplify.yml b/amplify.yml index e75547b..a7598c6 100644 --- a/amplify.yml +++ b/amplify.yml @@ -1,4 +1,10 @@ version: 1 +backend: + phases: + build: + commands: + - npm ci + - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID frontend: phases: preBuild: diff --git a/amplify/backend.ts b/amplify/backend.ts index af6aac2..22abfd1 100644 --- a/amplify/backend.ts +++ b/amplify/backend.ts @@ -1,6 +1,7 @@ import { defineBackend } from '@aws-amplify/backend'; import { auth } from './auth/resource'; import { data } from './data/resource'; +import { youtubeApi } from './functions/youtube-api/resource'; /** * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more @@ -8,4 +9,5 @@ import { data } from './data/resource'; defineBackend({ auth, data, + youtubeApi, }); diff --git a/amplify/functions/youtube-api/handler.ts b/amplify/functions/youtube-api/handler.ts new file mode 100644 index 0000000..402b3a1 --- /dev/null +++ b/amplify/functions/youtube-api/handler.ts @@ -0,0 +1,46 @@ +import type { APIGatewayProxyHandler } from 'aws-lambda'; + +export const handler: APIGatewayProxyHandler = async (event) => { + const apiKey = process.env.YOUTUBE_API_KEY; + + if (!apiKey) { + return { + statusCode: 500, + body: JSON.stringify({ error: 'YouTube API key not configured' }), + }; + } + + const videoIds = JSON.parse(event.body || '{}').videoIds || []; + + if (!videoIds.length) { + return { + statusCode: 400, + body: JSON.stringify({ error: 'Video IDs are required' }), + }; + } + + try { + const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoIds.join(',')}&key=${apiKey}`; + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`YouTube API error: ${response.status}`); + } + + const data = await response.json(); + + return { + statusCode: 200, + headers: { + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + }, + body: JSON.stringify(data), + }; + } catch (error) { + return { + statusCode: 500, + body: JSON.stringify({ error: 'Failed to fetch YouTube data' }), + }; + } +}; \ No newline at end of file diff --git a/amplify/functions/youtube-api/resource.ts b/amplify/functions/youtube-api/resource.ts new file mode 100644 index 0000000..6eb3f31 --- /dev/null +++ b/amplify/functions/youtube-api/resource.ts @@ -0,0 +1,8 @@ +import { defineFunction, secret } from '@aws-amplify/backend'; + +export const youtubeApi = defineFunction({ + name: 'youtube-api', + environment: { + YOUTUBE_API_KEY: secret('YOUTUBE_API_KEY'), + }, +}); \ No newline at end of file diff --git a/src/app/api/youtube/route.ts b/src/app/api/youtube/route.ts new file mode 100644 index 0000000..22564ab --- /dev/null +++ b/src/app/api/youtube/route.ts @@ -0,0 +1,35 @@ +import { NextRequest, NextResponse } from 'next/server'; + +export async function POST(request: NextRequest) { + try { + const body = await request.json(); + const { videoIds } = body; + + if (!videoIds || !Array.isArray(videoIds)) { + return NextResponse.json({ error: 'Video IDs are required' }, { status: 400 }); + } + + // In a real implementation, you'd get the Amplify function URL from amplify_outputs.json + // For now, let's fall back to direct API call with environment variable + const apiKey = process.env.YOUTUBE_API_KEY; + + if (!apiKey) { + return NextResponse.json({ error: 'YouTube API key not configured' }, { status: 500 }); + } + + const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoIds.join(',')}&key=${apiKey}`; + + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`YouTube API error: ${response.status}`); + } + + const data = await response.json(); + + return NextResponse.json(data); + } catch (error) { + console.error('YouTube API error:', error); + return NextResponse.json({ error: 'Failed to fetch YouTube data' }, { status: 500 }); + } +} \ No newline at end of file diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index bdcb3d0..846d3e8 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -32,29 +32,23 @@ const fallbackData: Video[] = [ ]; async function getYouTubeVideos(ids: string[]): Promise { - // Try multiple ways to get the API key - const apiKey = process.env.YOUTUBE_API_KEY || - process.env.NEXT_PUBLIC_YOUTUBE_API_KEY || - process.env.AMPLIFY_YOUTUBE_API_KEY || ''; - - if (!apiKey) { - console.warn("YOUTUBE_API_KEY environment variable not set. Using hardcoded video titles as fallback."); - console.log("Available env vars:", Object.keys(process.env).filter(k => k.includes('YOUTUBE') || k.includes('AMPLIFY')).join(', ') || 'none'); - return fallbackData; - } - - const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${ids.join(',')}&key=${apiKey}`; - try { - const response = await fetch(url, { next: { revalidate: 3600 } }); // Revalidate every hour + // Use the Amplify function endpoint + const response = await fetch('/api/youtube', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ videoIds: ids }), + next: { revalidate: 3600 } + }); + if (!response.ok) { - const errorData = await response.json(); - console.error("YouTube API Error:", errorData.error.message); - console.log("Falling back to hardcoded video data."); - return fallbackData; + throw new Error(`API error: ${response.status}`); } const data = await response.json(); + if (!data.items || data.items.length === 0) { console.warn("YouTube API returned no items for the given video IDs. Falling back to hardcoded data."); return fallbackData;