Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tonyfromundefined/workshop-serverless-graphql

๐Ÿ“ฃ [AWSKRUG Serverless Group 2019] Serverless GraphQL Workshop
https://github.com/tonyfromundefined/workshop-serverless-graphql

aws awskrug express fargate lambda nextjs nexus prisma serverless

Last synced: 20 days ago
JSON representation

๐Ÿ“ฃ [AWSKRUG Serverless Group 2019] Serverless GraphQL Workshop

Awesome Lists containing this project

README

        

# ์„œ๋ฒ„๋ฆฌ์Šค GraphQL ์›Œํฌ์ƒต ๐Ÿ”จ
์„œ๋ฒ„๋ฆฌ์Šค GraphQL ์›Œํฌ์ƒต์— ์˜ค์‹  ์—ฌ๋Ÿฌ๋ถ„์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

์ด ์›Œํฌ์ˆ์€ ๊ธฐ์กด์— GraphQL์— ๋Œ€ํ•œ ๋ฐฐ๊ฒฝ์ด ์—†๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ค€๋น„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. GraphQL ๋ฐฑ์—”๋“œ์— ๋Œ€ํ•œ ๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ธ ํ•ต์‹ฌ ๊ฐœ๋…์„ ๋‹ด์•˜์œผ๋ฉฐ, ์‹ค์ œ Production์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋„๊ตฌ๋“ค์„ ์†Œ๊ฐœํ•˜๋ฉฐ Production ๋ ˆ๋ฒจ์—์„œ์˜ GraphQL์ด ๊ฐ€์ง„ ํ•ต์‹ฌ ๊ฐ€์น˜๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๋ฐฐ์šฐ๊ณ , ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

![](./full-architecture-3.png)

