todo 애플리케이션의 mock과 AWS CDK(with Type Script), Nuxt를 30분 정도 사용할 수 있습니다.js로 만드는 방법

개시하다

최근에는 자체적으로 제품 개발을 하고 싶어서'가능한 작은 움직임','다른 사람과 쉽게 분담할 수 있는'전단과 후단 환경의 제작 방법을 점검했다.
기본 방침으로 가급적 블랙박스는 만들지 말자.
가급적 사용하지 않는 카탈로그를 만드는 데create-nuxt-app 쓰지 말고npm i --save nuxt mkdir pages 느낌으로 만드는 식이다.다만, cdk init 사용합니다.
어쨌든 CDK와 Nuxt는시작하고 싶은 사람이 되고 싶지만, 이런 사람을 최대한 작게 시작하는 참고가 됐으면 좋겠어요.
나는 30분 정도 이 보도에서 한 일이 있으면 완성할 수 있을 것이라고 생각한다.

결론

이렇게 할 수 있어요.
https://youtu.be/yBFvp70zKxQ
이 기사를 쓸 때 인코딩된 모습을 영상으로 공개했죠
기사 내용과는 조금 다르지만 분위기를 잡는 데 도움이 될 것 같다.

전제 조건

AWS 계정 보유

CDK CLI 사용 가능

기본값이나 어떤 프로필 설정 등이 완료되었습니다. (즉, 갑자기 cdk init를 할 수 있는 상태입니다)

npm가 이용할 수 있는 상태로 변

CDK에 Type Script

활용

Nuxt.js SPA 모드 동작

시도해 본 일

아무튼 람바다를 먼저 이동할게요.

CDK의 골격 제작 & 초기 설정

CDK의 골격 만들기 & 설치에 필요한 라이브러리

mkdir back
cd back
cdk init --language typescript
npm init
cdk bootstrap
npm run watch

구축 및 설계

npm run build; cdk deploy

여기까지, 먼저 스택에 들어가 제작한 상태입니다.

Lambda 애플리케이션 코드 작성

필요한 라이브러리 및 파일 추가

npm install --save @aws-cdk/aws-lambda
mkdir -p src/lambda/
code src/lambda/index.ts

src/lambda/index.ts

export const handler = async ( event:any = {} ) : Promise<any> => {
  const res = {
    content: { "id": "1", "task": "dummy" }
  }
  return {
    statusCode: 200,
    body: JSON.stringify(res),
    headers: {
      "Content-Type":"application/json",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Allow-Origin": '*',
      "Access-Control-Allow-Methods": "OPTIONS,GET"
    }
  }
}

Lambda의 CDK 코드를 씁니다.

CDK 코드 수정

code lib/back-stacks.ts

lib/back-stacks.ts

import * as cdk from '@aws-cdk/core';
import * as lambda from '@aws-cdk/aws-lambda';

export class TestCdk1Stack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // lambda
    const getTodos = new lambda.Function(this, "getTodosLambda", {
      runtime: lambda.Runtime.NODEJS_14_X,
      handler:"index.handler",
      code: lambda.Code.fromAsset("src/lambda")
    })
  }
}

npm run build; cdk deploy

어쨌든 지금까지 다음 Lambda 함수를 되돌려줍니다

content: { "id": "1", "task": "dummy" }

REST API화(API Gateway를 통해 Lambda)

HTTP를 통해 Lambda를 실행하면 결과를 얻을 수 있습니다.

npm install --save @aws-cdk/aws-apigateway
code lib/back-stacks.ts

lib/back-stacks.ts

import * as cdk from '@aws-cdk/core';
import * as lambda from '@aws-cdk/aws-lambda';
import * as apigateway from '@aws-cdk/aws-apigateway';

