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
120
第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
第154回 雲勉 AWS Codeシリーズ盛り上げ隊 ~ Codeシリーズは砕けない ~
iret
0
15
第153回 雲勉 トラシューが秒で終わる新機能 Amazon Q Developer operational investigations
iret
0
45
第150回 雲勉 AWS AppSyncではじめるGraphQL体験
iret
0
41
第151回 雲勉 プロジェクトのドキュメントにおける課題をAmazon Bedrockで解決してみる
iret
0
57
第152回 雲勉 シームレスなマルチリージョンへの移行と検討 ~Amazon EKSとAWS Global Acceleratorを使用した環境〜
iret
0
48
第149回 雲勉 AWS ベストプラクティスの最新と実際 AWS Well-Architected
iret
0
82
第148回 雲勉 Web アプリケーションセキュリティ
iret
0
46
第147回 雲勉 Amazon CloudWatchをウォッチ!
iret
0
58
第146回 雲勉 BLEAを眺めてCDKの書き方について学ぶ
iret
1
70
Other Decks in Technology
See All in Technology
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
Culture Deck
optfit
0
330
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Faster Mobile Websites
deanohume
306
31k
Designing for humans not robots
tammielis
250
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Git: the NoSQL Database
bkeepers
PRO
427
64k
Scaling GitHub
holman
459
140k
Automating Front-end Workflow
addyosmani
1367
200k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
How to Ace a Technical Interview
jacobian
276
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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 ご視聴いただきありがとうございました ですます ありがとう ございました!