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

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

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

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