diff --git a/articles/doc/en/frontend/nextjs-graphql-template.md b/articles/doc/en/frontend/nextjs-graphql-template.md deleted file mode 100644 index 179c265..0000000 --- a/articles/doc/en/frontend/nextjs-graphql-template.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: nextjs-graphql-template -title: Next.js (React) + GraphQL Template -description: Skeet Framework App Template with Next.js (React) and GraphQL ---- - -![Skeet Next.js + GraphQL Template](https://storage.googleapis.com/skeet-assets/imgs/frontend/skeet-next-graphql.png) - -## Skeet App Next.js (React) + GraphQL Template - -Next.js (React) + GraphQL App Environment for Skeet Framework - -[GitHub - Skeet App Next.js + GraphQL Template](https://github.com/elsoul/skeet-graphql) - -## Aiming to - -- Fast Development -- High Performance -- Global Scale -- Maintainable Code -- Strong SEO - -## Summary - -- [x] [Next.js - SSG Framework](https://nextjs.org/) -- [x] [React - UI Framework](https://reactjs.org/) -- [x] [TypeScript - Type Check](https://www.typescriptlang.org/) -- [x] [ESLint - Linter](https://eslint.org/) -- [x] [Prettier - Formatter](https://prettier.io/) -- [x] [Recoil - State Management](https://recoiljs.org/) -- [x] [Next i18next - i18n Translation](https://github.com/isaachinman/next-i18next) -- [x] [Firebase](https://firebase.google.com/) -- [x] [Tailwind - CSS Framework](https://tailwindcss.com/) -- [x] [Relay - GraphQL Client](https://relay.dev/) - -## Dependencies - -- [Watchman (for creating GraphQL Types automatically)](https://facebook.github.io/watchman/docs/install) - -## Usage - -```bash -$ npm i -g firebase-tools -$ npm i -g @skeet-framework/cli -``` - -```bash -$ skeet create -``` - -```bash -$ cd -$ skeet s -``` - -**※ You need OpenAI API key to use ChatGPT.** - -_./functions/skeet/.secret.local_ -or -_./functions/skeet/.env_ - -```bash -CHAT_GPT_KEY=your-key -CHAT_GPT_ORG=your-org -``` - -Test your app: - -```bash -$ skeet test -``` - -Open Firebase Emulator: http://localhost:4000 - -Open Front-end App: http://localhost:4200 diff --git a/articles/doc/en/general/motivation.md b/articles/doc/en/general/motivation.md index 4594d0e..c0979c3 100644 --- a/articles/doc/en/general/motivation.md +++ b/articles/doc/en/general/motivation.md @@ -24,7 +24,7 @@ Skeet allows you to get your app up and running quickly and maintain it for the ## Serverless architecture powered by GCP (Google Cloud) and Firebase -![Effortless Serverless Skeet](/doc-images/motivation/EffortlessServerlessSkeet.png) +![Skeet - Just Build it.](https://storage.googleapis.com/skeet-assets/imgs/v2/SkeetV2EN.jpg) GCP (Google Cloud) and Firebase is an app development platform that helps you build and scale the apps and games your users love. It is a service highly trusted by many companies worldwide, supported by Google's infrastructure. @@ -42,7 +42,7 @@ Furthermore, maintenance costs are significantly reduced. Post-release apps also Skeet is an open-source, full-stack serverless app development solution that makes Firebase and Google Cloud product combinations easier and easier to use. -Skeet CLI is not only for setting, deploying, and managing Firebase products but also for application development, such as VPN network settings, domain and name server settings, load balancer management security settings using Cloud Armor, and CI & CD using GitHub Actions. We provide that with a single command. The database is not only Firestore, but it is also possible to build a GraphQL API using Cloud SQL. Skeet supports full-stack development from backend construction to front-end web, iOS, and Android development. +Skeet CLI is not only for setting, deploying, and managing Firebase products but also for application development, such as VPN network settings, domain and name server settings, load balancer management security settings using Cloud Armor, and CI & CD using GitHub Actions. We provide that with a single command. The database is not only Firestore, but it is also possible to build with multiple Cloud SQLs and NEON serverless Postgres. Skeet supports full-stack development from backend construction to front-end web, iOS, and Android development. In addition, for more scalable and robust application development, we adopt tools useful for development, such as TypeScript, Jest, ESLint & Prettier by default. TypeScript is mainly used for ease of application creation, but it is also possible to build applications that partially utilize machine learning using Python. diff --git a/articles/doc/en/general/overall-architecture.md b/articles/doc/en/general/overall-architecture.md index eea2db3..d013508 100644 --- a/articles/doc/en/general/overall-architecture.md +++ b/articles/doc/en/general/overall-architecture.md @@ -6,13 +6,13 @@ description: Overall Architecture for the development of Skeet, an open-source s ## Overall Architecture Diagram -![Skeet Architecture](https://storage.googleapis.com/skeet-assets/imgs/SkeetArchitecture.png) +![Skeet Architecture](https://storage.googleapis.com/skeet-assets/imgs/v2/SkeetArchitectureV2.jpg) Skeet is an open-source serverless application development framework created with TypeScript. It allows the selection and utilization of necessary features according to the project requirements. Some projects may only need to use Firebase Functions combined with WebAPI. For instance, by using the Discord API, it's possible to omit frontend development and focus on functionality. -As needed, web frontends, mobile apps, or GraphQL servers can be implemented later, and as data accumulates, sophisticated analysis with BigQuery becomes feasible. Furthermore, templates for blockchain wallet compatibility are available, making the development of Web3 apps and dApps immediate. +As needed, web frontends, mobile apps, or Web API servers can be implemented later, and as data accumulates, sophisticated analysis with BigQuery becomes feasible. Furthermore, templates for blockchain wallet compatibility are available, making the development of Web3 apps and dApps immediate. With full support for cloud architecture construction by Skeet CLI, developers can concentrate on application development. Skeet CLI also boasts features like scaffolding and file sharing between frontend and backend, significantly reducing the time needed for feature implementation. Support includes over 80 languages for translation file generation (producing md or json files for app use), Prisma schema file generation, code file creation tailored to Firebase Functions routing (http, pub/sub, scheduler, etc.), and automatic generation of TypeDoc to enhance code maintainability, all supported by generative AI. diff --git a/articles/doc/en/plugins/skeet-utils.md b/articles/doc/en/plugins/skeet-utils.md index 246c0d0..5464bc6 100644 --- a/articles/doc/en/plugins/skeet-utils.md +++ b/articles/doc/en/plugins/skeet-utils.md @@ -22,99 +22,6 @@ Skeet Utils TypeDoc # Http -## `skeetGraphql` Function - -### Description: - -Executes a GraphQL query against a given endpoint. - -### Parameters: - -- `accessToken` (string): The access token for authentication. -- `endpoint` (string): The endpoint URL for the GraphQL server. -- `query` (string): The GraphQL query to execute. -- `variables` (V, optional): Optional variables to be used in the GraphQL query. - -### Returns: - -- (Promise): Returns a promise that resolves to the result of the GraphQL query. - -### Throws: - -Will throw an error if the GraphQL query fails. - -### Example: - -```typescript -import { skeetGraphql } from '@skeet-framework/utils' -import { User } from '@/models' - -const query: CreateUserQuery = `mutation Mutation( - $uid: String - $username: String - $email: String - $iconUrl: String -) { - createUser(uid: $uid, username: $username, email: $email, iconUrl: $iconUrl) { - id - rawId - uid - username - email - iconUrl - role - iv - createdAt - updatedAt - } -}` -const variables: CreateUserParams = { - uid: 'your_uid', - username: 'your_username', - email: 'your_email', - iconUrl: 'your_icon_url', -} -const accessToken = 'your_access_token' -const endpoint = 'https://your-production-endpoint.com/graphql' - -const user = await skeetGraphql( - accessToken, - endpoint, - query -) -console.log(user) -``` - -### Implementation: - -```typescript -export const skeetGraphql = async ( - accessToken: string, - endpoint: string, - query: string, - variables = {} as V -): Promise => { - const baseUrl = - skeetEnv === 'production' ? endpoint : 'http://localhost:3000/graphql' - console.log({ query }) - - try { - const res = await fetch(baseUrl, { - method: 'POST', - body: JSON.stringify({ query, variables }), - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${accessToken}`, - }, - }) - const result: T = await res.json() - return result - } catch (error) { - throw new Error(`skeetGraphql failed: ${error}`) - } -} -``` - ## `sendGet` Function ### Description: diff --git a/articles/doc/en/skeet-ai/function.md b/articles/doc/en/skeet-ai/function.md index e796273..f23d421 100644 --- a/articles/doc/en/skeet-ai/function.md +++ b/articles/doc/en/skeet-ai/function.md @@ -8,9 +8,7 @@ Function mode allows you to automatically generate Firebase Functions. ## Skeet AI YouTube - 7/7. How to Use Function Mode (Video) -YouTube video link: https://youtu.be/mg_KOo5--ZI - -[![How to Use Function Mode](https://storage.googleapis.com/skeet-assets/imgs/youtube/skeet-ai-function-en-7.png)](https://youtu.be/mg_KOo5--ZI) +https://youtu.be/mg_KOo5--ZI ## Launching Function Mode diff --git a/articles/doc/en/skeet-ai/translate.md b/articles/doc/en/skeet-ai/translate.md index b4ba306..c95aa22 100644 --- a/articles/doc/en/skeet-ai/translate.md +++ b/articles/doc/en/skeet-ai/translate.md @@ -30,11 +30,11 @@ $ skeet get files --limit 5 --translate "ja" ], "paths": [ - "/Users/fumi/Dev/ts/skeet-graphql/skeet-cloud.config.json", - "/Users/fumi/Dev/ts/skeet-graphql/functions/skeet/package.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/firebase-export-metadata.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/storage_export/buckets.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/auth_export/config.json" + "/Users/fumi/Dev/ts/skeet-functions/skeet-cloud.config.json", + "/Users/fumi/Dev/ts/skeet-functions/functions/skeet/package.json", + "/Users/fumi/Dev/ts/skeet-functions/tmp/data/firebase-export-metadata.json", + "/Users/fumi/Dev/ts/skeet-functions/tmp/data/storage_export/buckets.json", + "/Users/fumi/Dev/ts/skeet-functions/tmp/data/auth_export/config.json" ] } ? Are you ready to proceed? (Use arrow keys) diff --git a/articles/doc/en/skeet-ai/typedoc.md b/articles/doc/en/skeet-ai/typedoc.md index 1f8d0ab..9954fdb 100644 --- a/articles/doc/en/skeet-ai/typedoc.md +++ b/articles/doc/en/skeet-ai/typedoc.md @@ -17,11 +17,11 @@ You: $ typedoc Skeet: 📚 TypeDoc Mode 📚 ? Please select the file path to generate TypeDoc. (Use arrow keys) -❯ /Users/fumi/Dev/ts/skeet-graphql/tmp/ai/history-ja.jsonl - /Users/fumi/Dev/ts/skeet-graphql/skeet-cloud.config.json - /Users/fumi/Dev/ts/skeet-graphql/graphql/build.ts - /Users/fumi/Dev/ts/skeet-graphql/graphql/devBuild.ts - /Users/fumi/Dev/ts/skeet-graphql/functions/skeet/yarn.lock +❯ /Users/fumi/Dev/ts/skeet-sql/tmp/ai/history-ja.jsonl + /Users/fumi/Dev/ts/skeet-sql/skeet-cloud.config.json + /Users/fumi/Dev/ts/skeet-sql/sql/build.ts + /Users/fumi/Dev/ts/skeet-sql/sql/devBuild.ts + /Users/fumi/Dev/ts/skeet-sql/functions/skeet/yarn.lock ``` Recently edited files will be displayed as candidates. diff --git a/articles/doc/en/skeet-firestore/quickstart.md b/articles/doc/en/skeet-firestore/quickstart.md index 7adebd7..6297cd5 100644 --- a/articles/doc/en/skeet-firestore/quickstart.md +++ b/articles/doc/en/skeet-firestore/quickstart.md @@ -14,10 +14,10 @@ $ npm i -g @skeet-framework/cli ``` If npm is not installed, you can install it with the following command. -(This command installs nodenv, node, npm, @skeet-framework/cli and edits .profile/.zshrc.) +(This command installs pnpm, Java, @skeet-framework/cli and edits .profile/.zshrc.) ```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" +$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)" ``` ## Creating a Google Cloud Project diff --git a/articles/doc/en/skeet-firestore/setup.md b/articles/doc/en/skeet-firestore/setup.md index cfe2bb6..c290fb7 100644 --- a/articles/doc/en/skeet-firestore/setup.md +++ b/articles/doc/en/skeet-firestore/setup.md @@ -43,10 +43,10 @@ $ npm install -g firebase-tools ``` If npm is not installed, you can install it with the following command. -(This command installs nodenv, node, npm, @skeet-framework/cli and edits .profile/.zshrc.) +(This command installs pnpm, Java, @skeet-framework/cli and edits .profile/.zshrc.) ```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" +$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)" $ npm install -g firebase-tools ``` diff --git a/articles/doc/en/skeet-graphql/basic-architecture.md b/articles/doc/en/skeet-graphql/basic-architecture.md deleted file mode 100644 index 7988273..0000000 --- a/articles/doc/en/skeet-graphql/basic-architecture.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: basic-architecture -title: Basic Architecture - GraphQL -description: Describes the basic structure of the Skeet framework GraphQL. Each directory of the application and each command of CLI are explained. ---- - -Skeet Framework can be assembled with a combination of SQL and NoSQL. - -Here we describe the basic structure for building a GraphQL backend. - -The basic structure of the Skeet Framework GraphQL backend is as follows. - -| Common Backend Required Features | Skeet Framework GraphQL | -| -------------------------------- | --------------------------- | -| Databases | Google Cloud SQL | -| Login Authentication | Firebase Authentication | -| API | GraphQL on Google Cloud Run | -| Load Balancer | Cloud Load Balancer | -| Schedule Tasks | Cloud Scheduler | -| Pub/Sub | Cloud Pub/Sub | -| Domains | Cloud DNS | -| Security | Cloud Armor | - -- [Prisma](https://prisma.io) Support for managing RDBMS (Relational Database Management System) -- [GitHub Actions](https://github.com/features/actions) Support CI/CD -- [Firebase Functions](https://firebase.google.com/docs/functions) Supports serverless backend -- [Firebase Emulator](https://firebase.google.com/docs/emulator-suite) Support local development -- [TypeScript](https://www.typescriptlang.org/) Supports type-safe development - -## Basic Structure of Skeet Framework - -_src_ contains the front-end source code. - -Cloud Functions for Firebase projects are placed under the _functions_ directory. - -You can add multiple functions to functions. - -GraphQL API source code is placed under the _graphql_ directory. - -```bash -├── src -│ ├── public -│ └── types -├── graphql -│ ├── prisma -│ └── src -├── functions -│ └── skeet -├── package.json -├── skeet-cloud.config.json -└── firebase.json -``` - -| Directory | Description | -| ----------------------- | ---------------------------------------- | -| src | Frontend source code | -| src/public | Frontend source code | -| src/types | Frontend type definitions | -| graphq/prisma | Prisma source code | -| graphq/src | GraphQL source code | -| functions | Cloud Functions for Firebase source code | -| functions/skeet | functions related to the OpenAI API etc | -| package.json | Backend package management | -| skeet-cloud.config.json | Skeet Framework configuration file | -| firebase.json | Firebase configuration file | - -## Basic Structure of Skeet GraphQL - -Skeet GraphQL uses the following packages. - -- [GraphQL](https://graphql.org/) -- [Apollo Server](https://www.apollographql.com/) -- [Prisma](https://www.prisma.io/) -- [Nexus](https://nexusjs.org/) -- [GraphQL Shield](https://the-guild.dev/graphql/shield) - -The Cloud Functions for Firebase project is placed under the _graphql_ directory. - -e.g.: _graphql_ - -```bash -. -├── Dockerfile -├── build.ts -├── devBuild.ts -├── dist -│ ├── index.js -│ ├── nexus-typegen.ts -│ └── schema.graphql -├── env.sample -├── jest.config.js -├── nodemon.json -├── package.json -├── prisma -│ ├── migrations -│ ├── schema.prisma -│ └── seed.ts -├── src -│ ├── graphql -│ ├── index.ts -│ ├── lib -│ └── schema -├── tests -│ ├── graphql -│ └── jest.setup.ts -├── tsconfig.json -└── yarn.lock -``` - -| Directory | Description | -| -------------------- | ---------------------------------- | -| build.ts | build script | -| devBuild.ts | build script | -| dist | source code after build | -| nodemon.json | Local launch settings | -| package.json | Backend package management | -| src | source code | -| src/index.ts | entry point | -| src/lib | Libraries | -| src/graphql | GraphQL files | -| src/schema | GraphQL Schema/Permission Settings | -| src/scripts | scripts | -| prisma | Prisma file | -| prisma/migrations | Prisma migration file | -| prisma/schema.prisma | Prisma schema file | -| prisma/seed.ts | Prisma seed file | -| tsconfig.json | TypeScript settings | -| yarn.lock | Package lock file | - -## Skeet GraphQL File Structure - -The GraphQL API source code is placed under the _./src_ directory. - -```bash -./src -├── graphql -│ ├── authManager -│ ├── enums.ts -│ ├── index.ts -│ ├── modelManager -│ ├── responseManager -│ └── taskManager -├── index.ts -├── lib -│ ├── firebaseConfig.ts -│ └── getLoginUser.ts -└── schema - ├── Node.ts - ├── index.ts - ├── nexus-typegen.ts - ├── permissions.ts - ├── schema.graphql - └── schema.ts -``` - -## Skeet GraphQL Manager - -Under the _./src/graphql_ directory is a manager that manages GraphQL queries. - -```bash -├── authManager -│ ├── index.ts -│ └── me.ts -├── enums.ts -├── index.ts -├── modelManager -│ ├── ChatRoom -│ ├── ChatRoomMessage -│ ├── User -│ ├── UserChatRoom -│ ├── enums.ts -│ └── index.ts -├── responseManager -│ └── index.ts -└── taskManager - ├── index.ts - └── postTweet.ts -``` - -| manager type | description | -| --------------- | ----------------------------------------------------------------------- | -| authManager | Manage mutations/queries related to authentication. | -| modelManager | CRUD related to the model is automatically generated in this directory. | -| responseManager | Manages mutations/queries on Workers. | -| taskManager | Manage mutations/queries on Tasks. | -| enums.ts | Manage Enums. | - -## Basic Structure of Skeet DB Schema - -Under the _./src/schema_ directory are files that manage GraphQL schemas. - -```bash -./src/schema -├── Node.ts -├── index.ts -├── nexus-typegen.ts -├── schema.graphql -├── permissions.ts -└── schema.ts -``` - -| file name | description | -| ---------------- | --------------------------------------------------- | -| Node.ts | Manages the Node interface. | -| nexus-typegen.ts | File automatically generated by Nexus. | -| schema.graphql | File automatically generated by Nexus. | -| permissions.ts | This file manages permissions using GraphQL Shield. | -| schema.ts | A file that manages the GraphQL schema. | - -## Skeet CLI - -Add new Cloud Functions for Firebase with Skeet CLI, -You can run a yarn command for each function. - -Command list - -```bash -$ skeet --help -Usage: skeet [options] [command] - -CLI for Skeet - Full-stack TypeScript Serverless framework - -Options: - -V, --version output the version number - -h, --help display help for command - -Commands: - create Create Skeet Framework App - server|s Run Skeet App - deploy Deploy Skeet APP to Firebase - init [options] Initialize Google Cloud Setups for Skeet APP - yarn [options] Skeet Yarn Comannd to run yarn command for multiple functions - login [options] Skeet Login Command - Create Firebase Login Token - curl [options] Skeet Curl Command - Call Firebase Functions Endpoint - post [options] Skeet Post Command - Call Skeet GraphQL Endpoint - g|generate Skeet Generate Comannd - docker Docker commands - db Database commands - iam Skeet IAM Comannd to setup Google Cloud Platform - add Skeet Add Comannd to add new functions - sync Skeet Sync Comannd to sync backend and frontend - delete|d Skeet Delete Command - list Get Skeet App List - help [command] display help for command -``` diff --git a/articles/doc/en/skeet-graphql/initial-deploy.md b/articles/doc/en/skeet-graphql/initial-deploy.md deleted file mode 100644 index 91a58c3..0000000 --- a/articles/doc/en/skeet-graphql/initial-deploy.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: initial-deploy -title: Deploy for Production - GraphQL -description: You can learn how to publish your Skeet app. You can also set deploy for each Commit with GitHub Actions with a single command. ---- - -In this chapter, we will create a VPN, configure load balancers, network security, routing, domain settings, etc. -Make the necessary settings for the production environment and deploy the application. - -![画像](https://storage.googleapis.com/skeet-assets/animation/skeet-init-production.gif) - -## Things to prepare in advance - -For this chapter, in addition to the application created in the tutorial, you will need: - -- **Domain to set for load balancer** - - Have a domain that allows you to change nameservers. - -- **GitHub account** - - Prepare a GitHub account and perform login authentication. - The _skeet init_ command creates a GitHub repository and - Deploy with GitHub Actions is configured. - -## Login GitHub CLI Auth - -```bash -$ gh auth login -``` - -## Update Auth/Http instance options - -In the tutorial we created an HTTP instance, -In order to allow access from the load balancer in a private network environment in the production environment, - -Change the option to use from _publicHttpOption_ to _privateHttpOption_. - -_functions/skeet/routings/http/createStreamChatMessage.ts_ - -```typescript -〜 -import { privateHttpOption } from '@/routings' -export const createStreamChatMessage = onRequest( - { ...privateHttpOption, secrets: [chatGptOrg, chatGptKey, SKEET_GRAPHQL_ENDPOINT_URL] }, - async (req: TypedRequestBody, res) => { -〜 -``` - -_functions/skeet/routings/auth/authOnCreateUser.ts_ - -```typescript -〜 -import { privateHttpOption } from '@/routings' -export const authOnCreateUser = functions - .runWith({ - ...authPrivateOption, - secrets: [DISCORD_WEBHOOK_URL, SKEET_GRAPHQL_ENDPOINT_URL], - }) -〜 -``` - -## Deploy for Production with Skeet Init command - -Configure the following settings with the Skeet init command. - -- Select Project ID -- Region selection -- Firebase login -- Specify GitHub repository name -- Nameserver domain settings -- Load balancer subdomain settings - -```bash -$ skeet init -``` - -This command - -- Create a GitHub repository -- Commit/push to GitHub repository -- Configure Actions for GitHub repositories -- Configuring secrets for GitHub repositories -- Google Cloud IAM settings -- Setting up Google Cloud DNS -- Setting up Google Cloud SQL -- Configure Google Cloud Load Balancer -- Configure Google Cloud Armor -- Configuring Google Cloud VPC Network -- Configure Google Cloud VPC Subnet Network -- Configure Google Cloud VPC Connector - -automatically. - -Once configured, you will see the nameserver domain settings in the console log. - -```bash -🚞 === Copy & Paste below nameServer addresses to your DNS Setting === 🚞 - -ns-cloud-a1.googledomains.com. -ns-cloud-a2.googledomains.com. -ns-cloud-a3.googledomains.com. -ns-cloud-a4.googledomains.com. - -👷 === https will be ready in about an hour after your DNS settings === 👷 - -✔ You are all set 🎉 - -📗 Doc: https://skeet.dev -``` - -## Setting nameservers - -Set the four records displayed above to your domain's nameservers. -The domain settings will be reflected in about 30 minutes to 2 hours after the settings are completed. (depending on your nameserver settings) - -You have now completed your first deployment. - -Let's go to https://lb.your-domain.com/root. - -```json -{ - "status": "success", - "message": "Skeet Backend is running!", - "body": {} -} -``` - -is displayed, it is successful. - -## Adding and synchronizing routes - -If you added endpoints, you'll need to synchronize routing after deployment. -This will update the load balancer settings. - -```bash -$ skeet sync routings -``` - -This command will - -- Create network endpoint groups -- Create backend service -- Add backend service -- Apply security policy -- Create URL map - -is done automatically. - -## Add/Synchronize Cloud Armor - -Sync the Cloud Armor configuration described in _skeet-cloud.config.json_. - -_skeet-cloud.config.json_ - -```json -{ - "app": { - "name": "skeet-example", - "projectId": "skeet-example", - "region": "asia-northeast1", - "appDomain": "skeeter.dev", - "functionsDomain": "lb.skeeter.dev", - "hasLoadBalancer": true - }, - "cloudRun": { - "name": "skeet-skeet-graphql-api", - "url": "https://sql.skeet.dev", - "cpu": 1, - "maxConcurrency": 80, - "maxInstances": 100, - "minInstances": 0, - "memory": "4Gi" - }, - "db": { - "databaseVersion": "POSTGRES_15", - "cpu": 1, - "memory": "3840MiB", - "storageSize": 10, - "whiteList": "" - }, - "cloudArmor": [ - { - "securityPolicyName": "skeet-skeet-example-armor", - "rules": [ - { - "priority": "10", - "description": "Allow Your Home IP addresses", - "options": { - "src-ip-ranges": "your IP address", - "action": "allow" - } - }, - { - "priority": "300", - "description": "Defense from NodeJS attack", - "options": { - "action": "deny-403", - "expression": "evaluatePreconfiguredExpr('nodejs-v33-stable')" - } - }, - { - "priority": "2147483647", - "description": "Deny All IP addresses", - "options": { - "action": "deny-403" - } - } - ] - } - ] -} -``` - -By default, only the currently connected global IP is allowed to communicate. -Please change if necessary. - -```bash -$ skeet sync armors -``` - -A new Google Cloud Armor is created or updated. diff --git a/articles/doc/en/skeet-graphql/quickstart.md b/articles/doc/en/skeet-graphql/quickstart.md deleted file mode 100644 index 1fce4c9..0000000 --- a/articles/doc/en/skeet-graphql/quickstart.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: backend-quickstart -title: Quick Start - GraphQL -description: A simple guide to getting started with the Skeet framework. ---- - -This guide will help you quickly get started with the Skeet framework. - -![skeet-prisma](https://storage.googleapis.com/skeet-assets/animation/skeet-prisma.gif) - -## Installing Skeet CLI - -Skeet CLI is a command line tool for efficiently using the Skeet framework. You can install it with the following command. -If npm is already installed, you can install it with the following command. - -```bash -$ npm i -g @skeet-framework/cli -``` - -If npm is not installed, you can install it with the following command. -(This command installs nodenv, node, npm, @skeet-framework/cli and edits .profile/.zshrc.) - -```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" -``` - -## Docker Installation - -Skeet supports local development using Docker. -If Docker is not installed, please refer to the following for installation. - -- [Docker Desktop for Mac](https://docs.docker.com/docker-for-mac/install/) -- [Docker Desktop for Windows](https://docs.docker.com/docker-for-windows/install/) -- [Docker Desktop for Linux](https://docs.docker.com/engine/install/) - -## Creating a Google Cloud Project - -By creating a Google Cloud Project, you can utilize various resources of Google Cloud. Refer to the official Google Cloud documentation to create a new project: - -- [Creating a Google Cloud Project](https://cloud.google.com/resource-manager/docs/creating-managing-projects) - -## Enabling Google Cloud VertexAI - -Skeet is integrated with Google Cloud VertexAI. Use the following command to enable VertexAI: - -```bash -$ skeet iam ai -``` - -## Launching Skeet AI Assistant - -The Skeet AI Assistant is an interactive tool designed to handle various queries: - -```bash -$ skeet ai -``` - -Upon launching, you'll see a prompt like the one below. Try asking it something: - -```` -VertexAI is selected 🀖 (type "q" to quit) - -You: How to install skeet? -Skeet: -To install Skeet, you can use the following command: - -```bash -$ npm install -g @skeet-framework/cli -``` - -This will install the Skeet CLI tool globally on your machine. - -You: - -```` - -## Launching Skeet AI Prisma - -While _skeet ai_ is running, entering _$ prisma_ will switch to database schema generation mode. Upon launching, you'll be prompted to describe your database use case. For instance, try entering, "I want to create a blog site." - -```bash -$ skeet ai -VertexAI is selected 🀖 (type "q" to quit) - -You: $ prisma -🀖 Prisma Scheme Generating Mode 🀖 -Please describe your Database use case. - -You: I want to create a blog site. -model Post { - id Int @id @default(autoincrement()) - title String - content String - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Comment Comment[] - User User @relation(fields: [userId], references: [id]) - userId Int - - @@unique([userId, title]) -} - -model Comment { - id Int @id @default(autoincrement()) - content String - postId Int - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Post Post @relation(fields: [postId], references: [id]) -} - -Edit: ./graphql/prisma/schema.prisma -``` - -A Prisma schema has been generated. - -## Editing Prisma Schema - -The Prisma schema is saved in _./graphql/prisma/schema.prisma_. Edit the schema outputted earlier as required. - -If you haven't used the skeet template yet, create it with the following command: - -```bash -$ skeet create -``` - -Use this schema to migrate your database. - -## Creating/Running DB Migration - -With Skeet, you can perform database migrations using Prisma: - -```bash -$ skeet db migrate -``` - -Your database migration is now complete. - -## Creating GraphQL API - -Skeet can automatically generate a GraphQL API from the schema: - -```bash -$ skeet g scaffold -``` - -## Launching the GraphQL API - -Skeet allows you to run the GraphQL API locally: - -```bash -$ skeet s -``` - -You can access the GraphQL API at: - -- [http://localhost:3000/graphql](http://localhost:3000/graphql) - -## Synchronizing Types - -Skeet can automatically generate TypeScript type definitions from the GraphQL API: - -```bash -$ skeet sync types -``` diff --git a/articles/doc/en/skeet-graphql/setup.md b/articles/doc/en/skeet-graphql/setup.md deleted file mode 100644 index 986be7e..0000000 --- a/articles/doc/en/skeet-graphql/setup.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: setup -title: Setup - GraphQL -description: Describes the setup for getting started with the Skeet framework. ---- - -## 💃 What's Skeet? 🕺 - -⚡ Do more, manage less ⚡ - -Reduce app development and operation costs and realize more plans. - -Skeet is an open-source full-stack app development solution. - -You can start writing app logic immediately without worrying about infrastructure. - -📱 Demo App made by Skeet: https://skeeter.dev/ - -![https://storage.googleapis.com/skeet-assets/animation/skeet-cli-create-latest.gif](https://storage.googleapis.com/skeet-assets/animation/skeet-cli-create-latest.gif) - -## 🧪 Dependency 🧪 - -- [TypeScript](https://www.typescriptlang.org/) ^5.0.0 -- [Node.js](https://nodejs.org/ja/) ^18.17.1 -- [Yarn](https://yarnpkg.com/) ^1.22.19 -- [Google Cloud SDK](https://cloud.google.com/sdk/docs/install) ^430.0.0 -- [Firebase CLI](https://firebase.google.com/docs/cli) ^12.0.0 -- [GitHub CLI](https://cli.github.com/) ^2.29.0 -- [Java](https://www.java.com/en/download/) - -※ We don't write Java but we need it for mobile apps working - -## 📗 Usage 📗 - -### ① Install Skeet/Firebase CLI - -Skeet CLI is a command line tool for efficiently using the Skeet framework. You can install it with the following command. -If npm is already installed, you can install it with the following command. - -```bash -$ npm i -g @skeet-framework/cli -$ npm install -g firebase-tools -``` - -If npm is not installed, you can install it with the following command. -(This command installs nodenv, node, npm, @skeet-framework/cli and edits .profile/.zshrc.) - -```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" -$ npm install -g firebase-tools -``` - -### ② Create Skeet App - -```bash -$ skeet create -``` - -![Skeet Create Select Template](/doc-images/cli/skeet-create-list.png) - -You can choose a template for the frontend. - -- [Next.js (React)](https://nextjs.org/) -- [Expo (React Native)](https://expo.dev/) - -※ This tutorial uses the Expo version, but you can use the same procedure even using the Next.js version. - -### ③ Run Skeet App - -```bash -$ cd -$ skeet s -``` - -Now you have both frontend and backend running locally ⭐ - -📲 Frontend(Next.js) - [http://localhost:4200/](http://localhost:4200/) - -📲 Frontend(Expo) - [http://localhost:19006/](http://localhost:19006/) - -💻 Firebase Emulator - [http://localhost:4000/](http://localhost:4000/) - -**⚠ You need to finish _Activate Skeet ChatApp_ step to fully use default Skeet App ⚠** - -## 🀖 Activate Skeet ChatApp 🀖 - -### ① Create Googel Cloud Project - -Create Google Cloud Project - -- [https://console.cloud.google.com/projectcreate](https://console.cloud.google.com/projectcreate) - -### ② Add Firebase Project - -Add Firebase Project - -- [https://console.firebase.google.com/](https://console.firebase.google.com/) - -### ③ Activate Firebase Build - -#### - Activate Firebase Authentication - -- Activate Firebase Authentication - ![Firebase Authentication](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-auth.png) - -- Activate Email/Password Sign-in - ![Email/Password Sign in](https://storage.googleapis.com/skeet-assets/imgs/backend/enable-fb-auth.png) - -#### - Activate Firebase Firestore - -- Activate Firestore - ![Firestore](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-firestore.png) - -- Select Native Mode - ![Firestore](https://storage.googleapis.com/skeet-assets/imgs/backend/select-env-firestore.png) - -- Select Region - ![Firestore](https://storage.googleapis.com/skeet-assets/imgs/backend/select-region-firestore.png) - -#### - Firebase Storage - -- Activate Firebase Storage - ![Firebase Storage](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-storage.png) - -- Select Native Mode - ![Firebase Storage](https://storage.googleapis.com/skeet-assets/imgs/backend/select-env-storage.png) - -- Select Region - ![Firebase Storage](https://storage.googleapis.com/skeet-assets/imgs/backend/select-region-storage.png) - -### ④ Skeet init to setup project - -Run _skeet init_ command and select your GCP Project ID and Regions to setup. - -Then, please visit the URL to authenticate your Firebase account. - -```bash -// Please login to Google Cloud if you have not -$ gcloud auth login - -$ skeet init --login -? What's your GCP Project ID skeet-demo -? Select Regions to deploy - europe-west1 - europe-west2 - europe-west3 -❯ europe-west6 - northamerica-northeast1 - southamerica-east1 - us-central1 - -Visit this URL on this device to log in: - -https://accounts.google.com/o/oauth2/auth?project... - -Waiting for authentication... -``` - -### â‘€ How to setup Secret Key - -#### - Upgrade to Firebase Blaze Plan - -Skeet Framework uses [Cloud Secret Manager](https://firebase.google.com/docs/functions/config-env?hl=en&gen=2nd) environment variables to manage sensitive information such as API keys. - -This command requires a Firebase Blaze or higher plan. - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/firebase-plan-en.png) - -From the Firebase console's bottom left menu, select _Upgrade_. - -- [Firebase Console](https://console.firebase.google.com/u/0/project/_/usage/details) - -#### - Cloud Usage of Skeet Framework - -Skeet Framework requires a Firebase Blaze plan or higher. - -Google Cloud Free Program should cover the usage fee for the development environment. - -The Google Cloud Free Tier has two parts: - -- A 90-day free trial with a $300 credit to use with any Google Cloud services. -- Always Free, which provides limited access to many common Google Cloud resources, free of charge. - -[Free cloud features and trial offer](https://cloud.google.com/free/docs/free-cloud-features) - -[Firabse Blaze Pricing Plans](https://firebase.google.com/pricing#blaze-calculator) - -**⚠ We also recommend setting things like budget alerts to avoid unexpected charges. ⚠** - -- [Avoid surprise bills](https://firebase.google.com/docs/projects/billing/avoid-surprise-bills) - -#### - Set Secret Key in Cloud Secret Manager - -using the _skeet add secret _ command - -Set the OpenAI Organization ID as an environment variable. - -```bash -$ skeet add secret CHAT_GPT_ORG -? Enter value for CHAT_GPT_ORG: -``` - -Set CHAT_GPT_KEY as well. - -```bash -$ skeet add secret CHAT_GPT_KEY -? Enter value for CHAT_GPT_KEY: -``` - -You can also write it in _functions/skeet/.secret.local_ or _functions/skeet/.env_ to try it easily, -This method does not translate to production environments. - -#### - Create OpenAI API Key - -- [https://beta.openai.com/](https://beta.openai.com/) - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/openai-api-key.png) - -📕 [OpenAI API Document](https://platform.openai.com/docs/introduction) - -Now you are ready to use Skeet ChatApp 🎉 - -## 📱 User Login Auth 📱 - -```bash -$ skeet s -``` - -Run Skeet App locally and access to - -[http://localhost:19006/register](http://localhost:19006/register) -(with Next.js: [http://localhost:4200/auth/register](http://localhost:4200/auth/register)) - -Let's create a new user account with your email address and password. - -![User Register](https://storage.googleapis.com/skeet-assets/imgs/backend/user-register.png) - -After registration, you will see the console log like below. - -![Email Validation](https://storage.googleapis.com/skeet-assets/imgs/backend/email-validation.png) - -Click the link in the console log to verify your email address. - -```bash -To verify the email address epics.dev@gmail.com, follow this link: -``` - -Successfully verified your email address. - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/email-validation-clicked.png) - -## ✉ Create AI Chat Room ✉ - -After login, access this page to create a chat room. - -[http://localhost:19006/user/open-ai-chat](http://localhost:19006/user/open-ai-chat) -(with Next.js: [http://localhost:4200/user/chat](http://localhost:4200/user/chat)) - -Let's create a chat room with the following settings. - -OpenAI Chat Room Settings - -| item | description | type | -| ---------------- | --------------------------------- | --------------------- | -| Model | Select OpenAI API's Model | gpt-3.5-turbo / gpt-4 | -| Max Tokens | Set OpenAI API's Max Tokens | number | -| Temperature | Set OpenAI API's Temperature | number | -| System Charactor | Set OpenAI API's System Charactor | string | - -![OpenAI ChatGPT AI Chat](https://storage.googleapis.com/skeet-assets/imgs/backend/create-chatroom.png) - -Now you are all set 🎉 - -![OpenAI ChatGPT AI Chat](https://storage.googleapis.com/skeet-assets/imgs/backend/skeet-chat-stream.gif) diff --git a/articles/doc/en/skeet-graphql/tutorial.md b/articles/doc/en/skeet-graphql/tutorial.md deleted file mode 100644 index 1514f0f..0000000 --- a/articles/doc/en/skeet-graphql/tutorial.md +++ /dev/null @@ -1,495 +0,0 @@ ---- -id: tutorial -title: Tutorial - GraphQL -description: How to create a chat app using Skeet Framework GraphQL ---- - -## Tutorial - GraphQL - -In this tutorial, we will create a chat app using the Skeet Framework GraphQL. This is a comprehensive cloud app development tutorial that includes the programming language TypeScript, GraphQL, and GitHub. - -![https://storage.googleapis.com/skeet-assets/animation/skeet-db-studio.gif](https://storage.googleapis.com/skeet-assets/animation/skeet-db-studio.gif) - -In this tutorial, we will create a basic chatbot app. In the Quick Start, you learned the basics of using Skeet Framework GraphQL, but in this tutorial, you will learn how the features of the Skeet Framework can make things that were not easy before, easy. We express our deep gratitude to the developers who have published the library as open source. - -The Skeet Framework is designed to allow developers to achieve more with less code by efficiently using computer resources. Furthermore, in today's world where environmental issues are becoming serious, we believe that it is the responsibility of developers to use energy efficiently. - -The techniques you will learn in this tutorial are basic for any Skeet Framework app and mastering them will give you a deep understanding of Skeet. - -In this chapter, we will add new features to the chatbot app using the machine learning (OpenAI) API that we created in the Quick Start. - -## Tutorial Objectives - -In this tutorial, you will learn how to: - -- Define an RDB schema -- Execute database migrations -- Generate GraphQL files using Scaffold -- Obtain a development login authentication key -- Send API requests using the GraphQL Playground -- Deploy to Cloud Run## Prerequisites for the Tutorial - -Please complete the [Quick Start](/en/doc/skeet-graphql/quickstart) if you have not done so already. - -## Development Environment - -Skeet Framework recommends VScode or Cursor as the editor. -By proceeding with development according to the framework, -Get powerful code completion support using GitHub Copilot and OpenAI. - -- [Cursor](https://cursor.sh/) -- [VScode](https://code.visualstudio.com/) -- [GitHub Copilot](https://copilot.github.com/) -- [Eslint](https://eslint.org/) -- [Prettier](https://prettier.io/) - -For chatbots, we use the OpenAI API. - -- [OpenAI](https://openai.com/) - -Skeet GraphQL recommends schema-driven development. With schema-driven development, you can minimize what developers need to focus on by defining a schema. - -For RDBMS, we use PostgreSQL or MySQL. For ORM, we use Prisma. - -- [PostgreSQL](https://www.postgresql.org/) -- [MySQL](https://www.mysql.com/) -- [Prisma](https://www.prisma.io/)## Installation of Skeet CLI - -Skeet CLI is a command-line tool for efficiently using the Skeet framework. You can install it with the following command. - -```bash -$ npm i -g @skeet-framework/cli -``` - -### Example of Vscode/Cursor settings - -By adding the following settings to Vscode's _settings.json_, you can streamline development. -If you use a cursor, you can import the VScode settings as is. - -**⚠ These settings are just an example. ⚠** - -```json -{ - "workbench.colorTheme": "One Monokai", - "files.autoSave": "onFocusChange", - "editor.tabSize": 2, - "editor.wordWrap": "on", - "explorer.confirmDelete": false, - "editor.suggestSelection": "first", - "editor.formatOnSave": true, - "files.autoGuessEncoding": true, - "launch": { - "inputs": [], - "configurations": [], - "compounds": [] - }, - "indentRainbow.errorColor": "rgba(128,32,32,0)", - "security.workspace.trust.untrustedFiles": "open", - "json.schemas": [], - "explorer.confirmDragAndDrop": false, - "[dart]": { - "editor.formatOnSave": true, - "editor.formatOnType": true, - "editor.rulers": [80], - "editor.selectionHighlight": false, - "editor.suggest.snippetsPreventQuickSuggestions": false, - "editor.suggestSelection": "first", - "editor.tabCompletion": "onlySnippets", - "editor.wordBasedSuggestions": false - }, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnType": true, - "terminal.integrated.defaultProfile.linux": "zsh", - "terminal.integrated.enableMultiLinePasteWarning": false, - "debug.disassemblyView.showSourceCode": false, - "typescript.updateImportsOnFileMove.enabled": "always", - "workbench.iconTheme": "material-icon-theme", - "[prisma]": { - "editor.defaultFormatter": "Prisma.prisma" - }, - "editor.inlineSuggest.enabled": true, - "settingsSync.ignoredExtensions": [], - "github.copilot.enable": { - "*": true, - "plaintext": false, - "markdown": true, - "scminput": false - } -} -``` - -The settings for the following files will be automatically set by the _skeet create_ command. - -- .eslintrc.json -- .eslintignore -- .prettierrc -- .prettierignore -- tsconfig.json - -## Defining RDB Schema - -With Skeet Framework, you can automatically generate GraphQL schemas by defining RDB schemas. - -The default model is defined in - -_graphql/prisma/schema.prisma_ - -Sample models necessary for creating a chatbot app using OpenAI and VertexAI APIs are defined. - -### Running the skeet db generate command - -Execute the following command to configure prisma and the database. - -```bash -$ skeet db generate -``` - -### Adding Models - -You can add models directly to _schema.prisma_, - -but by running the _$ prisma_ mode of the _skeet ai_ command, - -you can automatically generate templates for Prisma models. - -Also, by using the _prettier-plugin-prisma_ plugin, you can automatically format Prisma schemas. - -### Running skeet ai in Prisma Mode - -After running the _skeet ai_ command, entering _$ prisma_ will put you in Prisma Mode. - -```bash -$ skeet ai -╔═════════════╀════════════════╗ -│ Option │ Value │ -╟─────────────┌────────────────╢ -│ AI Type │ VertexAI │ -╟─────────────┌────────────────╢ -│ Model │ chat-bison@001 │ -╟─────────────┌────────────────╢ -│ Max Tokens │ 1000 │ -╟─────────────┌────────────────╢ -│ Temperature │ 0 │ -╚═════════════╧════════════════╝ -VertexAI is selected 🀖 (type "q" to quit) -You: $ prisma -Skeet: -🀖 Prisma Scheme Generating Mode 🀖 -Please describe your Database use case. -``` - -You can add models as follows. - -````bash -You: $ prisma -Skeet: -🀖 Prisma Scheme Generating Mode 🀖 -Please describe your Database use case. -You: I want to add a blog feature, so I want to add Post and Comment models. -Skeet: How about this one? - -(Showing only the new parts of the models. prisma format (also there is vscode plugin) will add the relations automatically to the existing models.) - -```prisma.schema -model Post { - id Int @id @default(autoincrement()) - title String - content String - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Comment Comment[] - User User @relation(fields: [userId], references: [id]) - userId Int - - @@unique([userId, title]) -} - -model Comment { - id Int @id @default(autoincrement()) - content String - postId Int - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Post Post @relation(fields: [postId], references: [id]) - User User @relation(fields: [userId], references: [id]) - userId Int -} -``` - -❓ Is this schema good for you? (Yes/No) -```` - -In this way, you can use the skeet ai command to automatically generate model templates. -If you are satisfied with this content, entering _Yes_ will cause the AI to automatically generate and display the next necessary migration command from the schema content. - -```bash -❓ Is this schema good for you? (Yes/No) yes - -Edit: ./graphql/prisma/schema.prisma - -Then run: skeet db migrate addPostAndComment - - -❓ Do you want me to run the migration now? (Yes/No) -``` - -### Editing prisma.schema - -With the skeet framework, you can create migration files using the _skeet db migrate _ command. When you run the _skeet ai_ command as above, it suggests name candidates by inferring from the new schema to add . - -Copy the schema and paste it into _schema.prisma_. When you save, the format is automatically done, and the relations are automatically added. - -### Execute the skeet db migrate command - -Next, if you input _yes_, the command will be executed, and a migration file will be created. - -```bash -❓ Do you want me to run the migration now? (Yes/No) yes -Environment variables loaded from .env -Prisma schema loaded from prisma/schema.prisma -Datasource "db": PostgreSQL database "skeet-api-dev", schema "public" at "localhost:5432" - -Applying migration `20230830074747_add_post_comment_and_user` - -The following migration(s) have been created and applied from new schema changes: - -migrations/ - └─ 20230830074747_add_post_comment_and_user/ - └─ migration.sql - -Your database is now in sync with your schema. - -Running generate... - Nexus Prisma -✔ Generated Prisma Client (v5.2.0) to ./node_modules/@prisma/client in 97ms -✔ Generated Nexus Prisma to ./node_modules/.nexus-prisma in 35ms - -Then run: skeet g scaffold -❓ Do you want me to run scaffold now? (Yes/No) -``` - -### Running the skeet g scaffold command - -Once the migration file is created, you can automatically generate a GraphQL API with CRUD functionality by executing the _skeet g scaffold_ command. - -```bash -❓ Do you want me to run scaffold now? (Yes/No) yes -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/mutation.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/model.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/query.ts 🎉 -✔ successfully created - ./graphql/src/graphql/modelManager/Post/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/mutation.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/model.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/query.ts 🎉 -✔ successfully created - ./graphql/src/graphql/modelManager/Comment/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/index.ts 🎉 -``` - -In this way, with Skeet GraphQL, you can automatically generate GraphQL schemas by defining the schema. - -### Opening the GraphQL Playground - -Now, let's run the _$ skeet s_ command to start the emulator. - -You can also run the _$ skeet_ command within the skeet ai prompt. -_-g_ is the option to start only GraphQL. - -```bash -You: $ skeet s -g -``` - -If you have added a new GraphQL schema, it will be updated by running the _$ skeet s_ command. - -Open the GraphQL Playground and confirm that the schema has been updated. - -[http://localhost:3000/graphql](http://localhost:3000/graphql) - -![https://storage.googleapis.com/skeet-assets/imgs/backend/graphql-playground-post.png](https://storage.googleapis.com/skeet-assets/imgs/backend/graphql-playground-post.png) - -In this way, you can test the GraphQL API from the Apollo Server Playground. - -The GraphQL queries created here can be copied and used to create files in _functions/skeet/src/queries_. Later, you can use the _skeetGraphql_ function to send API requests. - -In Skeet Framework GraphQL, it is recommended to handle data-related processing in the GraphQL API, and to handle tasks and third-party API processing in functions. - -To access the data of the GraphQL API from the instances in Functions, you can use the _skeetGraphql_ function. This allows you to use the queries generated in the Apollo GraphQL Playground to access the GraphQL API directly. - -The _skeetGraphql_ function is included in the _@skeet-framwork/utils_ package. - -For detailed usage, please refer to the following document. - -- [@skeet-framework/utils](/en/doc/plugins/skeet-framework/utils)## Obtaining Development Login Authentication Key - -Let's get started with the development preparation. First, start the Firebase emulator and obtain the _ACCESS_TOKEN_. - -```bash -$ skeet s -``` - -In a separate window, execute the following command to obtain the _accessToken_. - -```bash -$ skeet login -🚞 === Copy & Paste below command to your terminal === 🚞 - -export ACCESS_TOKEN={accessToken} - -🚞 ========= END ========= 🚞 -``` - -By setting the accessToken displayed in the console log as an environment variable, you can send API requests using the _skeetGraphql_ function. - -When the login command is successful, the trigger of the Auth instance defined in _authOnCreateUser.ts_ by default is activated, and user information is saved in Firebase Firestore. - -You can confirm that the user information is saved by accessing the following URL. - -- [http://localhost:4000/auth](http://localhost:4000/auth) - -_functions/skeet/routings/auth/authOnCreateUser.ts_ - -By default, a notification is sent to Discord when a user is created. By setting the _DISCORD_WEBHOOK_URL_ of Discord as an environment variable, you can receive notifications. - -```typescript -import * as functions from 'firebase-functions/v1' -import { authPublicOption } from '@/routings' -import { - gravatarIconUrl, - sendDiscord, - skeetGraphql, -} from '@skeet-framework/utils' -import skeetConfig from '../../../skeetOptions.json' -import { defineSecret } from 'firebase-functions/params' -import { inspect } from 'util' -import { CreateUserQuery } from '@/queries' -const DISCORD_WEBHOOK_URL = defineSecret('DISCORD_WEBHOOK_URL') -const SKEET_GRAPHQL_ENDPOINT_URL = defineSecret('SKEET_GRAPHQL_ENDPOINT_URL') - -const { region } = skeetConfig - -export const authOnCreateUser = functions - .runWith({ - ...authPublicOption, - secrets: [DISCORD_WEBHOOK_URL, SKEET_GRAPHQL_ENDPOINT_URL], - }) - .region(region) - .auth.user() - .onCreate(async (user) => { - try { - if (!user.email) throw new Error(`no email`) - const { uid, email, displayName, photoURL } = user - const accessToken = 'skeet-access-token' - const variables = { - uid: uid, - email: email, - username: displayName || email?.split('@')[0], - iconUrl: - photoURL == '' || !photoURL - ? gravatarIconUrl(email ?? 'info@skeet.dev') - : photoURL, - } - const createUserResponse = await skeetGraphql( - accessToken, - SKEET_GRAPHQL_ENDPOINT_URL.value(), - CreateUserQuery, - variables - ) - - console.log( - inspect(createUserResponse, false, null, true /* enable colors */) - ) - - // Send Discord message when new user is created - const content = `Skeet APP New user: ${variables.username} \nemail: ${variables.email}\niconUrl: ${variables.iconUrl}` - if (process.env.NODE_ENV === 'production') { - await sendDiscord(content) - } - console.log({ status: 'success' }) - } catch (error) { - console.log({ status: 'error', message: String(error) }) - } - }) -``` - -After creating a user in Firestore, the user information is also saved in the relational database used by GraphQL with the same _uid_. - -The _skeetGraphql_ function is used for data exchange between GraphQL and Functions. - -To access data from the GraphQL API from instances in Functions, you can use the _skeetGraphql_ function to use the query generated in the Apollo GraphQL Playground to access the GraphQL API. - -The _skeetGraphql_ function is included in the _@skeet-framwork/utils_ package. - -For detailed usage, please refer to the following document. - -- [@skeet-framework/utils](/en/doc/plugins/skeet-utils) - -In Skeet Framework GraphQL, it is recommended to handle data-related processing in the GraphQL API and handle tasks and third-party API processing in functions. - -## Retrieving User Information - -User information can be retrieved from Firebase using - -_await getLoginUser(req)_ - -```typescript -import { getLoginUser } from '@/lib' - -const user: UserAuthType = await getLoginUser(req) -``` - -The return type definition of getLoginUser is by default as follows: - -```typescript -export type UserAuthType = { - uid: string - username: string - email: string - iconUrl: string -} -``` - -## Deploying to Cloud Run - -```bash -$ skeet deploy -``` - -## Skeet yarn build - -The Skeet yarn build command allows you to build all functions by pressing the 'a' key. - -```bash -$ skeet yarn build -``` - -## Deploying Skeet Framework - -There are two ways to deploy the Skeet Framework. - -- CI/CD with GitHub Actions -- Deployment with Skeet CLI## CI/CD with GitHub Actions - -```bash -$ git add . -$ git commit -m "first deploy" -$ git push origin main -``` - -Once you push to GitHub, the deployment will be carried out automatically by GitHub Actions. - -**⚠ You must complete the [Deploy for Production](/en/doc/skeet-graphql/initial-deploy/). ⚠**## Deploying with Skeet CLI - -```bash -$ skeet deploy -? Select Services to run functions command (Press to select, to toggle all, to invert -selection, and to proceed) - = Services = -❯◯ graphql - ◯ skeet -``` - -Select the _service_ to deploy, -only the selected _service_ will be deployed. -Press 'a' to select all _services_. - -With this, the deployment of the Skeet Framework is complete 🎉 -All that's left is to implement your ideas 🎉 diff --git a/articles/doc/ja/frontend/nextjs-graphql-template.md b/articles/doc/ja/frontend/nextjs-graphql-template.md deleted file mode 100644 index 93755a8..0000000 --- a/articles/doc/ja/frontend/nextjs-graphql-template.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: nextjs-graphql-template -title: Next.js (React) + GraphQL テンプレヌト -description: Skeet フレヌムワヌクのアプリテンプレヌト。Next.js (React) ず GraphQL を䜿甚しおいたす。 ---- - -![Skeet Next.js + GraphQL Template](https://storage.googleapis.com/skeet-assets/imgs/frontend/skeet-next-graphql.png) - -## Skeet App Next.js + GraphQL テンプレヌト - -Next.js (React) + GraphQL 環境 for Skeet Framework - -[GitHub - Skeet App Next.js + GraphQL Template](https://github.com/elsoul/skeet-graphql) - -## 心がけ - -- 迅速な開発 -- ハむパフォヌマンス -- グロヌバルスケヌル(倚蚀語化含む) -- メンテナンスしやすいコヌドベヌス -- SEO に匷い - -## 技術遞定 - -- [x] [Next.js - SSG Framework](https://nextjs.org/) -- [x] [React - UI Framework](https://reactjs.org/) -- [x] [TypeScript - Type Check](https://www.typescriptlang.org/) -- [x] [ESLint - Linter](https://eslint.org/) -- [x] [Prettier - Formatter](https://prettier.io/) -- [x] [Recoil - State Management](https://recoiljs.org/) -- [x] [Next i18next - i18n Translation](https://github.com/isaachinman/next-i18next) -- [x] [Firebase - Hosting & Analytics](https://firebase.google.com/) -- [x] [Tailwind - CSS Framework](https://tailwindcss.com/) -- [x] [Relay - GraphQL Client](https://relay.dev/) - -## 䟝存パッケヌゞ - -- [Watchman (GraphQL タむプを自動生成するのに䜿いたす)](https://facebook.github.io/watchman/docs/install) - -## クむックスタヌト - -```bash -$ npm i -g firebase-tools -$ npm i -g @skeet-framework/cli -``` - -```bash -$ skeet create -``` - -```bash -$ cd -$ skeet s -``` - -**※ OpenAI API key が必芁です** - -_./functions/skeet/.secret.local_ -or -_./functions/skeet/.env_ - -```bash -CHAT_GPT_KEY=your-key -CHAT_GPT_ORG=your-org -``` - -テストコマンド: - -```bash -$ skeet test -``` - -Firebase Emulator: http://localhost:4000 - -Front-end App: http://localhost:4200 diff --git a/articles/doc/ja/general/motivation.md b/articles/doc/ja/general/motivation.md index e74853c..1505170 100644 --- a/articles/doc/ja/general/motivation.md +++ b/articles/doc/ja/general/motivation.md @@ -24,7 +24,7 @@ Skeet は玠早くアプリを立ち䞊げ、少ないコストで長期的に ## GCP (Google Cloud) ず Firebase を掻甚したサヌバヌレスアヌキテクチャ -![Effortless Serverless Skeet](/doc-images/motivation/EffortlessServerlessSkeet.png) +![Skeet - Just Build it.](https://storage.googleapis.com/skeet-assets/imgs/v2/SkeetV2JA.jpg) GCP (Google Cloud)ず Firebase は、ナヌザヌに愛されるアプリやゲヌムの構築ず拡倧を支揎するアプリ開発プラットフォヌムです。Google のむンフラが支える、䞖界䞭の倚くの䌁業から高い信頌を埗おいるサヌビスです。 @@ -42,7 +42,7 @@ GCP (Google Cloud) ず Firebase プロダクトを組み合わせお利甚すれ Skeet は Firebase 及び Google Cloud プロダクトの組み合わせをより簡単に䜿いやすくする、オヌプン゜ヌスのフルスタックサヌバヌレスアプリ開発゜リュヌションです。 -Skeet CLI は Firebase プロダクトの蚭定・デプロむ・管理だけでなく、GCP (Google Cloud)の VPN ネットワヌクの蚭定、ドメむンやネヌムサヌバヌ蚭定、ロヌドバランサヌの管理、Cloud Armor によるセキュリティの蚭定、GitHub Actions による CI & CD など、実際にアプリを開発する䞊で必芁な倚くのこずをワンコマンドで提䟛しおいたす。デヌタベヌスは Firestore だけでなく、Cloud SQL を利甚した GraphQL API を構築するこずも可胜です。Skeet はバック゚ンドの構築から、Web・iOS・Android のフロント゚ンド開発たでフルスタックな開発に察応しおいたす。 +Skeet CLI は Firebase プロダクトの蚭定・デプロむ・管理だけでなく、GCP (Google Cloud)の VPN ネットワヌクの蚭定、ドメむンやネヌムサヌバヌ蚭定、ロヌドバランサヌの管理、Cloud Armor によるセキュリティの蚭定、GitHub Actions による CI & CD など、実際にアプリを開発する䞊で必芁な倚くのこずをワンコマンドで提䟛しおいたす。デヌタベヌスは Firestore だけでなく、耇数の Cloud SQL や サヌバヌレス Postgres の NEON を利甚しおアプリを構築するこずも可胜です。Skeet はバック゚ンドの構築から、Web・iOS・Android のフロント゚ンド開発たでフルスタックな開発に察応しおいたす。 たた、よりスケヌルする堅牢なアプリ開発のため、TypeScript や Jest、ESLint & Prettier 等、開発に圹立぀ツヌル矀をデフォルトで採甚しおいたす。アプリの䜜りやすさからメむンは TypeScript を利甚しおいたすが、郚分的に Python を利甚した機械孊習を掻甚するアプリを構築するこずも可胜になっおいたす。 diff --git a/articles/doc/ja/general/overall-architecture.md b/articles/doc/ja/general/overall-architecture.md index cd74998..adf2f0c 100644 --- a/articles/doc/ja/general/overall-architecture.md +++ b/articles/doc/ja/general/overall-architecture.md @@ -6,13 +6,13 @@ description: オヌプン゜ヌスのサヌバヌレスアプリフレヌムワ ## アヌキテクチャ党䜓図 -![Skeet Architecture](https://storage.googleapis.com/skeet-assets/imgs/SkeetArchitecture.png) +![Skeet Architecture](https://storage.googleapis.com/skeet-assets/imgs/v2/SkeetArchitectureV2.jpg) Skeet は オヌプン゜ヌスの TypeScript 補サヌバヌレスアプリ開発フレヌムワヌクです。 プロゞェクトに合わせお、必芁な機胜を遞択しお利甚するこずができたす。プロゞェクトによっおは WebAPI を組み合わせお䜿う Firebase Functions のみの利甚で枈むかもしれたせん。䟋えば Discord API を掻甚すれば、フロント゚ンド開発を省略しお機胜開発を行うこずもできたす。 -必芁に応じお埌から Web フロント゚ンド、モバむルアプリや GraphQL サヌバヌを甚意したり、デヌタが貯たっおくれば BigQuery を掻甚した高床な分析も可胜です。たた、ブロックチェヌンのりォレット察応のテンプレヌトも甚意しおいるので、すぐに Web3 アプリ・dApps の開発もスタヌトできたす。 +必芁に応じお埌から Web フロント゚ンド、モバむルアプリや Web API サヌバヌを甚意したり、デヌタが貯たっおくれば BigQuery を掻甚した高床な分析も可胜です。たた、ブロックチェヌンのりォレット察応のテンプレヌトも甚意しおいるので、すぐに Web3 アプリ・dApps の開発もスタヌトできたす。 Skeet CLI がクラりドアヌキテクチャの構築をフルサポヌトするため、開発者はアプリケヌション開発に集䞭するこずができたす。たた、Skeet CLI には Scaffold やフロント゚ンドずバック゚ンドのファむル共有機胜も充実しおおり、機胜実装に必芁な時間を倧幅に短瞮するこずができたす。80 ヵ囜語を超える翻蚳ファむル生成サポヌト(アプリで䜿甚する圢で md ファむルや json ファむルを生成したす)や、Prisma のスキヌマファむル生成サポヌト、Firebase Functions のルヌティング(http, pub/sub, scheduler 等)に合わせたコヌドファむル生成、コヌドの保守性を䞊げる TypeDoc の自動生成など、生成 AI によるサポヌトも充実しおいたす。 diff --git a/articles/doc/ja/skeet-ai/translate.md b/articles/doc/ja/skeet-ai/translate.md index 94ef016..0b13c4a 100644 --- a/articles/doc/ja/skeet-ai/translate.md +++ b/articles/doc/ja/skeet-ai/translate.md @@ -30,11 +30,11 @@ $ skeet get files --limit 5 --translate "ja" ], "paths": [ - "/Users/fumi/Dev/ts/skeet-graphql/skeet-cloud.config.json", - "/Users/fumi/Dev/ts/skeet-graphql/functions/skeet/package.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/firebase-export-metadata.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/storage_export/buckets.json", - "/Users/fumi/Dev/ts/skeet-graphql/tmp/data/auth_export/config.json" + "/Users/fumi/Dev/ts/skeet-sql/skeet-cloud.config.json", + "/Users/fumi/Dev/ts/skeet-sql/functions/skeet/package.json", + "/Users/fumi/Dev/ts/skeet-sql/tmp/data/firebase-export-metadata.json", + "/Users/fumi/Dev/ts/skeet-sql/tmp/data/storage_export/buckets.json", + "/Users/fumi/Dev/ts/skeet-sql/tmp/data/auth_export/config.json" ] } ? 実行する準備はできおいたすか (Use arrow keys) diff --git a/articles/doc/ja/skeet-ai/typedoc.md b/articles/doc/ja/skeet-ai/typedoc.md index 35d9bb6..e51c661 100644 --- a/articles/doc/ja/skeet-ai/typedoc.md +++ b/articles/doc/ja/skeet-ai/typedoc.md @@ -17,11 +17,11 @@ You: $ typedoc Skeet: 📚 Typedoc モヌド 📚 ? Typedocを生成するためのファむルパスを遞択しおください。 (Use arrow keys) -❯ /Users/fumi/Dev/ts/skeet-graphql/tmp/ai/history-ja.jsonl - /Users/fumi/Dev/ts/skeet-graphql/skeet-cloud.config.json - /Users/fumi/Dev/ts/skeet-graphql/graphql/build.ts - /Users/fumi/Dev/ts/skeet-graphql/graphql/devBuild.ts - /Users/fumi/Dev/ts/skeet-graphql/functions/skeet/yarn.lock +❯ /Users/fumi/Dev/ts/skeet-sql/tmp/ai/history-ja.jsonl + /Users/fumi/Dev/ts/skeet-sql/skeet-cloud.config.json + /Users/fumi/Dev/ts/skeet-sql/sql/build.ts + /Users/fumi/Dev/ts/skeet-sql/sql/devBuild.ts + /Users/fumi/Dev/ts/skeet-sql/functions/skeet/yarn.lock ``` 最近線集したファむルが候補ずしお衚瀺されたす。 diff --git a/articles/doc/ja/skeet-firestore/quickstart.md b/articles/doc/ja/skeet-firestore/quickstart.md index 86b793d..0b4af59 100644 --- a/articles/doc/ja/skeet-firestore/quickstart.md +++ b/articles/doc/ja/skeet-firestore/quickstart.md @@ -16,10 +16,10 @@ $ npm i -g @skeet-framework/cli ``` npm がむンストヌルされおいない堎合は、以䞋のコマンドでむンストヌルできたす。 -(このコマンドは、nodenv, node, npm, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) +(このコマンドは、pnpm, Java, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) ```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" +$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)" ``` ## Google Cloud Project の䜜成 diff --git a/articles/doc/ja/skeet-firestore/setup.md b/articles/doc/ja/skeet-firestore/setup.md index 5c4742c..70215a9 100644 --- a/articles/doc/ja/skeet-firestore/setup.md +++ b/articles/doc/ja/skeet-firestore/setup.md @@ -46,10 +46,10 @@ $ npm install -g firebase-tools ``` npm がむンストヌルされおいない堎合は、以䞋のコマンドでむンストヌルできたす。 -(このコマンドは、nodenv, node, npm, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) +(このコマンドは、pnpm, Java, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) ```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" +$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)" $ npm install -g firebase-tools ``` diff --git a/articles/doc/ja/skeet-graphql/basic-architecture.md b/articles/doc/ja/skeet-graphql/basic-architecture.md deleted file mode 100644 index 9210b04..0000000 --- a/articles/doc/ja/skeet-graphql/basic-architecture.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: basic-architecture -title: 基本アヌキテクチャ - GraphQL -description: Skeetフレヌムワヌク GraphQL バック゚ンドの基本構造に぀いお説明したす。アプリの各ディレクトリやCLIの各コマンドを解説しおいたす。 ---- - -Skeet Framework は SQL ず NoSQL を組み合わせおアプリを構築できたす。 - -ここでは、GraphQL のバック゚ンドを構築するための基本構造を説明したす。 - -Skeet Framework GraphQL バック゚ンドの基本的な構造は以䞋の通りです。 - -| 䞀般的なバック゚ンドに必芁な機胜 | Skeet Framework GraphQL | -| -------------------------------- | --------------------------- | -| デヌタベヌス | Google Cloud SQL | -| ログむン認蚌 | Firebase Authentication | -| API | GraphQL on Google Cloud Run | -| ロヌドバランサヌ | Cloud Load Balancer | -| スケゞュヌルタスク | Cloud Scheduler | -| Pub/Sub | Cloud Pub/Sub | -| ドメむン | Cloud DNS | -| セキュリティ | Cloud Armor | - -- [Prisma](https://prisma.io) による RDBMSリレヌショナルデヌタベヌス管理システム の管理をサポヌト -- [GitHub Actions](https://github.com/features/actions) による CI/CD をサポヌト -- [Firebase Functions](https://firebase.google.com/docs/functions) によるサヌバヌレスなバック゚ンドをサポヌト -- [Firebase Emulator](https://firebase.google.com/docs/emulator-suite) によるロヌカル開発をサポヌト -- [TypeScript](https://www.typescriptlang.org/) による型安党な開発をサポヌト - -## Skeet Framework の基本構造 - -_src_ にフロント゚ンドの゜ヌスコヌドが配眮されたす。 - -_functions_ ディレクトリ以䞋に Cloud Functions for Firebase のプロゞェクトが配眮されたす。 - -functions には耇数の functions を远加するこずができたす。 - -_graphql_ ディレクトリ以䞋には GraphQL API の゜ヌスコヌドが配眮されたす。 - -```bash -├── src -│ ├── public -│ └── types -├── graphql -│ ├── prisma -│ └── src -├── functions -│ └── skeet -├── package.json -├── skeet-cloud.config.json -└── firebase.json -``` - -| ディレクトリ | 説明 | -| ----------------------- | ------------------------------------------- | -| src | フロント゚ンドの゜ヌスコヌド | -| src/public | フロント゚ンドの゜ヌスコヌド | -| src/types | フロント゚ンドの型定矩 | -| graphq/prisma | Prisma の゜ヌスコヌド | -| graphq/src | GraphQL の゜ヌスコヌド | -| functions | Cloud Functions for Firebase の゜ヌスコヌド | -| functions/skeet | OpenAI API 等に関する functions | -| package.json | バック゚ンドのパッケヌゞ管理 | -| skeet-cloud.config.json | Skeet Framework の蚭定ファむル | -| firebase.json | Firebase の蚭定ファむル | - -## Skeet GraphQL の基本構造 - -Skeet GraphQL は 以䞋のパッケヌゞを䜿甚しおいたす。 - -- [GraphQL](https://graphql.org/) -- [Apollo Server](https://www.apollographql.com/) -- [Prisma](https://www.prisma.io/) -- [Nexus](https://nexusjs.org/) -- [GraphQL Shield](https://the-guild.dev/graphql/shield) - -_graphql_ ディレクトリ以䞋に Cloud Functions for Firebase のプロゞェクトが配眮されたす。 - -䟋: _graphql_ - -```bash -. -├── Dockerfile -├── build.ts -├── devBuild.ts -├── dist -│ ├── index.js -│ ├── nexus-typegen.ts -│ └── schema.graphql -├── env.sample -├── jest.config.js -├── nodemon.json -├── package.json -├── prisma -│ ├── migrations -│ ├── schema.prisma -│ └── seed.ts -├── src -│ ├── graphql -│ ├── index.ts -│ ├── lib -│ └── schema -├── tests -│ ├── graphql -│ └── jest.setup.ts -├── tsconfig.json -└── yarn.lock -``` - -| ディレクトリ | 説明 | -| -------------------- | ------------------------------- | -| build.ts | ビルドスクリプト | -| devBuild.ts | ビルドスクリプト | -| dist | ビルド埌の゜ヌスコヌド | -| nodemon.json | ロヌカルでの起動蚭定 | -| package.json | バック゚ンドのパッケヌゞ管理 | -| src | ゜ヌスコヌド | -| src/index.ts | ゚ントリヌポむント | -| src/lib | ラむブラリ | -| src/graphql | GraphQL ファむル | -| src/schema | GraphQL Schema/Permission 蚭定 | -| src/scripts | スクリプト | -| prisma | Prisma ファむル | -| prisma/migrations | Prisma マむグレヌションファむル | -| prisma/schema.prisma | Prisma スキヌマファむル | -| prisma/seed.ts | Prisma シヌドファむル | -| tsconfig.json | TypeScript の蚭定 | -| yarn.lock | パッケヌゞのロックファむル | - -## Skeet GraphQL ファむル - -_./src_ ディレクトリ以䞋には GraphQL API の゜ヌスコヌドが配眮されたす。 - -```bash -./src -├── graphql -│ ├── authManager -│ ├── enums.ts -│ ├── index.ts -│ ├── modelManager -│ ├── responseManager -│ └── taskManager -├── index.ts -├── lib -│ ├── firebaseConfig.ts -│ └── getLoginUser.ts -└── schema - ├── Node.ts - ├── index.ts - ├── nexus-typegen.ts - ├── permissions.ts - ├── schema.graphql - └── schema.ts -``` - -## Skeet GraphQL マネヌゞャヌの基本構造 - -_./src/graphql_ ディレクトリ以䞋には GraphQL のク゚リを管理するマネヌゞャヌが配眮されたす。 - -```bash -├── authManager -│ ├── index.ts -│ └── me.ts -├── enums.ts -├── index.ts -├── modelManager -│ ├── ChatRoom -│ ├── ChatRoomMessage -│ ├── User -│ ├── UserChatRoom -│ ├── enums.ts -│ └── index.ts -├── responseManager -│ └── index.ts -└── taskManager - ├── index.ts - └── postTweet.ts -``` - -| マネヌゞャヌタむプ | 説明 | -| ------------------ | ------------------------------------------------------------ | -| authManager | 認蚌に関する mutation/query を管理したす。 | -| modelManager | このディレクトリにモデルに関連する CRUD が自動生成されたす。 | -| responseManager | Worker に関する mutation/query を管理したす。 | -| taskManager | Task に関する mutation/query を管理したす。 | -| enums.ts | Enum を管理したす。 | - -## Skeet DB スキヌマ の基本構造 - -_./src/schema_ ディレクトリ以䞋には GraphQL のスキヌマを管理するファむルが配眮されたす。 - -```bash -./src/schema -├── Node.ts -├── index.ts -├── nexus-typegen.ts -├── schema.graphql -├── permissions.ts -└── schema.ts -``` - -| ファむル名 | 説明 | -| ---------------- | --------------------------------------------------- | -| Node.ts | Node むンタヌフェヌスを管理したす。 | -| nexus-typegen.ts | Nexus によっお自動生成されるファむルです。 | -| schema.graphql | Nexus によっお自動生成されるファむルです。 | -| permissions.ts | GraphQL Shield を䜿った暩限管理をするファむルです。 | -| schema.ts | GraphQL のスキヌマを管理するファむルです。 | - -## Skeet CLI - -Skeet CLI を䜿っお新たに Cloud Functions for Firebase を远加したり、 -yarn コマンドを 各ファンクションごずに実行するこずができたす。 - -コマンド䞀芧 - -```bash -$ skeet --help -Usage: skeet [options] [command] - -CLI for Skeet - Full-stack TypeScript Serverless framework - -Options: - -V, --version output the version number - -h, --help display help for command - -Commands: - create Create Skeet Framework App - server|s Run Skeet App - deploy Deploy Skeet APP to Firebase - init [options] Initialize Google Cloud Setups for Skeet APP - yarn [options] Skeet Yarn Comannd to run yarn command for multiple functions - login [options] Skeet Login Command - Create Firebase Login Token - curl [options] Skeet Curl Command - Call Firebase Functions Endpoint - post [options] Skeet Post Command - Call Skeet GraphQL Endpoint - g|generate Skeet Generate Comannd - docker Docker commands - db Database commands - iam Skeet IAM Comannd to setup Google Cloud Platform - add Skeet Add Comannd to add new functions - sync Skeet Sync Comannd to sync backend and frontend - delete|d Skeet Delete Command - list Get Skeet App List - help [command] display help for command -``` diff --git a/articles/doc/ja/skeet-graphql/initial-deploy.md b/articles/doc/ja/skeet-graphql/initial-deploy.md deleted file mode 100644 index 34adc4c..0000000 --- a/articles/doc/ja/skeet-graphql/initial-deploy.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: initial-deploy -title: 本番のデプロむ - GraphQL -description: Skeet アプリを公開する方法に぀いお説明したす。GitHub ActionsによるCommit毎のデプロむもワンコマンドで蚭定できたす。 ---- - -この章では VPN を䜜成し、ロヌドバランサヌやネットワヌクセキュリティ、ルヌティング、ドメむン蚭定など、 -本番環境に必芁な蚭定を行い、アプリケヌションをデプロむしたす。 - -![画像](https://storage.googleapis.com/skeet-assets/animation/skeet-init-production.gif) - -## 事前に甚意するもの - -この章ではチュヌトリアルで䜜成したアプリケヌションに加え以䞋のものが必芁になりたす。 - -- **ロヌドバランサヌに蚭定するドメむン** - - ネヌムサヌバヌを倉曎できるドメむンを甚意しおください。 - -- **GitHub アカりント** - - GitHub アカりントを甚意し、ログむン認蚌をしおください。 - _skeet init_ コマンドで GitHub リポゞトリが䜜成され、 - GitHub Actions によるデプロむが蚭定されたす。 - -## GitHub CLI Auth ログむン - -```bash -$ gh auth login -``` - -## Auth/Http むンスタンスのオプションを曎新 - -チュヌトリアルでは HTTP むンスタンスを䜜成したしたが、 -本番環境ではプラむベヌトなネットワヌク環境でロヌドバランサヌからアクセスできるようにするために、 - -䜿甚するオプションを _publicHttpOption_ から　*privateHttpOption* に倉曎したす。 - -_functions/skeet/routings/http/createStreamChatMessage.ts_ - -```typescript -〜 äž­ç•¥ 〜 -import { privateHttpOption } from '@/routings' -export const createStreamChatMessage = onRequest( - { ...privateHttpOption, secrets: [chatGptOrg, chatGptKey, SKEET_GRAPHQL_ENDPOINT_URL] }, - async (req: TypedRequestBody, res) => { -〜 äž­ç•¥ 〜 -``` - -_functions/skeet/routings/auth/authOnCreateUser.ts_ - -```typescript -〜 äž­ç•¥ 〜 -import { privateHttpOption } from '@/routings' -export const authOnCreateUser = functions - .runWith({ - ...authPrivateOption, - secrets: [DISCORD_WEBHOOK_URL, SKEET_GRAPHQL_ENDPOINT_URL], - }) -〜 äž­ç•¥ 〜 -``` - -同様に、フロント゚ンドぞ公開するむンスタンスの関数のオプションも倉曎したす。 - -## Skeet Init コマンドで本番のデプロむ - -Skeet init コマンドで以䞋の蚭定を行いたす。 - -- Google Cloud プロゞェクト ID の遞択 -- Firebase プロゞェクト ID の遞択 -- リヌゞョンの遞択 -- Firebase ログむン -- GitHub リポゞトリ名を指定 -- Google Cloud SQL のパスワヌド蚭定 -- ネヌムサヌバヌのドメむン蚭定 -- ロヌドバランサヌのサブドメむン蚭定 - -```bash -$ skeet init -``` - -このコマンドにより - -- GitHub リポゞトリの䜜成 -- GitHub リポゞトリぞコミット・プッシュ -- GitHub リポゞトリの Actions の蚭定 -- GitHub リポゞトリの Secrets の蚭定 -- Google Gloud IAM の蚭定 -- Google Cloud DNS の蚭定 -- Google Cloud SQL の蚭定 -- Google Cloud Load Balancer の蚭定 -- Google Cloud Armor の蚭定 -- Google Cloud VPC Network の蚭定 -- Google Cloud VPC Subnet Network の蚭定 -- Google Cloud VPC Connector の蚭定 - -を自動で行いたす。 - -蚭定が完了するずコン゜ヌルログにネヌムサヌバヌのドメむン蚭定が衚瀺されたす。 - -```bash -🚞 === Copy & Paste below nameServer addresses to your DNS Setting === 🚞 - -ns-cloud-a1.googledomains.com. -ns-cloud-a2.googledomains.com. -ns-cloud-a3.googledomains.com. -ns-cloud-a4.googledomains.com. - -👷 === https will be ready in about an hour after your DNS settings === 👷 - -✔ You are all set 🎉 - -📗 Doc: https://skeet.dev -``` - -## ネヌムサヌバヌの蚭定 - -䞊蚘で衚瀺された぀のレコヌドをドメむンのネヌムサヌバヌに蚭定したす。 -蚭定完了埌分〜時間皋床でドメむンの蚭定が反映されたす。ネヌムサヌバヌの蚭定によっお異なりたす - -これで本番のデプロむが完了したした。 - -https://lb.your-domain.com/root にアクセスしおみたしょう。 - -```json -{ - "status": "success", - "message": "Skeet Backend is running!", - "body": {} -} -``` - -ず衚瀺されれば成功です。 - -## ルヌティングの远加・同期 - -゚ンドポむントを远加した堎合には、デプロむ埌にルヌティングの同期を行う必芁がありたす。 -これにより、ロヌドバランサヌの蚭定が曎新されたす。 - -```bash -$ skeet sync routings -``` - -このコマンドにより、 - -- ネットワヌク゚ンドポむントグルヌプの䜜成 -- バック゚ンドサヌビスの䜜成 -- バック゚ンドサヌビスの远加 -- セキュリティヌポリシヌの適甚 -- URL マップの䜜成 - -を自動で行っおいたす。 - -## Cloud Armor の远加・同期 - -_skeet-cloud.config.json_ に蚘述されおいる Cloud Armor の蚭定を同期したす。 - -_skeet-cloud.config.json_ - -```json -{ - "app": { - "name": "skeet-example", - "projectId": "skeet-example", - "region": "asia-northeast1", - "appDomain": "skeeter.dev", - "functionsDomain": "lb.skeeter.dev", - "hasLoadBalancer": true - }, - "cloudRun": { - "name": "skeet-skeet-graphql-api", - "url": "https://sql.skeet.dev", - "cpu": 1, - "maxConcurrency": 80, - "maxInstances": 100, - "minInstances": 0, - "memory": "4Gi" - }, - "db": { - "databaseVersion": "POSTGRES_15", - "cpu": 1, - "memory": "3840MiB", - "storageSize": 10, - "whiteList": "" - }, - "cloudArmor": [ - { - "securityPolicyName": "skeet-skeet-example-armor", - "rules": [ - { - "priority": "10", - "description": "Allow Your Home IP addresses", - "options": { - "src-ip-ranges": "your IP address", - "action": "allow" - } - }, - { - "priority": "300", - "description": "Defense from NodeJS attack", - "options": { - "action": "deny-403", - "expression": "evaluatePreconfiguredExpr('nodejs-v33-stable')" - } - }, - { - "priority": "2147483647", - "description": "Deny All IP addresses", - "options": { - "action": "deny-403" - } - } - ] - } - ] -} -``` - -デフォルトの蚭定では 珟圚接続しおいるグロヌバル IP のみ通信を蚱可しおいたす。 -必芁に応じお倉曎しおください。 - -```bash -$ skeet sync armors -``` - -新芏に Google Cloud Armor を䜜成たたは、曎新されたす。 diff --git a/articles/doc/ja/skeet-graphql/quickstart.md b/articles/doc/ja/skeet-graphql/quickstart.md deleted file mode 100644 index 8a85fff..0000000 --- a/articles/doc/ja/skeet-graphql/quickstart.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -id: backend-quickstart -title: クむックスタヌト - GraphQL -description: Skeet フレヌムワヌクの簡単な始め方を説明したす。 ---- - -Skeet フレヌムワヌクを䜿っおプロゞェクトを迅速に開始するためのガむドです。 - -![skeet-prisma](https://storage.googleapis.com/skeet-assets/animation/skeet-prisma.gif) - -## Skeet CLI のむンストヌル - -Skeet CLI は Skeet フレヌムワヌクを効率的に利甚するためのコマンドラむンツヌルです。以䞋のコマンドでむンストヌルできたす。 -すでに npm がむンストヌルされおいる堎合は、以䞋のコマンドでむンストヌルできたす。 - -```bash -$ npm i -g @skeet-framework/cli -``` - -npm がむンストヌルされおいない堎合は、以䞋のコマンドでむンストヌルできたす。 -(このコマンドは、nodenv, node, npm, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) - -```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" -``` - -## Docker のむンストヌル - -Skeet は、Docker を利甚しおロヌカルでの開発をサポヌトしおいたす。 -Docker がむンストヌルされおいない堎合は、以䞋のを参考にむンストヌルしおください。 - -- [Docker Desktop for Mac](https://docs.docker.com/docker-for-mac/install/) -- [Docker Desktop for Windows](https://docs.docker.com/docker-for-windows/install/) -- [Docker Desktop for Linux](https://docs.docker.com/engine/install/) - -## Google Cloud Project の䜜成 - -Google Cloud Project を䜜成するこずで、Google Cloud の各皮リ゜ヌスを利甚するこずができたす。公匏の Google Cloud ドキュメントを参照しお、新しいプロゞェクトを䜜成しおください。 - -- [Google Cloud プロゞェクトの䜜成](https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja) - -## Google Cloud VertexAI の有効化 - -Skeet は Google Cloud VertexAI ず統合されおいたす。以䞋のコマンドを䜿甚しお VertexAI を有効にしおください。 - -```bash -$ skeet iam ai -``` - -## Skeet AI アシスタントの起動 - -Skeet AI アシスタントは、さたざたなク゚リに察応するためのむンタラクティブなツヌルです。 - -```bash -$ skeet ai -``` - -起動するず、以䞋のようなプロンプトが衚瀺されたす。 -䜕か話しかけおみたしょう。 - -```bash -╔══════════════╀════════════════╗ -│ Option │ Value │ -╟──────────────┌────────────────╢ -│ AIの皮類 │ VertexAI │ -╟──────────────┌────────────────╢ -│ モデル │ chat-bison@001 │ -╟──────────────┌────────────────╢ -│ 最倧トヌクン │ 1000 │ -╟──────────────┌────────────────╢ -│ 感情の倧きさ │ 0 │ -╚══════════════╧════════════════╝ - -🀖 Skeet AIモヌド - $ でAIモヌドを倉曎 🀖 - -$ prisma -$ typedoc -$ translate -$ firestore -$ function -$ method -$ help -$ q - -VertexAI が遞択されたした 🀖 ('q'を入力しお終了) - - -? 䜕をお手䌝いしたしょうか - -あなた: -``` - -## Skeet AI Prisma の起動 - -skeet ai 起動䞭に, _$ prisma_ ず入力するず、 -デヌタベヌスのスキヌマを生成するモヌドになりたす。 -起動するず、デヌタベヌスのナヌスケヌスに関する情報を入力するように求められたす。ここでは、「ブログサむトを䜜りたいです。」ず入力しおみたしょう。 - -```bash -$ skeet ai -VertexAI is selected 🀖 (type "q" to quit) - -You: $ prisma -Skeet: -🀖 Prismaスキヌマ生成モヌド 🀖 -? あなたのPrismaの䜿甚䟋を説明しおください。 - -䟋 ブログアプリを䜜りたい。 - -or - -䟋 次のフィヌルドを持぀新しいモデル、Clientを䜜りたいid、名前、メヌル、パスワヌド、䜜成日、曎新日。 - -あなた: -You: ブログサむトを䜜りたいです。 -model Post { - id Int @id @default(autoincrement()) - title String - content String - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Comment Comment[] - User User @relation(fields: [userId], references: [id]) - userId Int - - @@unique([userId, title]) -} - -model Comment { - id Int @id @default(autoincrement()) - content String - postId Int - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Post Post @relation(fields: [postId], references: [id]) -} - -Edit: ./graphql/prisma/schema.prisma -``` - -Prisma のスキヌマが生成されたした。 - -## Prisma スキヌマの線集 - -Prisma のスキヌマは、 -_./graphql/prisma/schema.prisma_ -に保存されおいたす。 -先ほど出力されたスキヌマを線集しおください。 - -ただ skeet テンプレヌトを利甚しおいない堎合は、 -以䞋のコマンドで skeet テンプレヌトを䜜成しおください。 - -```bash -$ skeet create -``` - -このスキヌマを元に、デヌタベヌスのマむグレヌションを行いたす。 - -## DB マむグレヌションの䜜成/実行 - -Skeet は、Prisma を利甚しおデヌタベヌスのマむグレヌションを行うこずができたす。 - -```bash -$ skeet db migrate -``` - -これで、デヌタベヌスのマむグレヌションが完了したした。 - -## GraphQL API の䜜成 - -Skeet は、スキヌマから GraphQL API を自動生成するこずができたす。 - -```bash -$ skeet g scaffold -``` - -## GraphQL API の起動 - -Skeet は、GraphQL API をロヌカルで起動するこずができたす。 - -```bash -$ skeet s -``` - -以䞋の URL で GraphQL API にアクセスできたす。 - -- [http://localhost:3000/graphql](http://localhost:3000/graphql) - -## Type の同期 - -Skeet は、GraphQL API から TypeScript の型定矩を自動生成するこずができたす。 - -```bash -$ skeet sync types -``` diff --git a/articles/doc/ja/skeet-graphql/setup.md b/articles/doc/ja/skeet-graphql/setup.md deleted file mode 100644 index 8702544..0000000 --- a/articles/doc/ja/skeet-graphql/setup.md +++ /dev/null @@ -1,284 +0,0 @@ ---- -id: setup -title: セットアップ - GraphQL -description: Skeet フレヌムワヌクを䜿い始めるための蚭定に぀いお説明したす。 ---- - -## 🕺 Skeet ずは 💃 - -⚡ Do more, manage less ⚡ - -アプリの開発・運甚コストを䞋げ、もっず倚くのプランを実珟させたしょう。 - -Skeet はオヌプン゜ヌスのフルスタックアプリ開発゜リュヌションです。 -すぐにアプリのロゞックからスタヌトでき、むンフラに関する心配は無甚です。 - -📱 Demo App made by Skeet: https://skeeter.dev/ - -![https://storage.googleapis.com/skeet-assets/animation/skeet-cli-create-latest.gif](https://storage.googleapis.com/skeet-assets/animation/skeet-cli-create-latest.gif) - -## 🧪 䟝存パッケヌゞ 🧪 - -- [TypeScript](https://www.typescriptlang.org/) 5.0.4 以䞊 -- [Node.js](https://nodejs.org/ja/) 18.17.1 以䞊 -- [Yarn](https://yarnpkg.com/) 1.22.19 以䞊 -- [Google Cloud SDK](https://cloud.google.com/sdk/docs/install) 430.0.0 以䞊 -- [Firebase CLI](https://firebase.google.com/docs/cli) 12.0.1 以䞊 -- [GitHub CLI](https://cli.github.com/) 2.29.0 以䞊 -- [Java](https://www.java.com/en/download/) - -※ Skeet においお Java を曞くこずはありたせんが、モバむルアプリを動かすために必芁です - -## 📗 䜿い方 📗 - -### ① パッケヌゞのむンストヌル - -Skeet CLI は Skeet フレヌムワヌクを効率的に利甚するためのコマンドラむンツヌルです。以䞋のコマンドでむンストヌルできたす。 -すでに npm がむンストヌルされおいる堎合は、以䞋のコマンドでむンストヌルできたす。 - -```bash -$ npm i -g @skeet-framework/cli -$ npm install -g firebase-tools -``` - -npm がむンストヌルされおいない堎合は、以䞋のコマンドでむンストヌルできたす。 -(このコマンドは、nodenv, node, npm, @skeet-framework/cli をむンストヌルし .profile/.zshrc を線集したす。) - -```bash -$ sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/v1.0.2-install)" -$ npm install -g firebase-tools -``` - -### ② Skeet アプリの䜜成 - -```bash -$ skeet create -``` - -![Skeet Create Select Template](/doc-images/cli/skeet-create-list.png) - -フロント゚ンドのテンプレヌトを遞択できたす。 - -- [Next.js (React)](https://nextjs.org/) -- [Expo (React Native)](https://expo.dev/) - -※ 本チュヌトリアルでは Expo 版を利甚しおいたすが、Next.js 版を利甚しおも同じ手順で利甚可胜です。 - -たた、オプションを぀けるこずで、バック゚ンドのみのテンプレヌトを遞択できたす。 - -```bash -$ skeet create --backend -``` - -![Skeet Create Select Template](/doc-images/cli/skeet-create-backend-list.png) - -### ③ ロヌカルで起動 - -```bash -$ cd -$ skeet s -``` - -Skeet App フロント゚ンドず Firebase ゚ミュレヌタヌが起動したす。 - -📲 Frontend(Next.js) - [http://localhost:4200/](http://localhost:4200/) - -📲 Frontend(Expo) - [http://localhost:19006/](http://localhost:19006/) - -💻 Firebase Emulator - [http://localhost:4000/](http://localhost:4000/) - -** ⚠ Skeet App を完党に䜿甚するには、_アクティベヌト Skeet ChatApp_ ステップを完了する必芁がありたす ⚠ ** - -## 🀖 アクティベヌト Skeet ChatApp 🀖 - -### ① Googel Cloud Project の䜜成 - -Create Google Cloud Project - -- [https://console.cloud.google.com/projectcreate](https://console.cloud.google.com/projectcreate) - -### ② Firebase Project の远加 - -Add Firebase Project - -- [https://console.firebase.google.com/](https://console.firebase.google.com/) - -### ③ Firebase ビルドの有効化 - -以䞋の぀の Firebase ビルドを有効化しおください。 - -#### - Firebase 認蚌 - -- Firebase Authentication の有効化 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-auth.png) - -- Email/Password ログむンの有効化 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/enable-fb-auth.png) - -#### - Firebase Firestore - -- Firestore の有効化 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-firestore.png) - -- 環境を遞択 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/select-env-firestore.png) - -- リヌゞョンを遞択 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/select-region-firestore.png) - -#### - Firebase Storage - -- Firebase Storage の有効化 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/create-fb-storage.png) - -- 環境を遞択 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/select-env-storage.png) - -- リヌゞョンを遞択 - ![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/select-region-storage.png) - -### ④ Skeet init コマンドの実行 - -_skeet init_ コマンドに _--login_ オプションを付けお実行し、 -プロゞェクト ID ず リヌゞョンを遞択しおください。 -そしお、衚瀺された URL にアクセスし、Firebase アカりントぞログむンしたす。 - -```bash -// Please login to Google Cloud if you have not -$ gcloud auth login - -$ skeet init --login -? What's your GCP Project ID skeet-demo -? Select Regions to deploy - europe-west1 - europe-west2 - europe-west3 -❯ europe-west6 - northamerica-northeast1 - southamerica-east1 - us-central1 - -Visit this URL on this device to log in: - -https://accounts.google.com/o/oauth2/auth?project... - -Waiting for authentication... -``` - -### â‘€ 環境倉数の蚭定方法 - -#### - Firebase Blaze プランぞのアップグレヌド - -Skeet Framework では環境倉数を [Cloud Secret Manager](https://firebase.google.com/docs/functions/config-env?hl=ja&gen=2nd) 䜿っお API キヌなどの機密情報を管理したす。 - -このコマンドを利甚するには、Firebase Blaze 以䞊のプランが必芁です。 - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/firebase-plan.png) - -Firebase コン゜ヌルの巊䞋のメニュヌから、_アップグレヌド_ を遞択したす。 - -- [Firebase コン゜ヌル](https://console.firebase.google.com/u/0/project/_/usage/details) - -#### - Skeet Framework のクラりド䜿甚料に぀いお - -Skeet Framework は Firebase Blaze プラン以䞊のプランが必芁ですが、 -通垞、開発環境ぞの䜿甚料は以䞋の無料枠内で収たりたす。 - -Google Cloud の無料枠には 2 ぀の郚分がありたす - -- 90 日間の無料トラむアル。Google Cloud サヌビスで䜿甚できる 300 ドルのクレゞットが付いおいたす。 -- Always Free は、倚くの䞀般的な Google Cloud リ゜ヌスぞの制限付きアクセスを無料で提䟛したす。 - -[Google Cloud の無料プログラム](https://cloud.google.com/free/docs/free-cloud-features?hl=ja) - -[Firabse Blaze プランの料金](https://firebase.google.com/pricing?hl=ja#blaze-calculator) - -**⚠ たた、想定倖の請求を回避するために、予算のアラヌトなどを蚭定するこずをおすすめしたす。 ⚠** - -- [想定倖の請求を回避する](https://firebase.google.com/docs/projects/billing/avoid-surprise-bills) - -#### - シヌクレットキヌの蚭定 - -_skeet add secret _ コマンドを䜿っお - -OpenAI の Organization ID を環境倉数に蚭定したす。 - -```bash -$ skeet add secret CHAT_GPT_ORG -? Enter value for CHAT_GPT_ORG: -``` - -同様に CHAT_GPT_KEY も蚭定したす。 - -```bash -$ skeet add secret CHAT_GPT_KEY -? Enter value for CHAT_GPT_KEY: -``` - -たた、簡易的に詊すには、_functions/skeet/.secret.local_ か _functions/skeet/.env_ に蚘述するこずもできたすが、 -この方法は、本番環境には反映されたせん。 - -#### - OpenAI の API Key を䜜成・取埗 - -- [OpenAI API](https://beta.openai.com/docs/api-reference/introduction) - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/openai-api-key.png) - -📕 [OpenAI API Document](https://platform.openai.com/docs/introduction) - -これで Skeet App を䜿う準備ができたした 🎉 - -## 📱 ナヌザヌ登録・ログむン認蚌 📱 - -```bash -$ skeet s -``` - -ロヌカルで skeetApp を起動しおいる状態で、 - -[http://localhost:19006/register](http://localhost:19006/register) -(Next.js の堎合: [http://localhost:4200/auth/register](http://localhost:4200/auth/register)) - -にアクセスしおください。 - -メヌルアドレスずパスワヌドを入力しおナヌザヌ登録を行いたす。 - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/user-register.png) - -䜜成が成功するず、コン゜ヌルログに以䞋のようなメッセヌゞが衚瀺されたす。 - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/email-validation.png) - -リンクをクリックし、メヌルアドレスの認蚌を行っおください。 - -```bash -To verify the email address epics.dev@gmail.com, follow this link: -``` - -成功するず、リンク先のペヌゞに以䞋のようなメッセヌゞが衚瀺されたす。 - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/email-validation-clicked.png) - -## ✉ OpenAI チャットルヌムの䜜成 ✉ - -ログむン埌、[http://localhost:19006/user/open-ai-chat](http://localhost:19006/user/open-ai-chat) にアクセスしおください。 -(Next.js の堎合: [http://localhost:4200/user/chat](http://localhost:4200/user/chat)) - -そしお、チャットルヌムを䜜成したす。 - -以䞋の蚭定を遞択しお、チャットルヌムを䜜成しおください。 - -チャットルヌムの蚭定 - -| 項目名 | 説明 | 型 | -| ---------------- | --------------------------------------------- | --------------------- | -| Model | OpenAI API のモデルを遞択したす。 | gpt-3.5-turbo / gpt-4 | -| Max Tokens | OpenAI API の Max Tokens を蚭定したす。 | number | -| Temperature | OpenAI API の Temperature を蚭定したす。 | number | -| System Charactor | OpenAI API の System Charactor を蚭定したす。 | string | - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/create-chatroom.png) - -これで、チャットルヌムが䜿えるようになりたした 🎉 - -![画像](https://storage.googleapis.com/skeet-assets/imgs/backend/skeet-chat-stream.gif) diff --git a/articles/doc/ja/skeet-graphql/tutorial.md b/articles/doc/ja/skeet-graphql/tutorial.md deleted file mode 100644 index 75b5833..0000000 --- a/articles/doc/ja/skeet-graphql/tutorial.md +++ /dev/null @@ -1,552 +0,0 @@ ---- -id: tutorial -title: チュヌトリアル - GraphQL -description: Skeet フレヌムワヌク を䜿っおAIチャットアプリを䜜成するチュヌトリアルです。 ---- - -## チュヌトリアル - GraphQL - -このチュヌトリアルでは Skeet Framework GraphQL を䜿っおチャットアプリを䜜成したす。 -プログラミング蚀語 TypeScript ず GraphQL, GitHub を含めた総合的なクラりドアプリの開発チュヌトリアルです。 - -![https://storage.googleapis.com/skeet-assets/animation/skeet-db-studio.gif](https://storage.googleapis.com/skeet-assets/animation/skeet-db-studio.gif) - -このチュヌトリアルでは 基本的なチャットボットアプリ を䜜成したす。 -クむックスタヌトでは Skeet Framework GraphQL の基本的な䜿い方を孊びたしたが、 -このチュヌトリアルでは Skeet Framework の機胜を䜿っおこれたでには簡単にできなかったこずが、 -どのように簡単にできるようになるかを孊びたす。 -オヌプン゜ヌスずしおラむブラリヌを公開しお䞋さっおいる開発者の方々には倚倧なる感謝を申し䞊げたす。 - -Skeet Framework は、コンピュヌタヌリ゜ヌスを効率的に䜿うこずで、 -開発者がより少ないコヌドでより倚くのこずを実珟できるように蚭蚈されおいたす。 -さらに、昚今の地球では環境問題が深刻化しおおり、゚ネルギヌを効率的に䜿うこずは、 -開発者の責務であるず考えおいたす。 - -このチュヌトリアルで孊ぶ技法はどのような Skeet Framework のアプリにおいおも基本的なものであり、マスタヌするこずで Skeet ぞの深い理解が埗られたす。 - -この章では クむックスタヌトで䜜成した 機械孊習OpenAI の API を䜿ったチャットボットアプリに新しい機胜を远加しおいきたす。 - -## チュヌトリアルの目暙 - -このチュヌトリアルでは、以䞋のこずを孊びたす。 - -- RDB スキヌマを定矩する -- デヌタベヌスのマむグレヌションを実行する -- Scaffold で GraphQL ファむルを生成する -- 開発甚ログむン認蚌キヌを取埗する -- GraphQL Playground を䜿っお API リク゚ストを送信する -- Cloud Run ぞデプロむする - -## チュヌトリアルの前提条件 - -[クむックスタヌト](/ja/doc/skeet-graphql/quickstart) が完了しおいない堎合は先に完了させおください。 - -## 開発環境 - -Skeet Framework では ゚ディタに VScode たたは Cursor を掚奚しおいたす。 -フレヌムワヌクに沿っお開発を進めるこずで、 -GitHub Copilot 及び OpenAI を䜿った匷力なコヌド補完サポヌトを受けるこずができたす。 - -- [Cursor](https://cursor.sh/) -- [VScode](https://code.visualstudio.com/) -- [GitHub Copilot](https://copilot.github.com/) -- [Eslint](https://eslint.org/) -- [Prettier](https://prettier.io/) - -Chatbot には OpenAI の API を䜿いたす。 - -- [OpenAI](https://openai.com/) - -Skeet GraphQL は スキヌマ駆動開発 を掚奚しおいたす。 -スキヌマ駆動開発では、スキヌマを定矩するこずで、 -開発者が意識するべきこずを最小限に抑えるこずができたす。 - -RDBMS には PostgreSQL たたは MySQL を䜿いたす。 -ORM には Prisma を䜿いたす。 - -- [PostgreSQL](https://www.postgresql.org/) -- [MySQL](https://www.mysql.com/) -- [Prisma](https://www.prisma.io/) - -### Vscode/Cursor の蚭定の䟋 - -Vscode の _settings.json_ に次の蚭定を远加するこずで、 -開発を効率化するこずができたす。 -Cursor を䜿う堎合は、VScode の蚭定をそのたたむンポヌトするこずができたす。 - -**⚠ この蚭定はあくたで䟋です。 ⚠** - -```json -{ - "workbench.colorTheme": "One Monokai", - "files.autoSave": "onFocusChange", - "editor.tabSize": 2, - "editor.wordWrap": "on", - "explorer.confirmDelete": false, - "editor.suggestSelection": "first", - "editor.formatOnSave": true, - "files.autoGuessEncoding": true, - "launch": { - "inputs": [], - "configurations": [], - "compounds": [] - }, - "indentRainbow.errorColor": "rgba(128,32,32,0)", - "security.workspace.trust.untrustedFiles": "open", - "json.schemas": [], - "explorer.confirmDragAndDrop": false, - "[dart]": { - "editor.formatOnSave": true, - "editor.formatOnType": true, - "editor.rulers": [80], - "editor.selectionHighlight": false, - "editor.suggest.snippetsPreventQuickSuggestions": false, - "editor.suggestSelection": "first", - "editor.tabCompletion": "onlySnippets", - "editor.wordBasedSuggestions": false - }, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnType": true, - "terminal.integrated.defaultProfile.linux": "zsh", - "terminal.integrated.enableMultiLinePasteWarning": false, - "debug.disassemblyView.showSourceCode": false, - "typescript.updateImportsOnFileMove.enabled": "always", - "workbench.iconTheme": "material-icon-theme", - "[prisma]": { - "editor.defaultFormatter": "Prisma.prisma" - }, - "editor.inlineSuggest.enabled": true, - "settingsSync.ignoredExtensions": [], - "github.copilot.enable": { - "*": true, - "plaintext": false, - "markdown": true, - "scminput": false - } -} -``` - -以䞋のファむルの蚭定に関しおは _skeet create_ コマンドで自動で蚭定されたす。 - -- .eslintrc.json -- .eslintignore -- .prettierrc -- .prettierignore -- tsconfig.json - -## RDB スキヌマを定矩する - -Skeet Framework では RDB スキヌマを定矩するこずで、 -GraphQL のスキヌマを自動生成するこずができたす。 - -デフォルトのモデルは以䞋のパスに定矩されおいたす。 - -_graphql/prisma/schema.prisma_ - -OpenAI ず VertexAI の API を䜿ったチャットボットアプリを䜜成するために必芁なサンプルモデルが定矩されおいたす。 - -### skeet db generate コマンドを実行する - -次のコマンドを実行し、prisma ずデヌタベヌスの蚭定をしたす。 - -```bash -$ skeet db generate -``` - -### モデルを远加する - -_schema.prisma_ に盎接モデルを远加するこずもできたすが、 - -_skeet ai_ コマンドの _$ prisma_ モヌドを実行するこずで、 -Prisma のモデルのテンプレヌトを自動生成するこずができたす。 - -たた、_prettier-plugin-prisma_ のプラグむンを䜿うこずで、 -Prisma のスキヌマを自動フォヌマットするこずができたす。 - -### skeet ai prisma モヌドの実行 - -_skeet ai_ コマンドを実行埌、 _$ prisma_ ず入力するず、 -Prisma モヌドに入りたす。 - -```bash -$ skeet ai -╔═════════════╀════════════════╗ -│ Option │ Value │ -╟─────────────┌────────────────╢ -│ AI Type │ VertexAI │ -╟─────────────┌────────────────╢ -│ Model │ chat-bison@001 │ -╟─────────────┌────────────────╢ -│ Max Tokens │ 1000 │ -╟─────────────┌────────────────╢ -│ Temperature │ 0 │ -╚═════════════╧════════════════╝ -VertexAI is selected 🀖 (type "q" to quit) -You: $ prisma -Skeet: -🀖 Prisma Scheme Generating Mode 🀖 -Please describe your Database use case. -``` - -次のようにモデルを远加するこずができたす。 - -````bash -You: $ prisma -Skeet: -🀖 Prisma Scheme Generating Mode 🀖 -Please describe your Database use case. -You: ブログの機胜を远加したいので、PostずCommentずいうモデルを远加したいです。 -Skeet: How about this one? - -(Showing only the new parts of the models. prisma format (also there is vscode plugin) will add the relations automatically to the existing models.) - -```prisma.schema -model Post { - id Int @id @default(autoincrement()) - title String - content String - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Comment Comment[] - User User @relation(fields: [userId], references: [id]) - userId Int - - @@unique([userId, title]) -} - -model Comment { - id Int @id @default(autoincrement()) - content String - postId Int - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt - Post Post @relation(fields: [postId], references: [id]) - User User @relation(fields: [userId], references: [id]) - userId Int -} -``` - -❓ Is this schema good for you? (Yes/No) -```` - -このように、skeet ai コマンドを䜿うこずで、 -モデルのテンプレヌトを自動生成するこずができたす。 -この内容で良ければ、_Yes_ ず入力するこずで、 -AI が　次に必芁なマむグレヌションコマンドを、 -スキヌマの内容からファむル名を自動生成しお衚瀺したす。 - -```bash -❓ Is this schema good for you? (Yes/No) yes - -Edit: ./graphql/prisma/schema.prisma - -Then run: skeet db migrate addPostAndComment - - -❓ Do you want me to run the migration now? (Yes/No) -``` - -### prisma.schema を線集する - -skeet framework では、_skeet db migrate _ コマンドを䜿っお、 -マむグレヌションファむルを䜜成するこずができたす。 -䞊蚘のように、_skeet ai_ コマンドを実行するず、 - を新しく远加するスキヌマから掚枬しお、 -名前の候補を衚瀺したす。 - -スキヌマをコピヌしお、_schema.prisma_ に貌り付けたす。 -保存を行うず、フォヌマットが自動で行われ、リレヌションが自動で远加されたす。 - -### skeet db migrate コマンドを実行する - -続いお、_yes_ ず入力するず、コマンドが実行され、 -マむグレヌションファむルが䜜成されたす。 - -```bash -❓ Do you want me to run the migration now? (Yes/No) yes -Environment variables loaded from .env -Prisma schema loaded from prisma/schema.prisma -Datasource "db": PostgreSQL database "skeet-api-dev", schema "public" at "localhost:5432" - -Applying migration `20230830074747_add_post_comment_and_user` - -The following migration(s) have been created and applied from new schema changes: - -migrations/ - └─ 20230830074747_add_post_comment_and_user/ - └─ migration.sql - -Your database is now in sync with your schema. - -Running generate... - Nexus Prisma -✔ Generated Prisma Client (v5.2.0) to ./node_modules/@prisma/client in 97ms -✔ Generated Nexus Prisma to ./node_modules/.nexus-prisma in 35ms - -Then run: skeet g scaffold -❓ Do you want me to run scaffold now? (Yes/No) -``` - -### skeet g scaffold コマンドを実行する - -マむグレヌションファむルが䜜成されたら、 -_skeet g scaffold_ コマンドを実行するこずで、 -CRUD 機胜を持぀ GraphQL API を自動生成するこずができたす。 - -```bash -❓ Do you want me to run scaffold now? (Yes/No) yes -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/mutation.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/model.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Post/query.ts 🎉 -✔ successfully created - ./graphql/src/graphql/modelManager/Post/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/mutation.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/model.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/Comment/query.ts 🎉 -✔ successfully created - ./graphql/src/graphql/modelManager/Comment/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/index.ts 🎉 -✔ successfully created ✔ - ./graphql/src/graphql/modelManager/index.ts 🎉 -``` - -このように、Skeet GraphQL では、 -スキヌマを定矩するこずで、 -GraphQL のスキヌマを自動生成するこずができたす。 - -### GraphQL Playground を開く - -それでは _$ skeet s_ コマンドを実行しお、 -゚ミュレヌタヌを起動したしょう。 - -skeet ai のプロンプトの䞭でも _$ skeet_ コマンドを実行するこずができたす。 -_-g_ オプションを぀けるこずで、GraphQL のみを起動するこずができたす。 - -```bash -You: $ skeet s -g -``` - -新しく GraphQL のスキヌマを远加した堎合は、 -_$ skeet s_ コマンドを実行するこずで、新しい GraphQL スキヌマが曎新されたす。 - -GraphQL Playground を開き、 -スキヌマが曎新されおいるこずを確認したしょう。 - -[http://localhost:3000/graphql](http://localhost:3000/graphql) - -![https://storage.googleapis.com/skeet-assets/imgs/backend/graphql-playground-post.png](https://storage.googleapis.com/skeet-assets/imgs/backend/graphql-playground-post.png) - -このように Apollo Server の Playground から、 -GraphQL API をテストするこずができたす。 - -ここで䜜成した GraphQL ク゚リは、コピヌしおそのたた _functions/skeet/src/queries_ にファむルを䜜成するこずで、 埌に、_skeetGraphql_ 関数を䜿っお API リク゚ストを送信するこずができたす。 - -Skeet Framework GraphQL では GraphQL API ではデヌタにた぀わる凊理を行い、 -functions では、タスクやサヌドパヌティヌの API に関する凊理を行うこずを掚奚しおいたす。 - -Functions にあるむンスタンスから GraphQL API のデヌタにアクセスするためには、 -_skeetGraphql_ 関数を䜿うこずで、Apollo GraphQL Playground で生成したク゚リをそのたた利甚しお、 -GraphQL API にアクセスするこずができたす。 - -_skeetGraphql_ 関数は、_@skeet-framwork/utils_ パッケヌゞに含たれおいたす。 - -詳しい䜿い方は次のドキュメントを参照しおください。 - -- [@skeet-framework/utils](/ja/doc/plugins/skeet-framework/utils) - -## 開発甚ログむン認蚌キヌを取埗する - -それではさっそく開発の準備に入りたす。 -たずは Firebase ゚ミュレヌタヌを起動し、_ACCESS_TOKEN_ を取埗したす。 - -```bash -$ skeet s -``` - -別りィンドりで次のコマンドを実行し、 -_accessToken_ を取埗したす。 - -```bash -$ skeet login -🚞 === Copy & Paste below command to your terminal === 🚞 - -export ACCESS_TOKEN={accessToken} - -🚞 ========= END ========= 🚞 -``` - -コン゜ヌルログに衚瀺された accessToken を環境倉数に蚭定するこずで、 - -_skeetGraphql_ 関数を䜿っお API リク゚ストを送信するこずができたす。 - -ログむンコマンドが成功するず、 - -デフォルトで　*authOnCreateUser.ts* に定矩されおいる - -Auth むンスタンスのトリガヌが䜜動しお - -Firebase Firestore にナヌザヌ情報が保存されたす。 - -以䞋の URL にアクセスするず、 -ナヌザヌ情報が保存されおいるこずが確認できたす。 - -- [http://localhost:4000/auth](http://localhost:4000/auth) - -_functions/skeet/routings/auth/authOnCreateUser.ts_ - -デフォルトの蚭定では、ナヌザヌ䜜成時に Discord に通知が送信されたす。 - -環境倉数に Discord の _DISCORD_WEBHOOK_URL_ を蚭定するこずで、 -通知を受け取るこずができたす。 - -```typescript -import * as functions from 'firebase-functions/v1' -import { authPublicOption } from '@/routings' -import { - gravatarIconUrl, - sendDiscord, - skeetGraphql, -} from '@skeet-framework/utils' -import skeetConfig from '../../../skeetOptions.json' -import { defineSecret } from 'firebase-functions/params' -import { inspect } from 'util' -import { CreateUserQuery } from '@/queries' -const DISCORD_WEBHOOK_URL = defineSecret('DISCORD_WEBHOOK_URL') -const SKEET_GRAPHQL_ENDPOINT_URL = defineSecret('SKEET_GRAPHQL_ENDPOINT_URL') - -const { region } = skeetConfig - -export const authOnCreateUser = functions - .runWith({ - ...authPublicOption, - secrets: [DISCORD_WEBHOOK_URL, SKEET_GRAPHQL_ENDPOINT_URL], - }) - .region(region) - .auth.user() - .onCreate(async (user) => { - try { - if (!user.email) throw new Error(`no email`) - const { uid, email, displayName, photoURL } = user - const accessToken = 'skeet-access-token' - const variables = { - uid: uid, - email: email, - username: displayName || email?.split('@')[0], - iconUrl: - photoURL == '' || !photoURL - ? gravatarIconUrl(email ?? 'info@skeet.dev') - : photoURL, - } - const createUserResponse = await skeetGraphql( - accessToken, - SKEET_GRAPHQL_ENDPOINT_URL.value(), - CreateUserQuery, - variables - ) - - console.log( - inspect(createUserResponse, false, null, true /* enable colors */) - ) - - // Send Discord message when new user is created - const content = `Skeet APP New user: ${variables.username} \nemail: ${variables.email}\niconUrl: ${variables.iconUrl}` - if (process.env.NODE_ENV === 'production') { - await sendDiscord(content) - } - console.log({ status: 'success' }) - } catch (error) { - console.log({ status: 'error', message: String(error) }) - } - }) -``` - -Firestore にナヌザヌを䜜成埌、GraphQL で䜿甚しおいるリレヌショナルデヌタベヌスにも、 -同じ _uid_ でナヌザヌ情報が保存されたす。 - -GraphQL ず Functions 間のデヌタのやり取りには _skeetGraphql_ 関数を䜿っおいたす。 - -Functions にあるむンスタンスから GraphQL API のデヌタにアクセスするためには、 -_skeetGraphql_ 関数を䜿うこずで、Apollo GraphQL Playground で生成したク゚リをそのたた利甚しお、 -GraphQL API にアクセスするこずができたす。 - -_skeetGraphql_ 関数は、_@skeet-framwork/utils_ パッケヌゞに含たれおいたす。 - -詳しい䜿い方は次のドキュメントを参照しおください。 - -- [@skeet-framework/utils](/ja/doc/plugins/skeet-utils) - -Skeet Framework GraphQL では GraphQL API ではデヌタにた぀わる凊理を行い、 -functions では、タスクやサヌドパヌティヌの API に関する凊理を行うこずを掚奚しおいたす。 - -## ナヌザヌ情報の取埗 - -ナヌザヌ情報は、 - -_await getLoginUser(req)_ - -を䜿っお Firebase から取埗したす。 - -```typescript -import { getLoginUser } from '@/lib' - -const user: UserAuthType = await getLoginUser(req) -``` - -getLoginUser の戻り倀の型定矩はデフォルトで次のようになっおいたす。 - -```typescript -export type UserAuthType = { - uid: string - username: string - email: string - iconUrl: string -} -``` - -## Cloud Run ぞデプロむする - -```bash -$ skeet deploy -``` - -## Skeet yarn build - -Skeet yarn build コマンドで -a キヌを抌すず、党おのファンクションのビルドが行われたす。 - -```bash -$ skeet yarn build -``` - -## Skeet Framework のデプロむ - -Skeet Framework に 2 皮類のデプロむ方法がありたす。 - -- GitHub Actions による CI/CD -- Skeet CLI によるデプロむ - -## GitHub Actions による CI/CD - -```bash -$ git add . -$ git commit -m "first deploy" -$ git push origin main -``` - -GitHub に push するず、GitHub Actions により、自動でデプロむが行われたす。 - -**⚠ [本番のデプロむ](/ja/doc/skeet-graphql/initial-deploy/) を完了させる必芁がありたす。 ⚠** - -## Skeet CLI によるデプロむ - -```bash -$ skeet deploy -? Select Services to run functions command (Press to select, to toggle all, to invert -selection, and to proceed) - = Services = -❯◯ graphql - ◯ skeet -``` - -デプロむする _service_ を遞択し, -遞択された _service_ のみをデプロむしたす。 -a を抌すず党おの _service_ を遞択したす。 - -これで、Skeet Framework のデプロむは完了です 🎉 -あずはあなたのアむディアを実装するだけです 🎉 diff --git a/articles/v1doc/en/skeet-ai/function.md b/articles/v1doc/en/skeet-ai/function.md index e796273..f23d421 100644 --- a/articles/v1doc/en/skeet-ai/function.md +++ b/articles/v1doc/en/skeet-ai/function.md @@ -8,9 +8,7 @@ Function mode allows you to automatically generate Firebase Functions. ## Skeet AI YouTube - 7/7. How to Use Function Mode (Video) -YouTube video link: https://youtu.be/mg_KOo5--ZI - -[![How to Use Function Mode](https://storage.googleapis.com/skeet-assets/imgs/youtube/skeet-ai-function-en-7.png)](https://youtu.be/mg_KOo5--ZI) +https://youtu.be/mg_KOo5--ZI ## Launching Function Mode diff --git a/src/components/articles/doc/DocIndex.tsx b/src/components/articles/doc/DocIndex.tsx index d1eac6e..38b04c6 100644 --- a/src/components/articles/doc/DocIndex.tsx +++ b/src/components/articles/doc/DocIndex.tsx @@ -26,7 +26,7 @@ const actions = [ { title: 'doc:actions.quickstart.title', body: 'doc:actions.quickstart.body', - href: '/doc/skeet-graphql/quickstart', + href: '/doc/skeet-firestore/quickstart', icon: RocketLaunchIcon, iconForeground: 'text-yellow-700', iconBackground: 'bg-yellow-50', @@ -34,7 +34,7 @@ const actions = [ { title: 'doc:actions.tutorial.title', body: 'doc:actions.tutorial.body', - href: '/doc/skeet-graphql/tutorial', + href: '/doc/skeet-firestore/tutorial', icon: AcademicCapIcon, iconForeground: 'text-green-700', iconBackground: 'bg-green-50', @@ -42,7 +42,7 @@ const actions = [ { title: 'doc:actions.initial-deploy.title', body: 'doc:actions.initial-deploy.body', - href: '/doc/skeet-graphql/initial-deploy', + href: '/doc/skeet-firestore/initial-deploy', icon: CloudArrowUpIcon, iconForeground: 'text-teal-700', iconBackground: 'bg-teal-50', @@ -50,7 +50,7 @@ const actions = [ { title: 'doc:actions.basic-architecture.title', body: 'doc:actions.basic-architecture.body', - href: '/doc/skeet-graphql/basic-architecture', + href: '/doc/skeet-firestore/basic-architecture', icon: BookOpenIcon, iconForeground: 'text-blue-700', iconBackground: 'bg-blue-50', @@ -66,7 +66,7 @@ const actions = [ { title: 'doc:actions.nextjs-template.title', body: 'doc:actions.nextjs-template.body', - href: '/doc/frontend/nextjs-graphql-template', + href: '/doc/frontend/nextjs-firestore-template', icon: DevicePhoneMobileIcon, iconForeground: 'text-cyan-700', iconBackground: 'bg-cyan-50', diff --git a/src/components/pages/home/HeroRow.tsx b/src/components/pages/home/HeroRow.tsx index d752113..e7e5ea7 100644 --- a/src/components/pages/home/HeroRow.tsx +++ b/src/components/pages/home/HeroRow.tsx @@ -17,7 +17,7 @@ import { BookOpenIcon } from '@heroicons/react/24/outline' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faGithub } from '@fortawesome/free-brands-svg-icons' -const downloadScript = `sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)"` +const installScript = `sh -c "$(curl -sSfL https://storage.googleapis.com/skeet-assets/resources/install-v1.5.0)"` export default function HomeHeroRow() { const { t, i18n } = useTranslation() @@ -25,7 +25,7 @@ export default function HomeHeroRow() { const [copyText, setCopyText] = useState('common:copy') const handleClick = useCallback(() => { - copyToClipboard(downloadScript) + copyToClipboard(installScript) setCopyText('common:copied') setTimeout(() => { @@ -113,7 +113,7 @@ export default function HomeHeroRow() {
-

$ {downloadScript}

+

$ {installScript}

diff --git a/src/config/navs.ts b/src/config/navs.ts index f17e59b..31e36eb 100644 --- a/src/config/navs.ts +++ b/src/config/navs.ts @@ -101,11 +101,6 @@ const skeetCliNav = [ href: '/doc/skeet-cli/skeet-cli-iam/', icon: CommandLineIcon, }, - { - name: 'doc:menuNav.skeet-cli.yarn', - href: '/doc/skeet-cli/skeet-cli-yarn/', - icon: CommandLineIcon, - }, { name: 'doc:menuNav.skeet-cli.add', href: '/doc/skeet-cli/skeet-cli-add/', @@ -126,16 +121,6 @@ const skeetCliNav = [ href: '/doc/skeet-cli/skeet-cli-login/', icon: CommandLineIcon, }, - { - name: 'doc:menuNav.skeet-cli.list', - href: '/doc/skeet-cli/skeet-cli-list/', - icon: CommandLineIcon, - }, - { - name: 'doc:menuNav.skeet-cli.curl', - href: '/doc/skeet-cli/skeet-cli-curl/', - icon: CommandLineIcon, - }, { name: 'doc:menuNav.skeet-cli.test', href: '/doc/skeet-cli/skeet-cli-test/', @@ -159,36 +144,6 @@ export const docMenuNav = [ }, ], }, - { - name: 'doc:menuNav.skeet-graphql.groupTitle', - children: [ - { - name: 'doc:menuNav.skeet-graphql.quickstart', - href: '/doc/skeet-graphql/quickstart/', - icon: RocketLaunchIcon, - }, - { - name: 'doc:menuNav.skeet-graphql.setup', - href: '/doc/skeet-graphql/setup/', - icon: Cog6ToothIcon, - }, - { - name: 'doc:menuNav.skeet-graphql.tutorial', - href: '/doc/skeet-graphql/tutorial/', - icon: AcademicCapIcon, - }, - { - name: 'doc:menuNav.skeet-graphql.initial-deploy', - href: '/doc/skeet-graphql/initial-deploy/', - icon: CloudArrowUpIcon, - }, - { - name: 'doc:menuNav.skeet-graphql.basic-architecture', - href: '/doc/skeet-graphql/basic-architecture/', - icon: BookOpenIcon, - }, - ], - }, { name: 'doc:menuNav.skeet-firestore.groupTitle', children: [ @@ -282,11 +237,6 @@ export const docMenuNav = [ { name: 'doc:menuNav.frontend.groupTitle', children: [ - { - name: 'doc:menuNav.frontend.nextjs-graphql-template', - href: '/doc/frontend/nextjs-graphql-template/', - icon: WindowIcon, - }, { name: 'doc:menuNav.frontend.nextjs-firestore-template', href: '/doc/frontend/nextjs-firestore-template/', @@ -304,10 +254,10 @@ export const docMenuNav = [ }, ], }, - { - name: 'doc:menuNav.skeet-cli.groupTitle', - children: skeetCliNav, - }, + // { + // name: 'doc:menuNav.skeet-cli.groupTitle', + // children: skeetCliNav, + // }, ] export const docHeaderNav = [