Share
Embed
第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門
下記、勉強会での資料です。
https://youtu.be/BX0Q9x4GMBM
iret.kumoben
November 30, 2023
Transcript
95 slides
-
0.⾃⼰紹介 2 ▪ ⼩林千紘 • クラウドインテグレーション事業部開発第⼆セクション • アイレット歴は、1年ちょっと • ⻑所は、寝たら忘れること。(だと思ってます)
• よなべして、Skeetさわってます。たのしい。 -
1. Skeetとは︖ 8 (ごめんなさい...)公式が説明しているのは以下 GCP (Google Cloud) と Firebase上にフルスタックアプリを構築できるオ ープンソースのサーバーレスフレームワーク
Skeet公式サイトより引⽤ https://skeet.dev/ja/ です -
1. Skeetとは︖ 9 • 使⽤⾔語は、TypeScrpit • コマンドを数回ぽちぽちするだけで、デプロイまでしてくれる • 開発環境も⾄れり尽くせりで、王様気分 •
モジュール式なので⼀部だけ使いたい、というわがままも叶えてくれる • AIモードがあり、問いかけると、よしなに⾊々作成してくれる • アプリのテンプレートが4種類あり web、マルチプラットフォーム(iOS・Android)、Web3など...、選びたい放題 基本情報はこんな感じ などなど... -
1. Skeetとは︖ 11 Skeet公式サイトより引⽤ https://skeet.dev/ja/ ⼀番ベーシックなwebテンプレート(Next.js (React) + Firestore)はこんな感じ 他に必要な場合は、
GCコンソールをぽちぽち して他のサービスを追加も できます -
2-0. 覗きこむ、その前に 14 覗き⾒お品書き 1. そもそもアプリテンプレートがやばい 2. 開発環境がいたれりつくせり 3. デプロイが簡単ですごい
4. AIモードがつよい 5. 覗き⾒要点ふりかえり のぞく 深淵をのぞく時深淵も また... -
2-0. 覗きこむ、その前に 15 と、その前に... Skeet(CLI)の根幹コマンドについて説明します。 このコマンドを知ってればなんやかんやデプロイはできます。 1. $ skeet create
<appName> 2. $ skeet init 3. $ skeet s 4. $ skeet deploy -
2-0. 覗きこむ、その前に 18 先ほどのinitコマンドに--loginオプションをつけると、 GoogleCloudのAIのIAM・API有効などのセットアップだけ⾏ってくれます。 具体的には、以下 • サービスアカウントの作成 • AIに関するサービスのAPIを有効にする
◦ Vertex AI API ◦ Cloud Translation API ◦ Secret Manager API $ skeet init --login 次のページに続く... -
2-0. 覗きこむ、その前に 19 • AIに関するロールをサービスアカウントに追加 ◦ Vertex AI Administrator ▪
https://cloud.google.com/vertex-ai/docs/general/access-control?hl=ja#aiplatform.admin ◦ Cloud Translation API 管理者 ▪ https://cloud.google.com/translate/docs/intro-to-v3?hl=ja#iam ◦ サービス アカウント ユーザーのロール ▪ https://cloud.google.com/iam/docs/service-account-permissions?hl=ja#user-role と、主にプロジェクトのセットアップと、AI系のあれこれをよしなにやってくれる。 似たコマンドに、skeet iam aiがありますが、先にskeet init系コマンドが必要です。 (⾃動でGoogleCloudプロジェクトのセットアップに移⾏はしません) -
2-0. 覗きこむ、その前に 20 読んで字のコマンド、ロードバランサー周りのバックエンド設定などしてくれる。 具体的には以下。 • GitHubリポジトリ作成 • ロードバランサーの設定 (使⽤するドメインについて聞いてくる)
• VPCネットワークを作成 • GitHub Actionsの設定(CI/CD) • Functionsをデプロイ • Cloud Armorの設定 $ skeet init --lb 最低限、先に以下を行っておく必要がありま す。 skeet init --login skeet yarn build(skeet選択) -
2-0. 覗きこむ、その前に 21 ローカル開発環境をまとめて起動してくれるコマンド。 詳しくは、後ほど紹介します。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-server/ $ skeet s あれこれ開発したものをデプロイしてくれるコマンド。
これも読んで字のコマンド。後ほど紹介します。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-deploy/ $ skeet deploy -
2-0. 覗きこむ、その前に 23 initコマンドの中⾝を解体するとこんな感じ $ skeet init --login $ skeet
yarn build $ skeet init モジュール式を 垣間見た $ skeet sync routings $ skeet deploy $ skeet init --lb buildのうち、 skeetのみ選択 deployのうち、 wepappのみ選択 -
2-1. そもそもアプリテンプレートがやばい 25 以下の導⼊にある程度時間かかるものが、⼊ってます。 これにより⼤幅な時間短縮と、最初から夢中でコードが書けます。 • 認証(Firebase Authentication) • フォーム(React
Hook Form&Zod) • ライドモード・ダークモード実装 • ⽇本語・英語の⾔語切替実装(next-i18next) また、backend側もSchedulerや、Pub/Subのサンプルも⼊っています。 他にも、Httpのプライベート/パブリックのオプションも事前に定義してあるので、 こんな感じに作ればいいのだな。で作れます。お⼿軽。 -
2-1. そもそもアプリテンプレートがやばい 26 アプリのテンプレートが4種類もあります。よりどりみどり。 • Next.js (React) + GraphQL テンプレート
• Next.js (React) + Firestore テンプレート • Expo (React Native) + Firestore テンプレート • Solana Mobile Stack (Expo) + Web (Next.js) - Firestore テンプレート 後ほど、Next.js (React) + Firestore テンプレートを実際に動かしてみます。 -
2-1. そもそもアプリテンプレートがやばい 27 使ってみた感想 Next.js (React) + GraphQL テンプレート •
DBは、PostgreSQL、バージョン指定が可能 (初期値のv15だとエラーがこんにちはする) • DBのseed, migrateなどのコマンドがSkeet CLIにある。便利 • Next.jsが14に上がった影響︖か、まだ少し不安定 (tsエラーがこんばんはする) • 結果、あれこれ弄ればデプロイできる • とはいえ、GraphQL搭載の環境を簡単に作れて感動 • GraphQL触りたい⼈エンジニア向け、とてもたのしい -
2-1. そもそもアプリテンプレートがやばい 28 使ってみた感想 Next.js (React) + Firestore テンプレート •
流⽯Firebaseとても安定している • なんとなくデプロイしたい気分になったら⼀番おすすめ • 美しいNext.js、シンプルイズザベスト、というやつ • バックエンド(Functions)は、Node.js • 後ほどたくさん出てきます -
2-1. そもそもアプリテンプレートがやばい 29 使ってみた感想 Expo (React Native) + Firestore テンプレート
• こちらも流⽯Firebaseとても安定している • 実機の開発環境もらくらくパラダイス(Expo Go使⽤) • エミュレータの設定(iOS, Android)は、skeet yarn iosなどで起動可能 • デプロイも簡単 ただしiOS, Androidは、ビルドして⾃分で申請する必要がありそう (EASコマンドも打てる模様) -
2-1. そもそもアプリテンプレートがやばい 30 使ってみ...た感想 Solana Mobile Stack (Expo) + Web
(Next.js) - Firestore テンプレート なんかすごい、便利そう...。() (ごめんなさい...、まだ触ってないなんて⾔えない) (圧) -
2-2. 開発環境がいたれりつくせり 33 Firebase Emulatorの素敵ポイントは、みやすい&わかりやすい。 また、ログもFirebase Emulator Suiteでみれます。 他にもプロジェクトルートに、***-debug.logのようなログファイルも書き出されます。 すごく...、ログ命。
Firebase Emulatorの設定ファイルは、 プロジェクトルートのfirebase.json -
2-2. 開発環境がいたれりつくせり 34 便利コマンド紹介のコーナー $ skeet curl <methodName> 開発環境のfunctionsをワンコマンドで叩けて便利。⾮常に便利。 環境変数のACCESS_TOKENが必要なので、skeet
loginで先に発⾏してください。 ただし、ドキュメントにあるproductionはうまく使えませんでした。かなしい。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-curl/ -
2-2. 開発環境がいたれりつくせり 35 便利コマンド紹介のコーナー $ skeet sync models なんと、バックエンドのモデルをフロントエンドのモデル(型定義)に同期します。 全世界が待ち望んでいましたね。
実際の開発でよくある、バックエンドとフロントエンドの定義のずれを 少しは...緩和できそうですね。 他にもroutings、armorsなどあるので何かとsyncにお世話になります。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-sync/ -
2-3. デプロイが簡単ですごい 38 初期デプロイは先ほど説明した、以下のskeet initでフルセットデプロイできます。 $ skeet init じゃあ、initでデプロイした後は︖どうするんだい︖ そう、そんな時は、これ。
みんな⼤好き、わくわくデプロイコマンド。ワンコマンド、ぽちするだけ。 $ skeet deploy -
2-4. AIモードがつよい 42 以下のコマンドで、どんな時でも答えてくれます。あったけえ。 ただしAPIキーなどのセットアップは必要です。 $ skeet ai OpenAI、VertexAI、どちらも使⽤できます。(デフォルトは、VertexAI) また、⾃分⾃⾝でファインチューニングして微調整できる様です。
⽇本語設定なども、skeet-cloud.config.jsonから。 https://skeet.dev/ja/doc/skeet-ai/basic/ https://github.com/elsoul/skeet-ai -
2-4. AIモードがつよい 43 使⽤する際は、以下の⼿順でセットアップが必要です。(VertexAIの場合) 1. $ skeet iam ai 2.
必要な環境変数を設定 a. GCLOUD_PROJECT b. REGION c. GOOGLE_APPLICATION_CREDENTIALS 3. (任意)skeet-cloud.config.jsonの⾔語設定を⽇本語に変更 「3. 実際に使ってみよう」で、詳しい流れを説明しています。 -
2-4. AIモードがつよい 44 Skeet AIには、以下の6モードがあります。 • Prisma スキーマ⾃動⽣成 • 関数⾃動⽣成
• TypeDoc ⾃動⽣成 • Firestore モデル⾃動⽣成 • AI 翻訳 • Firebase Function ⾃動⽣成 -
2-5. 覗き⾒要点ふりかえり 47 2-1. そもそもアプリテンプレートがやばい • 認証、フォームなど初期で導⼊されているので、普通にcreate-react-app(古)を する場合に⽐べて初期構築がとても楽 • テンプレートは4種類あり
web、マルチプラットフォーム(iOS・Android)、Web3と⽤途によって選べる 個⼈的には、Firestore テンプレートがおすすめ -
2-2. 開発環境がいたれりつくせり • 勝⼿にFirebase Emulatorの設定がしてある。お世話になってます • Skeet CLIのcurlコマンド、syncコマンドなど便利。痒い所に⼿が届く • Skeet
Utilsは、各プロジェクトでutils化しているような関数で、⾃作せずとも良い ので便利 2-5. 覗き⾒要点ふりかえり 48 -
2-4. AIモードがつよい • OpenAI、VertexAI、どちらも使⽤できる ファインチューニングもできるので、モデルの微調整もできる • AIモードには6種類のモードがあり、それぞれ場⾯に合わせて使⽤できる • 個⼈的には、以下のコンボが便利で、うれしおどろきさんしょの⽊でした Firestoreモデル⾃動⽣成→Firebase
Function⾃動⽣成→$skeet sync 2-5. 覗き⾒要点ふりかえり 50 -
3-0. 今回の全体像 52 今回は、以下の流れで進めます。 1. アプリ作成 2. 開発環境起動してみる 3. ⼀旦デプロイ
4. AIモードでfunctionを作成してもらう 5. 再デプロイ Next.js (React) + Firestore テンプレートであれば、 基本的に以下の公式セットアップを⾒れば構築できます。 ※環境構築はご⾃⾝でお願いいたします。 https://skeet.dev/ja/doc/skeet-firestore/setup/ -
3-0. 今回の全体像 53 使⽤Skeetテンプレート︓ Next.js (React) + Firestore テンプレート バージョン情報など︓
• Skeet CLI v1.11.26 • TypeScript v5.2.2 • Node.js v18.18.0 • Yarn v1.22.19 • Google Cloud SDK v454.0.0 • Firebase CLI v12.9.1 • GitHub CLI v2.38.0 • Java v21.0.1 -
3-0. 今回の全体像 54 Skeet公式サイトより引⽤ https://skeet.dev/ja/ いま、再びのアーキテクチャ図 インフラの中⾝ • Firestore •
Firebase Authentication • Cloud Functions for Firebase (第2世代) • Cloud Load Balancer • Cloud DNS • Cloud Armor -
3-1. アプリ作成 61 まずは、本⽇の主役、Skeetをインストールします。 $ npm i -g @skeet-framework/cli $
npm install -g firebase-tools そして、firebase-toolsもインストール。 -
3-1. アプリ作成 62 続いて、アプリの作成 $ skeet create <appName> 上記を押すと4テンプレートから選べます。 かこいいアスキーアートと
ともに、アプリ作成完了 あまりにも長い短い名前(6文字以上30文字以下)や、 スネークケースにすると GoogleCloudの構築をするときに不具合が多発します。 ご留意ください。 -
3-2. 開発環境起動してみる 64 開発環境を起動してみます。 作成からすぐフルセット起動できるってすごいですよね。冷静に。 $ skeet s オプションなしなので、フル起動します。 それぞれ以下のポートで起動します。
• Next.js ◦ http://localhost:4200 • Firebase Emulator ◦ http://localhost:4000 -
3-3. ⼀旦デプロイ 71 各種ドメイン名は、書いてある通りですが、こんな感じ。 • your domain address for App
◦ 主にSEO関係に使⽤されていて、 Googleサイトマップインデックス、XMLサイトマップの作成、などを⾏って います。 次のページに続く... -
3-3. ⼀旦デプロイ 72 • your domain address for Domain Name
Server ◦ Cloud DNSの設定を⾏ってくれています。メインドメイン。 • your subdomain address for Load Balancer ◦ こちらも、Cloud DNSの設定を⾏ってくれています。 そのままですが、ロードバランサー⽤のサブドメインです。 -
4. さいごに 93 公式サイトまとめ • Skeet公式 ◦ https://skeet.dev/ja/ • Skeet
Framework Plugin - AI ◦ https://github.com/elsoul/skeet-ai • Google Cloud ◦ https://cloud.google.com/?hl=ja • Next.js ◦ https://nextjs.org/ • Firebase ◦ https://firebase.google.com/?hl=ja