전체 스태킹 클라우드 SSR 및 차세대js, Tailwind 및 AWS CDK

나는 이 작품의 슈퍼 팬이다. 이 작품은 Full Stack Serverless의 작가이다. 이것은 내가 갈수록 인정하는 개념이다.그가 했던 많은 흥미로운 프로젝트 중 하나는 '워크숍' 이라는 프로젝트였다. 넥스트로 서버가 없는 다중 사용자 블로그 플랫폼을 구축하는 것이다.js, Tailwind 및 AWS는 이 점을 설명합니다.
Amplify,NextJS와 기타 제품/도구/위탁 관리 서비스, 예를 들어 AppSync와Cognito를 소개하는 것을 강력히 추천합니다.
내가 바꾼 것은 마지막 단계인 AWS에 배치된 것이 아니다.당시, 우리는Fargate나 다른 서비스가 없는 상황에서 SRR 응용 프로그램이 있는NextJS를 배치할 수 없었고, 우리는 이 서비스에서 실례를 하나 돌려야 했다.Amplify 호스팅은 정적 생성의 모든 내용에 매우 좋으나 SSR은 이를 하지 못했다.
그 순간 나드는 서버 프레임워크가 없는 checkout the repository with all the code and a very complete descriptions step by step 를 사용했다.나는 serverless-next.js component이 정말로 게임을 바꾸고 서버 공간과 위탁 관리 서비스에 큰 흡인력을 가져왔다고 생각한다.앞에서 말했듯이, 재중 씨는 항상 AWS 기본 솔루션을 찾고 있습니다.올해 초에 일부 개발자들은... 구성 요소에 잠재적인 안전 위협이 존재한다는 것을 발견했다.

짐 해신
# 짐하이신

나는 정말 이것에 완전히 놀랐다.이게 얼마나 된 거예요?내가 비망록을 놓친 거 아니야?Serverless Framework
2021년 1월 6일 오전 00:37
공평하게 회사의 성의로 어떤 문제도 제기하지 않기 위해 그들은 작은 창구에서 이런 문제들을 해결했다.

서버 없음

서버 구성 요소가 없는 AWS에 대한 구성 파일 지원이 완전히 취소되었습니다.reddit.com/r/serverless/c…
2021년 2월 19일 오후 22:10
오스틴 콜린스
@ 오스틴 코린스
어제 서버 없는 프레임워크 버전은 서버 없는 구성 요소 서비스에서 AWS 개요 파일 처리를 삭제했습니다.
이 특성은 사람들의 합리적인 우려를 불러일으켰다.
다음은 발생한 일의 세목과 우리가 어떻게 해결했는지.
👉 https://t.co/zEyxnaHb5h
그러나 앞서 말한 바와 같이, 나는 대부분의 SSR 응용 프로그램을 제공하기 위해 SAM, Amplify, CDK 사이를 항상 찾는다. 왜냐하면 이것은 내가 매일 처리하는 관건적인 응용 프로그램이기 때문이다.창설twitter.com/austencollins/…의 같은 지역사회에서 그들은 알파를 발표했는데 이것은 우수한 도구이다.그들은 알파 버전 몇 개를 발표하여 개발자의 체험과 통제가 갈수록 좋아졌다.개념증명(Poc)으로 넥스트JSserverless-next.js component와 CDK구조PokéAPI와 the demo is here로 이 작은 프로젝트를 만들었습니다.
하지만 더 강한 PoC를 원합니다.나는 양신전기 작업장을 한 걸음 한 걸음 따라가다가 repo here에 멈추었다.나의 요구를 충족시키기 위해서, 나의 응용 프로그램은 서버 사이드 렌더링 (SSR), 심지어 가장 좋은, 증량 정적 재생 (ISR) 이 될 것이다. 그러나 나는 마지막을 완성할 수 없기 때문에, 나는 SSR (요청 당기기) 으로 바꾸었다.파일/pages/posts/[id].js을 다음과 같이 편집해야 합니다.

