API 불러오는 방법을 고민한 Mini Papago

박경현·2024년 10월 20일

이번에는 Google의 API를 Next js의 강점인 api라우터 방식으로 가져와보자! 해서
그걸 생각하면서 만들어봤습니다.

기본 설계

위의 사진처럼 단어를 작성하면 (영어, 중국어, 일본어, 한국어) 중에 하나로 번역을 해줍니다.

추가로 TTS 기능을 넣어서 번역한 문장 혹은 단어를 읽어줍니다.

Material Icon설정하기

저번처럼 Material Icon설정을 위해 Provider.tsx를 만들고 Layout.tsx에 적용해줬습니다.

상세한건 저번에 적었어서 생략했습니다.

Google Translate API 가져와 사용하기

api router는 쉽게 말해서 Next js내에서 API를 만드는 기능입니다.

app/ api/translate/route.ts 이렇게 작성하면
fetch('/api/translate', { method: 'POST', ~~} 이런식으로 부르면 됩니다!!

이걸 사용하면 파일기반으로 API를 만들 수 있어서 API만들고 관리가 용이합니다.

app/api/translate/route.ts

import {NextResponse} from 'next/server';

export async function POST(req: Request) {
	const {text. transLan} = await req.json();
    const apiKey = process.env.NEXT_PUBLIC_GOOGLE_API_KEY;
    
    if (!text || !transLan) {
    	return NextResponse.json({error: 'Text or target language is missing'}, {status: 400})
    }
    
    try {
    	const response = await fetch(`https://translation.googleapis.com/language/translate/v2?key=${apiKey}`, {
        	method: 'POST',
            headers : {
            	'Content-Type' : 'application/json'
            },
            body: JSON.stringify({
            	q: text,
                target: transLan,
            })
        })
        const data = await response.json();
        if (response.ok && data.data) {
        	return NextResponse({ translatedTextRes: data.data.translations[0].translatedText})
        }
    } catch(error) {
    	return NextResponse.json({error: 'server error'}, {status: 500})
    }
}

Google TTS 가져와 사용하기

위처럼 api router방식으로 tts를 블러와서 사용했습니다

app/api/tts/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
    const { text, lan } = await req.json();
    const apiKey = process.env.NEXT_PUBLIC_GOOGLE_API_KEY;

    if (!text) {
        return NextResponse.json({ error: 'Text is missing' }, { status: 400 });
    }

    try {
        const response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=${apiKey}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                input: { text },
                voice: {
                    languageCode: lan ,
                    ssmlGender: 'FEMALE',
                },
                audioConfig: {
                    audioEncoding: 'MP3',
                },
            }),
        });
        const data = await response.json();

        if (response.ok && data.audioContent) {
            return NextResponse.json({
                audioUrl: `data:audio/mp3;base64,${data.audioContent}`,
            });
        } else {
            console.error('Text-to-Speech API Error:', data);
            return NextResponse.json({ error: 'Text-to-Speech API request failed', details: data }, { status: response.status });
        }
    }
    catch (error) {
        console.error('Error during Text-to-Speech request:', error);
        return NextResponse.json(
            { error: 'Internal server error', details: error instanceof Error ? error.message : String(error) },
            { status: 500 }
        );
    }
}

GCP VM에 계속 실행시키는 방법

이건 나중에 또 GPT한테 물어보기 싫어서 적었습니다.

순서
1. vm만들기
2. vm에 git설치, node, npm설치
3. github에 원하는거 clone하기
4. npm install로 node_modules 설치하기
5. npm run build && npm start로 빌드 하기 및 테스트
6. pm2로 백그라운드에서 앱 계속 실행시키기

sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
node -v  # Node.js 18 버전 확인

npm install # 이걸로 설치하기
npm run build
npm start # 빌드 확인

sudo npm install -g pm2
pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup