Zenn
🎯

オープンソースのフルスタックサーバーレスアプリケーションフレームワーク 'Skeet'

2023/06/30に公開
Firebase
Google Cloud
React
TypeScript
ChatGPT
tech

こんにちは。POPPIN FUMI です。

育てた機械学習の結果を簡単にウェブ、iOS,Android アプリへデプロイするために、
Skeet Framework という TypeScript のフルスタックフレームワークをご紹介致します。

Skeet フレームワークのチュートリアルでは Chat GPT のAPIを使ったチャットアプリをすぐに作成することができます。

🕺 Skeet とは？ 💃

オープンソースのフルスタックサーバーレスアプリケーションフレームワーク 'Skeet'。

Skeet はソフトウェア開発・運用のコストを下げるために生まれました。

サーバーレスアプリをすぐに開発スタート、そしてデプロイ。

スケーラブルな Cloud Firestore、Cloud Functions を今すぐ安全に使い始める準備ができています。

https://storage.googleapis.com/skeet-assets/animation/skeet-cli-create-latest.gif

🧪 依存パッケージ 🧪

  • Skeet において Java を書くことはありませんが、システムを動かすために必要です

📗 使い方 📗

① パッケージのインストール

$ npm i -g @skeet-framework/cli
$ npm install -g firebase-tools

② Skeet アプリの作成

$ skeet create <appName>

③ ローカルで起動

$ cd <appName>
$ skeet s

Skeet App フロントエンドと Firebase エミュレーターが起動します。

📲 Frontend - http://localhost:19006/

💻 Firebase Emulator - http://localhost:4000/

** ⚠️ Skeet App を完全に使用するには、アクティベート Skeet ChatApp ステップを完了する必要があります ⚠️ **

🤖 アクティベート Skeet ChatApp 🤖

① Googel Cloud Project の作成

Create Google Cloud Project

② Firebase Project の追加

Add Firebase Project

③ Firebase ビルドの有効化

以下の３つの Firebase ビルドを有効化してください。

- Firebase 認証

  • Firebase Authentication の有効化
    画像

  • Google ログインの有効化
    画像

- Firebase Firestore

  • Firestore の有効化
    画像

  • 環境を選択
    画像

  • リージョンを選択
    画像

- Firebase Storage

  • Firebase Storage の有効化
    画像

  • 環境を選択
    画像

  • リージョンを選択
    画像

④ Skeet init コマンドの実行

skeet init コマンドに --only-dev オプションを付けて実行し、
プロジェクト ID と リージョンを選択してください。
そして、表示された URL にアクセスし、Firebase アカウントへログインします。

$ skeet init --only-dev
? What's your GCP Project ID skeet-demo
? Select Regions to deploy
  europe-west1
  europe-west2
  europe-west3
❯ europe-west6
  northamerica-northeast1
  southamerica-east1
  us-central1

Visit this URL on this device to log in:

https://accounts.google.com/o/oauth2/auth?project...

Waiting for authentication...

⑤ 環境変数の設定方法

- Firebase Blaze プランへのアップグレード

Skeet Framework では環境変数を Cloud Secret Manager 使って API キーなどの機密情報を管理します。

このコマンドを利用するには、Firebase Blaze 以上のプランが必要です。

画像

Firebase コンソールの左下のメニューから、アップグレード を選択します。

- Skeet Framework のクラウド使用料について

Skeet Framework は Firebase Blaze プラン以上のプランが必要ですが、
通常、開発環境への使用料は以下の無料枠内で収まります。

Google Cloud の無料枠には 2 つの部分があります

  • 90 日間の無料トライアル。Google Cloud サービスで使用できる 300 ドルのクレジットが付いています。
  • Always Free は、多くの一般的な Google Cloud リソースへの制限付きアクセスを無料で提供します。

Google Cloud の無料プログラム

Firabse Blaze プランの料金

⚠️ また、想定外の請求を回避するために、予算のアラートなどを設定することをおすすめします。 ⚠️

- シークレットキーの設定

skeet add secret <secretKey> コマンドを使って

OpenAI の API キーを環境変数に設定します。

$ skeet add secret CHAT_GPT_ORG
? Enter value for CHAT_GPT_ORG: <yourOpenAIKey>

同様に CHAT_GPT_KEY も設定します。

$ skeet add secret CHAT_GPT_KEY
? Enter value for CHAT_GPT_KEY: <yourOpenAIKey>

また、簡易的に試すには、functions/openai/.env に記述することもできますが、
この方法は、本番環境には反映されません。

- OpenAI の API Key を作成・取得

画像

📕 OpenAI API Document

これで Skeet App を使う準備ができました 🎉

📱 ユーザー登録・ログイン認証 📱

$ skeet s

ローカルで skeetApp を起動している状態で、

http://localhost:19006/register

にアクセスしてください。

メールアドレスとパスワードを入力してユーザー登録を行います。

画像

作成が成功すると、コンソールログに以下のようなメッセージが表示されます。

画像

リンクをクリックし、メールアドレスの認証を行ってください。

To verify the email address epics.dev@gmail.com, follow this link: <Link>

成功すると、リンク先のページに以下のようなメッセージが表示されます。

画像

✉️ OpenAI チャットルームの作成 ✉️

ログイン後、http://localhost:19006/user/open-ai-chat にアクセスしてください。

そして、チャットルームを作成します。

以下の設定を選択して、チャットルームを作成してください。

チャットルームの設定

項目名 説明 型
Model OpenAI API のモデルを選択します。 gpt3.5-turbo / gpt4
Max Tokens OpenAI API の Max Tokens を設定します。 number
Temperature OpenAI API の Temperature を設定します。 number
System Charactor OpenAI API の System Charactor を設定します。 string

画像

これで、チャットルームが使えるようになりました 🎉

画像

このチュートリアルのYouTube動画のリンクはこちら👇
https://youtu.be/6em68qcSsJE

Discussion