// pages/posts/[id].js
import { API, Storage } from 'aws-amplify'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import ReactMarkdown from 'react-markdown'
import { listPosts, getPost } from '../../graphql/queries'

export default function Post({ post }) {

  const [coverImage, setCoverImage] = useState(null)
  useEffect(() => {
    updateCoverImage()
  }, [])
  async function updateCoverImage() {
    if (post?.coverImage) {
      const imageKey = await Storage.get(post.coverImage)
      setCoverImage(imageKey)
    }
  }

  const router = useRouter()
  if (router.isFallback) {
    return <div>Loading...</div>
  }
  return (
    <div>
      <h1 className="text-5xl mt-4 font-semibold tracking-wide">{post.title}</h1>
      {
        coverImage && <img src={coverImage} className="mt-4" />
      }
      <p className="text-sm font-light my-4">by {post.username}</p>
      <div className="mt-8">
        <ReactMarkdown className='prose' children={post.content} />
      </div>
    </div>
  )
}

// This is what we are change, removing getStaticPaths and getStaticProps:
export async function getServerSideProps({ params }) {
  const { id } = params
  const postData = await API.graphql({
    query: getPost, variables: { id }
  })
  return {
    props: {
      post: postData.data.getPost
    }
  }
}

서버 프레임워크 없이 배포 서버 없음 NextJS CDK 구조를 사용한 배포

를 사용하여 AWS에 배치하려면 먼저 뭔가를 설정해야 한다.먼저 CDK CLI를 설치한 다음 계정에서 CDK를 부팅해야 합니다.
그리고 우리는 일부 개발 의존항을 설치할 것이다. 이런 의존항은 자산을 생성하고 배치하는 데만 사용된다.

npm install --save-dev @aws-cdk/core @sls-next/lambda-at-edge @sls-next/cdk-construct @aws-cdk/aws-lambda

Serverless NextJS CDK Construct: 이 라이브러리에는 AWS 클라우드 개발 키트(AWS CDK)의 기본 구축 블록이 포함되어 있습니다.AWS 구조 라이브러리의 나머지 부분에 사용되는 핵심 클래스를 정의합니다.

@aws-cdk/core 이 구조 라이브러리에서 AWS Lambda 함수를 정의할 수 있습니다.

@aws-cdk/aws-lambda의 가장 중요한 점은 소프트웨어 패키지에 @sls-next/cdk-construct 버전이 있고 캐시 정책을 명명하는 옵션이 추가되었다는 것입니다.위 버전 이상 버전이 아닌 경우 패키지의 버전을 편집하고 실행하십시오npm install

.

@sls-next/[email protected]미국용접학회Lambda@Edge라이브러리는 서버가 없는 다음 단계를 배치하는 데 도움을 줍니다.js 응용 프로그램 - CloudFront

그리고 프로젝트에 tsconfig.json 을 만들어야 합니다. 자바스크립트 프로젝트에서 TypeScript를 사용할 것입니다. (그렇지만, 우리가 만들 deploy 폴더에서만 사용할 수 있습니다.)
너의 tsconfig.json는 이렇게 해야 한다.

{
  “compilerOptions”: {
    “alwaysStrict”: true,
    “downlevelIteration”: true,
    “esModuleInterop”: true,
    “forceConsistentCasingInFileNames”: true,
    “inlineSourceMap”: true,
    “lib”: [
      “es2020”
    ],
    “moduleResolution”: “node”,
    “noEmitOnError”: true,
    “strict”: true,
    “target”: “ES6”,
    “skipLibCheck”: true,
    “noEmit”: true,
    “module”: “commonjs”,
    “isolatedModules”: true,
    “allowJs”: true,
    “resolveJsonModule”: true,
    “jsx”: “preserve”
  },
  “exclude”: [
    “node_modules”
  ],
  “include”: [
    “deploy”
  ]
}

모든 이 설정이 진정으로 필요한 것은 아니지만, 나는 기본적으로 나의 모든 프로젝트에 하나의 템플릿을 사용했고, 단지 모든 옵션을 선택하고 테스트하지 않기로 결정했다.그런 다음 CDK에서 스택에 대한 정보를 선택할 수 있는 특수 파일을 만들어야 합니다cdk.json.

{
  “app”: “npx ts-node deploy/bin.ts”
}

잠시 후 우리가 cdk deploy를 사용할 때, 이것은 ts 노드 실용 프로그램을 다운로드하고 실행하여 파일 bin.ts을 실행할 것이며, 설치 프로그램이 ts를 js로 컴파일할 필요가 없다.bin.ts 이전에 내가 언급한 이 파일은 deploy라는 폴더에 있음을 주의하십시오.그러나 마음대로 이름을 지을 수 있다. cdk.json 에서 변경하는 것만 기억하면 된다.
이 폴더는 우리 CDK가 구성한 모든 논리가 있는 곳입니다.폴더 만들기deploy.우리는 두 개의 파일 bin.ts 과 stack.ts 을 만들 것이다.나는 나의 업무 절차를 개선하기 위해 약간의 변화를 했지만, 공식 페이지에는 @sls-next/lambda-at-edge가 하나 있다.

// deploy/bin.ts
import * as cdk from “@aws-cdk/core”;
import { Builder } from “@sls-next/lambda-at-edge”;
import { NextStack } from “./stack”;
const builder = new Builder(“.”, “./build”, {args: [‘build’]});
builder
  .build(true)
  .then(() => {
    const app = new cdk.App();
    new NextStack(app, “NextBlog”, {
      analyticsReporting: true,
      ddescription: "Testing deploying Full Stack Cloud with Next.js, Tailwind, and AWS CDK with SSR"
    });
  })
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });

// deploy/stack.ts
import * as cdk from “@aws-cdk/core”;
import { Duration } from “@aws-cdk/core”;
import { NextJSLambdaEdge } from “@sls-next/cdk-construct”;
import { Runtime } from “@aws-cdk/aws-lambda”;
export class NextStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: “NextBlog”, props: cdk.StackProps ) {
    super(scope, id, props);
    new NextJSLambdaEdge(this, “NextBlog”, {
      serverlessBuildOutDir: “./build”,
      cachePolicyName: {
        staticsCache: `StaticsCache-${id}`,
        imageCache: `ImageCache-${id}`,
        lambdaCache: `LambdaCache-${id}`
      },
      description: `${id} : Functions Lambda@Edge for the application`,
      memory: 1024,
      name: {
        imageLambda: `ImageLambda-${id}`,
        defaultLambda: `DefaultLambda-${id}`,
        apiLambda: `ApiLambda-${id}`
      },
      runtime: Runtime.NODEJS_12_X,
      timeout: Duration.seconds(30),
      withLogging: true,
     });
  }
}

위에서 보듯이, 나는 몇 군데에서 구조 함수 중의 변수 id를 사용했다.내가 이렇게 하는 것은 모든 창고에 유일한 이름을 가지기 위해서이다.이전에 이 옵션이 없으면 두 번째 프로그램을 배치하려면 함수 이름과 정책 캐시 이름이 충돌할 수 있습니다.이렇게 해서 우리는 헤어졌다.lambda를 조정하려면 다른 필드가 필요합니다.
폴더의 루트 디렉터리cdk deploy에서 실행되며 생성된 인공 제품과 서비스를 이용합니다.수락하면 CloudFormation 로그가 작성이 완료될 때까지 표시되며 터미널에 다음과 같은 내용이 표시되어야 합니다.

[100%] success: Published

********

NextBlog: creating CloudFormation changeset...

[████████████████████████████████████████████████████▏·····] (18/20)

 ✅  NextBlog

Stack ARN:

*******