export class TestCdk1Stack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // lambda
    const getTodos = new lambda.Function(this, "getTodosLambda", {
      runtime: lambda.Runtime.NODEJS_14_X,
      handler:"index.handler",
      code: lambda.Code.fromAsset("src/lambda")
    })

    // apigateway
    const getTodosApi = new apigateway.RestApi(this, "getTodosApi", {})
    getTodosApi.root.addMethod("GET", new apigateway.LambdaIntegration(getTodos));
  }
}

npm run build; cdk deploy

cdk deploy의 실행 결과에 API Gateway의 URL이 추가되었습니다.그 URL을 두드리면 getTodosLambda 의 실행 결과는 이러한 모듈 API가 완성된 상태로 되돌아옵니다.

아무튼, Nuxt.js 이동

후면 지퍼가 완성되었으니 앞쪽에서 불러주세요.
가능한 한 단계에 오르다.

최소한의 시동만 걸면 된다

mkdir front
cd front
npm init
code package.json

package.json의scripts입니다.dev에 추가"dev": "nuxt --spa"package.json

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "nuxt --spa"
  },
  "author": "",
  "license": "ISC"
}

npm i --save nuxt
mkdir pages
touch pages/index.vue
code pages/index.vue

pages/index.vue

<template>
  <div>
    Hello Nuxt.
  </div>
</template>

npm run dev

이렇게 되면'Hello Nuxt'만 표시되는 정적 페이지가 완성된 상태가 된다.

이벤트 처리 프로그램을 설정해 보십시오

이어서 우리는 동적 사이트의 한 걸음을 내디딜 것이다.
설정 단추를 누르면 페이지 표시를 전환합니다.

이벤트 프로세서 추가

code pages/index.vue

pages/index.vue

<template>
  <div>
    <button v-on:click="clicked">click me</button>{{text}}
  </div>
</template>
<script>
export default {
  data(){
    return {
      text: "hoge"
    }
  },
  methods: {
    clicked: function() {
      this.text = "huga"
    }
  }
}
</script>

npm run dev

이렇게 하면 동적 페이지를 만들고 단추를 통해 내용을 다시 활성화하고 전환할 수 있다.

API 두드려봐.

다음은 출력과 외부의 데이터를 입력할 수 있도록 API를 활용한 발걸음을 내디뎌야 한다는 것이다.
다만, API가 이상한지 프런트엔드 설치에 문제가 있는지 분할하기 위해 온라인에 공개된 API 모듈을 이용해 프런트엔드 설치만 제작해 주십시오.

모크 API(with JSONPlaceHolder)

두드리기

code pages/index.vue

pages/index.vue

<template>
  <div>
    <button v-on:click="clicked">click me</button>{{text}}
  </div>
</template>
<script>
export default {
  data(){
    return {
      text: "hoge"
    }
  },
  methods: {
    clicked: async function() {
      fetch(url, { mode: 'cors' })
	await new Promise( (resolve) => {
          setTimeout( () => {
            resolve();
          } , 3000)
        } )
        await fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => response.json())
          .then(json => this.text = json)
    }
  }
}
</script>

URL(방금 만든 오리지널 물건) 바꿔보기

code pages/index.vue

pages/index.vue

<template>
  <div>
    <button v-on:click="clicked">click me</button>{{text}}
  </div>
</template>
<script>
// デプロイしたAPI GatewayのURL
const url = "https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/todos"; // 先程作成したAPI GatewayのURLを入れる

export default {
  data(){
    return {
      text: "hoge"
    }
  },
  methods: {
	clicked: async function() {
            await fetch(url)
                .then( response => response.json() )
                .then( json => this.items = json)
        },
  }
}
</script>

이렇게 하면 인터넷상의 데이터를 교환하기 위해 동적 페이지를 만들 수 있다.

끝말

지금까지 다양한 사이트에서 돌아다녔어요. 귀찮아서 자주 하는 일을 기사로 써서 일체화해 봤어요.
남의 참고가 됐으면 좋겠어요.
나 쓸 줄 알 것 같애.