Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for iret.kumoben iret.kumoben
November 30, 2023

第120回 雲勉【オンライン】Skeet を使って Google Cloud で開発し放題生活入門

下記、勉強会での資料です。
https://youtu.be/BX0Q9x4GMBM

Avatar for iret.kumoben

iret.kumoben

November 30, 2023
Tweet

More Decks by iret.kumoben

Other Decks in Technology

Transcript

  1. 1. Skeetとは︖ 9 • 使⽤⾔語は、TypeScrpit • コマンドを数回ぽちぽちするだけで、デプロイまでしてくれる • 開発環境も⾄れり尽くせりで、王様気分 •

    モジュール式なので⼀部だけ使いたい、というわがままも叶えてくれる • AIモードがあり、問いかけると、よしなに⾊々作成してくれる • アプリのテンプレートが4種類あり web、マルチプラットフォーム(iOS・Android)、Web3など...、選びたい放題 基本情報はこんな感じ などなど...
  2. 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プロジェクトのセットアップに移⾏はしません)
  3. 2-0. 覗きこむ、その前に 20 読んで字のコマンド、ロードバランサー周りのバックエンド設定などしてくれる。 具体的には以下。 • GitHubリポジトリ作成 • ロードバランサーの設定 (使⽤するドメインについて聞いてくる)

    • VPCネットワークを作成 • GitHub Actionsの設定(CI/CD) • Functionsをデプロイ • Cloud Armorの設定 $ skeet init --lb 最低限、先に以下を行っておく必要がありま す。 skeet init --login skeet yarn build(skeet選択)
  4. 2-0. 覗きこむ、その前に 23 initコマンドの中⾝を解体するとこんな感じ $ skeet init --login $ skeet

    yarn build $ skeet init モジュール式を 垣間見た $ skeet sync routings $ skeet deploy $ skeet init --lb buildのうち、 skeetのみ選択 deployのうち、 wepappのみ選択
  5. 2-1. そもそもアプリテンプレートがやばい 25 以下の導⼊にある程度時間かかるものが、⼊ってます。 これにより⼤幅な時間短縮と、最初から夢中でコードが書けます。 • 認証(Firebase Authentication) • フォーム(React

    Hook Form&Zod) • ライドモード・ダークモード実装 • ⽇本語・英語の⾔語切替実装(next-i18next) また、backend側もSchedulerや、Pub/Subのサンプルも⼊っています。 他にも、Httpのプライベート/パブリックのオプションも事前に定義してあるので、 こんな感じに作ればいいのだな。で作れます。お⼿軽。
  6. 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 テンプレートを実際に動かしてみます。
  7. 2-1. そもそもアプリテンプレートがやばい 27 使ってみた感想 Next.js (React) + GraphQL テンプレート •

    DBは、PostgreSQL、バージョン指定が可能 (初期値のv15だとエラーがこんにちはする) • DBのseed, migrateなどのコマンドがSkeet CLIにある。便利 • Next.jsが14に上がった影響︖か、まだ少し不安定 (tsエラーがこんばんはする) • 結果、あれこれ弄ればデプロイできる • とはいえ、GraphQL搭載の環境を簡単に作れて感動 • GraphQL触りたい⼈エンジニア向け、とてもたのしい
  8. 2-1. そもそもアプリテンプレートがやばい 28 使ってみた感想 Next.js (React) + Firestore テンプレート •

    流⽯Firebaseとても安定している • なんとなくデプロイしたい気分になったら⼀番おすすめ • 美しいNext.js、シンプルイズザベスト、というやつ • バックエンド(Functions)は、Node.js • 後ほどたくさん出てきます
  9. 2-1. そもそもアプリテンプレートがやばい 29 使ってみた感想 Expo (React Native) + Firestore テンプレート

    • こちらも流⽯Firebaseとても安定している • 実機の開発環境もらくらくパラダイス(Expo Go使⽤) • エミュレータの設定(iOS, Android)は、skeet yarn iosなどで起動可能 • デプロイも簡単 ただしiOS, Androidは、ビルドして⾃分で申請する必要がありそう (EASコマンドも打てる模様)
  10. 2-1. そもそもアプリテンプレートがやばい 30 使ってみ...た感想 Solana Mobile Stack (Expo) + Web

    (Next.js) - Firestore テンプレート なんかすごい、便利そう...。() (ごめんなさい...、まだ触ってないなんて⾔えない) (圧)
  11. 2-2. 開発環境がいたれりつくせり 34 便利コマンド紹介のコーナー $ skeet curl <methodName> 開発環境のfunctionsをワンコマンドで叩けて便利。⾮常に便利。 環境変数のACCESS_TOKENが必要なので、skeet

    loginで先に発⾏してください。 ただし、ドキュメントにあるproductionはうまく使えませんでした。かなしい。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-curl/
  12. 2-2. 開発環境がいたれりつくせり 35 便利コマンド紹介のコーナー $ skeet sync models なんと、バックエンドのモデルをフロントエンドのモデル(型定義)に同期します。 全世界が待ち望んでいましたね。

    実際の開発でよくある、バックエンドとフロントエンドの定義のずれを 少しは...緩和できそうですね。 他にもroutings、armorsなどあるので何かとsyncにお世話になります。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-sync/
  13. 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. 実際に使ってみよう」で、詳しい流れを説明しています。
  14. 2-4. AIモードがつよい 44 Skeet AIには、以下の6モードがあります。 • Prisma スキーマ⾃動⽣成 • 関数⾃動⽣成

    • TypeDoc ⾃動⽣成 • Firestore モデル⾃動⽣成 • AI 翻訳 • Firebase Function ⾃動⽣成
  15. 2-2. 開発環境がいたれりつくせり • 勝⼿にFirebase Emulatorの設定がしてある。お世話になってます • Skeet CLIのcurlコマンド、syncコマンドなど便利。痒い所に⼿が届く • Skeet

    Utilsは、各プロジェクトでutils化しているような関数で、⾃作せずとも良い ので便利 2-5. 覗き⾒要点ふりかえり 48
  16. 3-0. 今回の全体像 52 今回は、以下の流れで進めます。 1. アプリ作成 2. 開発環境起動してみる 3. ⼀旦デプロイ

    4. AIモードでfunctionを作成してもらう 5. 再デプロイ Next.js (React) + Firestore テンプレートであれば、 基本的に以下の公式セットアップを⾒れば構築できます。 ※環境構築はご⾃⾝でお願いいたします。 https://skeet.dev/ja/doc/skeet-firestore/setup/
  17. 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
  18. 3-0. 今回の全体像 54 Skeet公式サイトより引⽤ https://skeet.dev/ja/ いま、再びのアーキテクチャ図 インフラの中⾝ • Firestore •

    Firebase Authentication • Cloud Functions for Firebase (第2世代) • Cloud Load Balancer • Cloud DNS • Cloud Armor
  19. 3-1. アプリ作成 62 続いて、アプリの作成 $ skeet create <appName> 上記を押すと4テンプレートから選べます。 かこいいアスキーアートと

    ともに、アプリ作成完了 あまりにも長い短い名前(6文字以上30文字以下)や、 スネークケースにすると GoogleCloudの構築をするときに不具合が多発します。 ご留意ください。
  20. 3-3. ⼀旦デプロイ 71 各種ドメイン名は、書いてある通りですが、こんな感じ。 • your domain address for App

    ◦ 主にSEO関係に使⽤されていて、 Googleサイトマップインデックス、XMLサイトマップの作成、などを⾏って います。 次のページに続く...
  21. 3-3. ⼀旦デプロイ 72 • your domain address for Domain Name

    Server ◦ Cloud DNSの設定を⾏ってくれています。メインドメイン。 • your subdomain address for Load Balancer ◦ こちらも、Cloud DNSの設定を⾏ってくれています。 そのままですが、ロードバランサー⽤のサブドメインです。
  22. 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