만약 그렇지 않다면, 어딘가에 문제가 생겼다.코드가 자산까지 올린다면 문제는 응용 프로그램/설정에 있다. 만약에 당신이 우리 중의 한 사람이라면 클라우드 포메이션의'영혼의 빨간색 스크롤'에 직면하고 클라우드 포메이션은 오류에 대한 정보가 거의 없다. 때로는 어디에 있는가.하지만 계좌에 있는 클라우드 트레일을 수시로 검사하고 오류를 확인하면 어떤 문제가 있는지 똑똑히 알 수 있다.
너는 문제를 하나 열 수 있다.너는 아마 영원히 입지 못할 것이다.

최소 설정의 뛰어난 예 필기

런타임 노드 14 X라도 런타임 시 사용할 수 없음Lambda@Edge너의 람다스는 그곳에서 지을 것이다.

주의serverlessBuildOutDir 아이템 지향build.NextJS의 기본 설정은 내장.next입니다.하지만 너는 바꿀 필요가 없다. 사실은 변하지 않았다.구조는 폴더에 생산 최적화 패키지를 만드는 것을 책임진다.

왜 이렇게 많은 시간을 낭비해?!?!,다른 해결 방안은 두 줄 코드와 제로 설정이 필요하다.예, 하지만 실제 사용 사례에서 저희 프로그램은 TypeScript를 사용해야 하기 때문에 CDK에서 IaC를 사용하면 인지 부하를 같은 수준으로 유지할 수 있고 특정한 설정을 처리할 필요가 없습니다.그 밖에 이 응용 프로그램은 다른 몇 개의 구조의 일부분일 수도 있고 같은 도구를 사용해도 아무런 이익이 없을 것이다.YAML 혼란 마법과 유형 안전도 없다.

하나의 창고에 배치해야 한다면 옵션cachePolicyName과 name을 사용해야 하지만 필요한 명령을 호출할 수 있습니다.나중에 데이터 수집, 디버깅, 그리고 다른 것들을 돕는 모델을 만들어 보세요.이것은 틀림없이 유일무이하다는 것을 기억해라!

글을 쓸 때 이것은 실험적인 특징임을 기억하고 알파로 표시한다.

너 자신을 봐라

- 솔직히 말하면 내가 인터넷에 얼마나 오래 있을지 모르겠다. 왜냐하면 내가 내일 아침에 깨어날 때 S3 메모리통에 수십억 개의 색정적인 내용이 있을 것이다. 그러나 개발자와 AWS 구축자 커뮤니티가 나에게 영감을 줄 것이라고 믿을 것이다. 그리고 나를 방문하는 사람이 매우 적기 때문에 우리는 프로젝트를 깨끗하게 유지할 것이다.

네, 집안도 없고 규칙도 없어요.개념 검증은 빠르고 더러워야 한다.

⚠️ 테스트일 경우 그 어떠한 비용도 피하기 위해 Live demo기억하세요.

환매 협의 가산점

한 걸음 더 걷고 싶으면, npm 스크립트를 설정해서 배치할 수 있습니다.개발자 종속성으로 설치해야 합니다.

npm install --save-dev aws-cdk typescript

remove all services – AWS CDK 키트는 AWS CDK 응용 프로그램을 처리할 수 있는cdk 명령줄 인터페이스를 제공합니다.

설치 후 TypeScript 자체가 필요합니다.

이 옵션을 사용하여 사용자aws-cdk를 편집할 수 있습니다.

“scripts”: {
    “dev”: “next dev”,
    “build”: “next build”,
    “start”: “next start”,
    “deploy”: “cdk deploy --profile pessoal”
 }

따라서 스크립트package.json만 실행하면 자동화 파이프와 다른 용도에 도움이 됩니다.
위의 예에서 옵션npm run deploy은 내 CDK가 내가 기계에 설치한 증명서를 사용하도록 지시했다. 라벨--profile은 영어pessoal와 같다. 왜냐하면 내가 여가 시간에 만든 이 프레젠테이션은 자기 개선을 위한 것이기 때문이다.
양신전기aws-cdk 환매 협의 표지 사진