> ๋ณธ ์›Œํฌ์ƒต์€ AWSKRUG ์„œ๋ฒ„๋ฆฌ์Šค ๋ชจ์ž„์ด ์ฃผ์ตœํ•ฉ๋‹ˆ๋‹ค. [์ฐธ๊ฐ€์‹ ์ฒญ](https://www.meetup.com/ko-KR/awskrug/events/262459287/)
>
> ๐Ÿ–‹ Written with ๐Ÿ”ฅ by [Tony](https://github.com/tonyfromundefined)

## ์ด๋Ÿฐ ๊ธฐ์ˆ  ์Šคํƒ์ด ์‚ฌ์šฉ๋˜์—ˆ์–ด์š” ๐Ÿง

### ์–ธ์–ด ๋ฐ ํ™˜๊ฒฝ
- [TypeScript](https://www.typescriptlang.org) ๐Ÿ‘
- [Node.js](https://nodejs.org/en/about/)
- [Babel](https://babeljs.io)
- [Webpack](https://webpack.js.org/)
- [Dotenv](https://github.com/motdotla/dotenv)

### API ์„œ๋ฒ„
- [Express.js](https://expressjs.com/ko/)
- [Apollo Server](https://www.apollographql.com/docs/apollo-server/)
- [Prisma Nexus](https://nexus.js.org/) ๐Ÿ‘
- [Serverless Framework](https://serverless.com)
- [AWS API Gateway](https://aws.amazon.com/ko/api-gateway/)
- [AWS Lambda](https://aws.amazon.com/ko/lambda/)
- [AWS S3](https://aws.amazon.com/ko/s3/)

### Data Loader + ORM
- [Docker](https://www.docker.com/)
- [Prisma](https://www.prisma.io/) ๐Ÿ‘
- [AWS Fargate](https://aws.amazon.com/ko/fargate/) ๐Ÿ‘

### Database
- [MySQL](https://www.mysql.com/)
- [AWS Aurora Serverless](https://aws.amazon.com/ko/rds/aurora/serverless/)
- [AWS RDS](https://aws.amazon.com/ko/rds/)

### Web Client
- [React.js](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [Apollo Client](https://github.com/apollographql/apollo-client)
- [React Apollo](https://github.com/apollographql/react-apollo)
- [React Apollo Hooks](https://github.com/trojanowski/react-apollo-hooks)
- [GraphQL Code Generator](https://graphql-code-generator.com) ๐Ÿ‘
- [MobX 5](https://github.com/mobxjs/mobx)

### ๊ธฐํƒ€
- [AWS CloudFormation](https://aws.amazon.com/ko/cloudformation/)

## ๋ฏธ๋ฆฌ ์ค€๋น„ํ•ด์ฃผ์„ธ์š”
### 0. ๋ณธ Github Repository๋ฅผ ๋ณธ์ธ์˜ ์ปดํ“จํ„ฐ์— ๋ณต์‚ฌํ•ด์ฃผ์„ธ์š”
์ค‘๊ฐ„์ค‘๊ฐ„ ์‹ค์Šต์— ํ•„์š”ํ•œ ํŒŒ์ผ๋“ค์ด ์—…๋กœ๋“œ ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. ์„ธ์…˜ ์‹œ์ž‘ ์ „ ๋ฏธ๋ฆฌ ๋‹ค์šด ๋ฐ›์•„์ฃผ์„ธ์š”.
- `.zip` ํŒŒ์ผ๋กœ [๋‹ค์šด๋กœ๋“œ](https://github.com/tonyfromundefined/serverless-graphql-workshop/archive/master.zip)
- ๋˜๋Š”
```bash
$ git clone https://github.com/tonyfromundefined/serverless-graphql-workshop
```

### 1. PC ๋˜๋Š” Mac
๋ณธ ์„ธ์…˜์€ ์ฝ”๋”ฉ ๊ณผ์ •์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ CLI(Command Line Interface) ์กฐ์ž‘์ด ๊ผญ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ(iPhone, iPad, Android)์—์„œ๋Š” ์ง„ํ–‰์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ˆ ๊ผญ PC/Mac ํ™˜๊ฒฝ์—์„œ ์ง„ํ–‰ํ•˜์„ธ์š”.

### 2. AWS ๊ณ„์ •
- AWS ๊ณ„์ • ๋งŒ๋“ค๊ธฐ [์ด๋™](https://aws.amazon.com/ko/)

๋ณธ ๊ฐ€์ด๋“œ๋Š” ํ•œ๋ช…์ด ํ•˜๋‚˜์˜ AWS ๊ณ„์ •์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. AWS API Gateway, Lambda, ECS, RDS, S3, CloudWatch์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋ฉฐ, ๋‹ค๋ฅธ ์‚ฌ๋žŒ๊ณผ ๊ณ„์ •์„ ๊ณต์œ ํ•˜๊ฒŒ ๋˜๋ฉด ํŠน์ • ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•ด ์ถฉ๋Œ์ด ๋ฐœ์ƒ ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์œผ๋ฏ€๋กœ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

#### [์ค‘์š”] ๋ณธ ์›Œํฌ์ƒต์—์„œ ์‚ฌ์šฉํ•˜๋Š” 'AWS Fargate' ์„œ๋น„์Šค๋Š” **๊ณผ๊ธˆ**๋ฉ๋‹ˆ๋‹ค. ์‹ค์Šต์ด ๋๋‚˜๊ณ  ๋ฐ”๋กœ ์‚ญ์ œํ•˜์„ธ์š”.

**AWS Fargate๋ฅผ ์ œ์™ธํ•œ** ๋ณธ ์›Œํฌ์ƒต์˜ ์ผํ™˜์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ชจ๋“  ๋ฆฌ์†Œ์Šค๋Š” AWS ๊ณ„์ •์ด 12๊ฐœ์›” ๋ฏธ๋งŒ์ธ ๊ฒฝ์šฐ, ์ œ๊ณตํ•˜๋Š” AWS ํ”„๋ฆฌํ‹ฐ์–ด๋กœ ์ถฉ๋ถ„ํžˆ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, ์‚ฌ์šฉ๋Ÿ‰์ด ํ”„๋ฆฌํ‹ฐ์–ด๋ฅผ ๋„˜์–ด์„œ๋Š” ๊ฒฝ์šฐ, ๊ณผ๊ธˆ ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ์ƒˆ๋กœ์šด ์‹ค์Šต์šฉ ๊ณ„์ •์„ ๋งŒ๋“œ์‹œ๊ธธ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ [AWS ํ”„๋ฆฌ ํ‹ฐ์–ด ํŽ˜์ด์ง€](https://aws.amazon.com/free/)๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

### 3. ์›น ๋ธŒ๋ผ์šฐ์ €
- Chrome ์ตœ์‹  ๋ฒ„์ „ [๋‹ค์šด๋กœ๋“œ](https://www.google.com/chrome/)

> Internet Explorer๋Š” AWS Web Console์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

### 4. ํ…์ŠคํŠธ ์—๋””ํ„ฐ
- VS Code [๋‹ค์šด๋กœ๋“œ](https://code.visualstudio.com/)

๋ณธ ์‹ค์Šต ์„ธ์…˜์—๋Š” ์‹ค์ œ ์ฝ”๋”ฉ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ์„ธ์…˜ ๋ฐœํ‘œ์ž๋Š” VS Code๋ฅผ ์‚ฌ์šฉํ•˜๋‹ˆ, ์ฝ”๋”ฉ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์œผ์‹  ๋ถ„์€ ๋”ฐ๋ผํ•˜๊ธฐ ์‰ฝ๋„๋ก ํ™˜๊ฒฝ์„ ๋™์ผํ•˜๊ฒŒ ์„ค์ •ํ•ด์ฃผ์„ธ์š”.

### 5. Node.js
- Node.js ์ตœ์‹  ๋ฒ„์ „ [๋‹ค์šด๋กœ๋“œ](https://nodejs.org/en/)

## ์ž ๊ทธ๋Ÿผ ์ด์ œ ์‹œ์ž‘ํ•ด๋ณผ๊นŒ์š”?
1. [GraphQL ์‚ดํŽด๋ณด๊ธฐ](/documents/1-graphql/README.md)
1. GraphQL์ด๋ž€?
2. GraphQL Type ์‹œ์Šคํ…œ๊ณผ `Query`, `Mutation` Type
3. Nexus๋กœ ์‹œ์ž‘ํ•˜๋Š” *Code-First* GraphQL ๊ฐœ๋ฐœ
4. GraphQL Playground
5. `Task` ํƒ€์ž…๊ณผ ์ฟผ๋ฆฌ, ๋ฎคํ…Œ์ด์…˜ ๋งŒ๋“ค๊ธฐ
2. [Serverless๋กœ GraphQL API ๋ฐฐํฌํ•˜๊ธฐ](/documents/2-serverless/README.md)
1. IAM ์‚ฌ์šฉ์ž ์ƒ์„ฑํ•˜๊ธฐ
2. Serverless Framework์„ ์‚ฌ์šฉํ•ด Node.js ํ”„๋กœ์ ํŠธ ๋ฐฐํฌํ•˜๊ธฐ
3. [AWS์— Prisma ๋ฐฐํฌํ•˜๊ธฐ (CloudFormation)](/documents/3-prisma-on-aws/README.md)
4. [Prisma ์‚ฌ์šฉํ•˜๊ธฐ](/documents/4-prisma/README.md)
1. Prisma๋ž€?
2. Prisma ์‹œ์ž‘ํ•˜๊ธฐ
3. Prisma Client ์‚ฌ์šฉํ•ด๋ณด๊ธฐ
4. `nexus-prisma`๋ฅผ ์‚ฌ์šฉํ•ด, Prisma ์—ฐ๊ฒฐํ•˜๊ธฐ
5. [React.js์—์„œ GraphQL API ์‚ฌ์šฉํ•˜๊ธฐ](/documents/5-react-graphql/README.md)
6. [์‚ญ์ œํ•˜๊ธฐ](/documents/6-delete/README.md)
1. API ๋ฐฐํฌ ์‚ญ์ œํ•˜๊ธฐ
2. CloudFormation Stack ์‚ญ์ œํ•˜๊ธฐ
3. IAM ์‚ฌ์šฉ์ž ์‚ญ์ œํ•˜๊ธฐ

## ํ•  ์ผ
Feature Request๋ฅผ ์›ํ•˜์‹œ๋ฉด, ์ƒˆ ์ด์Šˆ๋ฅผ ์ƒ์„ฑํ•ด์ฃผ์„ธ์š”. ๋˜ํ•œ, Pull Request๋Š” ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค.๐Ÿ™

- [x] macOS
- [x] Windows
- [x] CMD
- [x] Powershell
- [ ] WSL Bash

---

### Cheatsheets
- [์™„์„ฑ๋œ ์„œ๋ฒ„ ํ”„๋กœ์ ํŠธ](/cheatsheet/server)
- [์™„์„ฑ๋œ ํด๋ผ์ด์–ธํŠธ ํ”„๋กœ์ ํŠธ](/cheatsheet/client)