生成AIのAPIを使ったウェブサイトの作成から公開までを無料でやってみよう【Gemini API, Next.js】 #TypeScript

今回は初心者向けにGeminiAPIを使ったWebサイトを無料で公開する方法を紹介していきたいと思います。

筆者自身も初心者であり、生成AIを使ったWebサイトを開発したいと思った際に技術選定や無料で公開までできる方法や、APIキーの安全な保護方法がわからず、様々な記事を読み漁ったので、今回はその内容をまとめていきたいと思います。

今回の内容

APIキーの安全な保護方法：APIを使う際に重要な、セキュリティを確保する方法を学びます。
Next.jsのAPI Routesを使ったバックエンドの実装：Next.jsを使ってAPIを簡単に実装する方法を紹介します。
無料でのデプロイ方法：Vercelを使ってプロジェクトを無料で公開する具体的な手順を解説します。

※それ以外の部分については参考にさせていただいた記事のURLを載せますのでご参照ください。

筆者の環境

OS: Windows11
エディタ: VSCode
フロントエンジニアリング: Next.js, typescript, tailwindcss
AI: GeminiAPI
デプロイ: Vercel

この記事を通じて、Web開発初心者でも自信を持ってAPIを利用したWebサイトを構築し、公開できるようになります。それでは、さっそく始めましょう！

準備

前提条件

Reactの基本的な知識がある（useStateなどがわかりコードがある程度読める、ChatGPTなどを用いてコードの解説を聞けば理解できる）
Githubの基本的な使い方がわかる（開発したコードをリモートリポジトリにpushできる）

プロジェクトのセットアップ

create-next-app等を使ってプロジェクトを作成
Next.jsのセットアップ方法についてはこちらのサイト様等をご覧ください。今回はTypeScriptを使うので、TypeScriptをYesで選択してプロジェクトを作成してください。
githubにリモートリポジトリと連携

Gemini APIキーの取得

こちらのサイト様を参考にGemini APIのキーを取得して、.env.localに環境変数として設定し、SDKパッケージをインストールして下さい。（GeminiAPIキーの使用方法についても当記事より詳細に解説されていますので、ぜひ詳しく知りたい方はご覧ください）

簡易的な説明
プロジェクトのrootディレクトリに.env.localファイルを作成し、以下のように環境変数の設定を行います。

.env

GEMINI_API_KEY=G-XXXXXXXXX

G-XXXXXXXXXは、取得したAPIキーを貼り付けて下さい。

実際に実装してみる（API Routesの実装）

app/api/gemini-api/route.tsを作成する。
このファイルでAPIを実装します。このファイルはNext.jsの機能であり、ファイル名がroute.tsで終了することで、Next.jsはこのファイルをAPI Routesとして扱うことができます。(gemini-apiという部分のフォルダ名は自由です。app/apiディレクトリ内で行われたAPI操作がAPI Routesという機能によってバックエンド側で実装されることによって、APIキーを安全に保護しながらAPIを利用・公開できるようになります。)
route.tsに以下のプログラムを書く

route.ts

import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
    const { prompt_post } = await req.json();
    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY || '');

    const model = genAI.getGenerativeModel({ model: "gemini-pro"});
    const result = await model.generateContentStream(prompt_post);
    const response = await result.response

    return NextResponse.json({
        message: response.text()
    })
}

page.tsxやコンポーネントからAPIを呼び出す。
今回はWEBサイトのテキストエリアの入力と特定の使い方をするためのSystem Instructionなるものを用意してそれをまとめてプロンプトとして与えるコードとなっています。
基本的な使い方などは先程のAPIキー取得方法の際の参考URL様等を参照下さい。
※promptの部分を入力したいプロンプトを書き換えてください。

サンプルコードとしてSystem Instructionでは受け取ったテキストの誤字脱字を修正するという指示を簡潔に出しています。

page.tsx

"use client";

import React, { useState } from "react";

const Page: React.FC = () => {
  const [input, setInput] = useState<string>(""); // textareaの入力を格納
  const [geminiResponse, setGeminiResponse] = useState<string>(""); // geminiの返答を格納するstate

  const systemInstruction =
    "以下の文章の誤字脱字を修正して修正後の文章を出力して下さい。";
  const prompt = systemInstruction + "\n\n" + input;
  const Gemini = () => {
    const postData = async () => {
      const response = await fetch("/api/gemini-api", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt_post: prompt }), //promptに入力する文字を入れる
      });
      const data = await response.json();
      setGeminiResponse(data.message);
    };
    postData();
  };

  return (
    <div className="container mx-auto px-4">
      <h1>誤字脱字を修正します。</h1>
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="w-full h-40 p-4 border border-gray-300 rounded-md"
      />
      <button
        onClick={Gemini}
        className="px-4 py-2 bg-blue-500 text-white rounded-md"
      >
        実行
      </button>
      <div className="mt-4 p-4 bg-gray-100 rounded-md">
        <p className="text-left">Output:</p>
        <p>{geminiResponse}</p>
      </div>
    </div>
  );
};

export default Page;

Vercelへのデプロイ

作成したコードをGithubのリモートリポジトリににpushしてください。
こちらのサイトを参考にVercelにプロジェクトのデプロイを行って下さい。

APIキーを公開するウェブサイトでも使えるようにするために環境変数として設定する

デプロイする途中でConfigure Projectの中にEnvironment Variablesという項目があるのでそこで

Key: GEMINI_API_KEY
Value: G-XXXXXXXXX

というように.env.localファイルに設定したものと同じように設定し、Addボタンを押す。
その後Deployを押す。
問題がなければ、少し立つとデプロイが完了し、アクセスするためのURLが表示される。

まとめ

この記事では、Gemini APIを使ったWebサイトを無料で公開する方法について解説しました。初心者向けに、APIキーの保護方法からNext.jsのAPI Routesを使ったバックエンドの実装、Vercelを使った無料でのデプロイ方法までを網羅しています。

Gemini APIを利用することで、テキストデータを加工して新しいテキストを生成することが可能です。本記事では、具体的なユースケースとして、レシピサイトの材料リストをCSV形式に変換する機能を例に取り上げました。

また、APIキーの保護方法として、環境変数を利用することで安全にAPIを利用・公開する方法を紹介しました。さらに、Next.jsのAPI Routesを使って簡単にバックエンドを実装し、Vercelを使ってプロジェクトを無料で公開する手順も解説しました。

これらのステップを経て、Web開発初心者の皆さんでも自信を持ってAPIを利用したWebサイトを構築し、公開できるようになることを目指しました。ぜひ、本記事を参考にして、自分のプロジェクトを実装してみてください。

参考にさせていただいたサイト様

※本記事は一部ChatGPTに執筆を任せています。