Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門
Search
iret.kumoben
November 30, 2023
Technology
0
110
第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門
下記、勉強会での資料です。
https://youtu.be/BX0Q9x4GMBM
iret.kumoben
November 30, 2023
Tweet
Share
More Decks by iret.kumoben
See All by iret.kumoben
第146回 雲勉 BLEAを眺めてCDKの書き方について学ぶ
iret
1
45
第145回 雲勉 Amazon ECSでサービス間通信する方法を調べてみよう
iret
0
39
第144回 雲勉 Amazon Aurora Serverless v2の基礎とアーキの裏側を覗いてみる
iret
0
84
第143回 雲勉 [New Relic]インフラストラクチャ監視と気をつけたいポイント
iret
0
39
第142回 雲勉 AWS Backupの復元テストで自動化できること・できないこと
iret
0
84
第141回 雲勉 Amazon Inspectorによる脆弱性管理~ECR コンテナイメージ編~
iret
0
200
第2回 雲勉LT大会 パブリッククラウドのサーバレスサービスの違いを調べてみた
iret
0
24
第2回 雲勉LT大会 AWS Control Tower の「コントロール」って何? という謎から AWS Control Tower を知る
iret
0
23
第2回 雲勉LT大会 AWS/Google Cloud/Wasabi ストレージサービスを比較したい
iret
0
43
Other Decks in Technology
See All in Technology
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.1k
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
360
強いチームと開発生産性
onk
PRO
33
11k
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
The Cult of Friendly URLs
andyhume
78
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
What's in a price? How to price your products and services
michaelherold
243
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
For a Future-Friendly Web
brad_frost
175
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Designing Experiences People Love
moore
138
23k
Transcript
第120回 雲勉【オンライン】 Skeet を使って Google Cloud で 開発し放題⽣活⼊⾨
0.⾃⼰紹介 2 ▪ ⼩林千紘 • クラウドインテグレーション事業部開発第⼆セクション • アイレット歴は、1年ちょっと • ⻑所は、寝たら忘れること。(だと思ってます)
• よなべして、Skeetさわってます。たのしい。
アジェンダ 3 1. Skeetとは︖ 2. さらにSkeetを覗いてみようのコーナー 3. 実際に使ってみよう 4. さいごに
本⽇のゴール 4 本⽇のゴールは... Skeetを使ってGoogleCloudに開発放題になること です はじめまして!
1. Skeetとは︖ 5
1. Skeetとは︖ 6 みなさん、Skeetをご存知でしょうか︖ 私の偏⾒ですが...、まだきっと多分ご存知でないと思います。(願望・偏⾒) なぜなら、今年の6⽉にリリースほやほやだからです。 そんな、ほやほやSkeetをぜひ触っていただくべくお話しさせていただきます。 \偏⾒/ \ 偏
⾒ /
1. Skeetとは︖ 7 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とは︖ 10 Skeet公式サイトより引⽤ https://skeet.dev/ja/ アーキテクチャ図はこんな感じ
1. Skeetとは︖ 11 Skeet公式サイトより引⽤ https://skeet.dev/ja/ ⼀番ベーシックなwebテンプレート(Next.js (React) + Firestore)はこんな感じ 他に必要な場合は、
GCコンソールをぽちぽち して他のサービスを追加も できます
1. Skeetとは︖ 12 要するに... Skeetを使うことで、開発し放題・コード書き放題 ってわけです やったね
2. さらにSkeetを覗いてみようのコーナー 13
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. 覗きこむ、その前に 16 まずは、なんといっても基本のコマンド。 Skeetアプリを作成します。 ここで、4種類のアプリテンプレートから選択します。 これをしないと何も始まりません。実家。マサラタウン。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-create/ $ skeet
create <appName>
2-0. 覗きこむ、その前に 17 GoogleCloudプロジェクトたちの初期設定、フロント構築、LB作成、Functionsデプロ イ...とアプリ、インフラの初回デプロイを⾏います。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-init/ $ skeet init
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. 覗きこむ、その前に 22 要するに... 豊かなコマンドを駆使して開発を便利に進めていく ってわけです モジュール式万歳
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. そもそもアプリテンプレートがやばい 24
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. 開発環境がいたれりつくせり 31
2-2. 開発環境がいたれりつくせり 32 あれこれ設定せずとも、勝⼿にFirebase Emulatorが使えます。 ワンコマンドで、フルセット起動。24時間戦えます。 $ skeet s オプション指定で、
webや、backendのみの起動もできます。
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-2. 開発環境がいたれりつくせり 36 他にも、Skeet Utilsたちも使い勝⼿がいいので、ぜひ使ってみてください。 どのプロジェクトでも⼤体⾃分たちでutils化してるようなものがあります。 (特に、sendGet, sendPostあたり) https://skeet.dev/ja/doc/plugins/skeet-utils/
2-3. デプロイが簡単ですごい 37
2-3. デプロイが簡単ですごい 38 初期デプロイは先ほど説明した、以下のskeet initでフルセットデプロイできます。 $ skeet init じゃあ、initでデプロイした後は︖どうするんだい︖ そう、そんな時は、これ。
みんな⼤好き、わくわくデプロイコマンド。ワンコマンド、ぽちするだけ。 $ skeet deploy
2-3. デプロイが簡単ですごい 39 先ほども少しでてきましたが、以下のようにweb、skeetなど⼀部のみも選べます。 すると...、茶でもしばいている間にhostingのurlをくれます 自ドメインなしでもデプロイはできますが... 安全性など考慮し、ドメイン取得し設定は行ってくだ さい。 ※ただしネームサーバーの設定など自力で必要です。
2-3. デプロイが簡単ですごい 40 Skeetの設定ファイルは、skeet-cloud.config.json このファイルにプロジェクトIDやらドメイン名やら書き出されていきます。 ただし、使いたいサービス部分(例えばCloud Run)に無理やり設定を書いてもうまく いかない...もよう。たぶん。きっと。 オートスケーリングなどの設定もよしなにしてくれてます。 Functionsの設定は、routings/options配下に作成されていますが、
もちろん、⾃分で作成・修正できます。 「3. 実際に使ってみよう」で、実際にデプロイを⾏います。
2-4. AIモードがつよい 41
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-4. AIモードがつよい 45 個⼈的には、以下のコンボが最強かよって思って暮らしてます。 だいたい通常の開発と同じ流れですね。それをよしなにできるなんて...。 Firestore モデル⾃動⽣成 Firebase Function ⾃動⽣成
$ skeet sync
2-5. 覗き⾒要点ふりかえり 46
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-3. デプロイが簡単ですごい • initコマンド1つで初期デプロイ • ⼀部変更を加えた場合でも、部分的にデプロイできる • そもそも、LBやIAMの設定などが本当にありがたい(インフラややこしい) 2-5. 覗き⾒要点ふりかえり
49
2-4. AIモードがつよい • OpenAI、VertexAI、どちらも使⽤できる ファインチューニングもできるので、モデルの微調整もできる • AIモードには6種類のモードがあり、それぞれ場⾯に合わせて使⽤できる • 個⼈的には、以下のコンボが便利で、うれしおどろきさんしょの⽊でした Firestoreモデル⾃動⽣成→Firebase
Function⾃動⽣成→$skeet sync 2-5. 覗き⾒要点ふりかえり 50
3. 実際に使ってみよう 51
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. アプリ作成 55
3-1. アプリ作成 56 まず、GoogleCloudプロジェクトと、Firebaseプロジェクトを作成します。 先ほど作成した、GCプロジェクトをクリック ※入力の場合、クリックしないと追加されません
3-1. アプリ作成 57 参考︓ 元のテンプレートの内部関数などを使⽤したい場合、Firebaseプロジェクトのセットア ップが必要です。 具体的には、以下3つ使⽤開始します。 • Authentication •
Cloud Firestore • Storage
3-1. アプリ作成 58 参考︓Authentication
3-1. アプリ作成 59 参考︓Cloud Firestore リージョンは、お好きなところで大丈夫です
3-1. アプリ作成 60 参考︓Storage 本番環境モードで良いかと思います。 (限定公開)
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. 開発環境起動してみる 63
3-2. 開発環境起動してみる 64 開発環境を起動してみます。 作成からすぐフルセット起動できるってすごいですよね。冷静に。 $ skeet s オプションなしなので、フル起動します。 それぞれ以下のポートで起動します。
• Next.js ◦ http://localhost:4200 • Firebase Emulator ◦ http://localhost:4000
3-2. 開発環境起動してみる 65 以下のように、まんま公式サイトが⽴ち上がります。
3-3. ⼀旦デプロイ 66
3-3. ⼀旦デプロイ 67 $ skeet init というわけで、デプロイします。init(オプションなし) GoogleCloudプロジェクトとFirebaseプロジェクトのID、リージョンを聞かれます。 先ほどのID・リージョンを答えましょう。
3-3. ⼀旦デプロイ 68 次にFirebase CLIのログイン画⾯に遷移します。 ログインしましょう。 無事、Woohoo! 成功です。
3-3. ⼀旦デプロイ 69 少し待つと、今度は⼩難しいことを聞かれます。 「もう設定したの︖しっかりチェックした︖やったね︕」という意味らしいです。 (by AI翻訳) やったね。こちらも元気にyesを選択しましょう。
3-3. ⼀旦デプロイ 70 すると、怒涛の質問攻めが始まります。 GitHubのリポジトリの名前と、各種ドメイン名を聞かれます。 ちなみに、GitHubのリポジトリは、事前に作成しないでください。怒られます。 また、「Username/希望のリポジトリ名」の形式で⼊⼒してください。
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の設定を⾏ってくれています。 そのままですが、ロードバランサー⽤のサブドメインです。
3-3. ⼀旦デプロイ 73 再びしばらくすると、ホスティングの情報と。
3-3. ⼀旦デプロイ 74 DNSの情報をくれます。 この情報を元にDNS設定をすると、⾃ドメインのhostingができます。 調べるといっぱい出てくるので、設定してみてください。
3-3. ⼀旦デプロイ 75 わくわく、どきどきのデプロイ確認タイム。 先ほどのhosting url(https://XXXXXXXXX.web.app)を開いてみると... 無事デプロイされてます。
3-4. AIモードでfunctionを作成してもらう 76
3-4. AIモードでfunctionを作成してもらう 77 はい。デプロイ祝いも束の間。 AIモードでfunctionを作ってもらいましょう。 ちなみに今回は、デフォルトのVertex AIを使⽤します。 OpenAIの⽅を使⽤する場合APIキーの設定など変わります。 $ skeet
iam ai まず、AIモードを使⽤するための初期設定。
3-4. AIモードでfunctionを作成してもらう 78 と、ちょっと待ったぁ。もうひとつ。 以下もコピペしちまってください。(これに⼩⼀時間悩みました。唐突な⾃分語り) $ export GOOGLE_APPLICATION_CREDENTIALS="keyfile.json" すると必要な環境変数を書き出してくれます。 これをそのまま、ターミナルにコピペ。
3-4. AIモードでfunctionを作成してもらう 79 最後に、⾔語設定を⽇本語に変えます。 デフォルトは、英語なのでそのままでもOK、Goodです。私はニホンゴにします。 プロジェクトルートのskeet-cloud.config.jsonの AIセクション部分の"lang": "ja"としてください。
3-4. AIモードでfunctionを作成してもらう 80 これで動きます。aiコマンドすると... $ skeet ai お⼿伝い(謙遜)してくれます。
3-4. AIモードでfunctionを作成してもらう 81 問いかけに答えてくれます。うれしい。やさしいせかい。
3-4. AIモードでfunctionを作成してもらう 82 もう⼀踏ん張り。 Functionモードにして、作ってもらいます。 AIモードのまま、以下を⼊⼒すると切り替わります。 $ function
3-4. AIモードでfunctionを作成してもらう 83 作って欲しいものを問いかけると... 即座に作ってくれます。
3-4. AIモードでfunctionを作成してもらう 84 中⾝はこんな感じ 個⼈的に…中⾝も書いてくれるとうれしい気持ち。 (あくまで妄想ですが、methodモードで中⾝を別ファイルで書き出してimportする。 という使い⽅を想定してるのかなと思ってます。)
3-4. AIモードでfunctionを作成してもらう 85 参考︓methodモードはこんな感じ
3-5. 再デプロイ 86
3-5. 再デプロイ 87 中⾝を調整して...、フロントに適当なボタンを置いて...デプロイしてみます。 $ skeet deploy hello worldボタンをクリックする と、裏のFunctionが呼ばれます
3-5. 再デプロイ 88 Functionも無事デプロイされてますね。 Functionの中⾝はこんな感じ
3-5. 再デプロイ 89 はい。hello world。デプロイ完了です。
3-5. 再デプロイ 90 注意事項︓ 今回のデモの裏側では、Firebase Functionsのエンドポイントを直接叩く⽅法にしてい ます。(とても⾮推奨です) セキュリティ的にも安全なので、DNSの設定を⾏ってください。 また、DNS設定を⾏うと、fetchSkeetFunctionsでmethodNameを使⽤して叩けるよう になったりなど恩恵は盛りだくさんです。
4. さいごに 91
4. さいごに 92 いかがだったでしょうか。 Skeet、インフラ周りも、アプリ周りも、あれこれやってくれて、 本当に爆速すぎてサービスを乱⽴しすぎないか⼼配です。 ただ、まだ出来⽴てフレームワークなので、すこし...伸びしろだなと思うところもあり ます。 が、伸びしろは、あるほどいい、ということで。成⻑期。私も伸びしろ。 すこしでもSkeetいいな。使ってみたいな。と思っていただけたら幸甚の極みです。
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
4. さいごに 94 最後に⼀⾔ やっぱりエンジニアリングはおもしろい です 万歳!
4. さいごに 95 ご視聴いただきありがとうございました ですます ありがとう ございました!