Nuxt3beta를 AWS Lambda로 설계

자초지종

나는 가난한 사람이다.고정 비용이 드는 서비스는 사용하기 어렵다
고정비는 1000엔도 매우 가난한 사람들이다.재량에 따라 금액에 따라 엄격하다(´/ω・‘)
Nuxt2라면 스파로 S3와 Cloud Front를 만들지만, 지금은 Nuxt3beta로 스파 앱을 만들 수 없을 것 같은데...모르지만.
정말?그러고 보니 AWS의 Lambda를 목표로라고 쓰여 있네
그래서 API Gateway+Lambda를 사용해 보기로 했습니다.
※ 2021/11/09 시도된 물건이므로 버전 승급 상황에 따라 변경될 수 있습니다

Nuxt3 프로젝트

람다에서 실행되는지 확인하기 위해 초기 프로젝트의 상태를 직접 설계합니다.

초기 프로젝트 작성

공식 페이지에 따라 프로젝트를 만듭니다.

Lambda를 위한 설계 설정

nuxt.config.Lambda에서 사용할 수 있는 ts 파일 변경
nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    nitro: {
        preset: 'lambda'
    }
})

Lambda Handler

라마다에서 불러낸 프로그램이죠?이 공식 페이지를 참고하여 람다에 수정했습니다.
또한 현재 버전에서는 정상적인 응답 이외(404 등)에 Content-Type을 헤더 정보로 설정하지 않았습니다.
따라서 Lambda에서 json으로 내보내면 브라우저에 페이지가 제대로 표시되지 않습니다.
처리자가 200 계열 이외의 답변을 할 때 콘텐츠-Type을 주어 문제를 해결한다.
index.js

exports.handler = async (event, context) => {
    const { handler  } = await import('./.output/server/index.mjs');
    const result = await handler (event);

    if(result.statusCode / 100 != 2 && result.headers['content-type'] == undefined) {
        result.headers['content-type'] = 'text/html;charset=UTF-8'
    }
    
    return result;
}

구축 &zip

정상적으로 구성하십시오.

yarn build

.output 폴더로 출력하고 ↑로 만든 index를 누르십시오.js를 포함하여 zip화

AWS Lambda 작성

Lambda 함수 만들기

지금은 Node14 시스템이 기본이기 때문에 아무 생각 없이 그냥 하면 된다.
x86 아키텍처64와arm64는 모두 문제없습니다.

업로드 프로그램

Lambda 화면에서 미리 작성한 ZIP 파일을 업로드합니다.

일반 설정

일반적으로 시간 초과를 설정한 경우 기본 3초로는 부족합니다.
2.9초만 실제 측정해도 따라잡을 수 있는 경우도 있지만 반대로 3초가 넘는 경우도 있으니 이번에는 일단 30초만 해보자.

AWS APIGateway 만들기

API 유형은 REST API 유형으로 생성됩니다.
점점 쓰기가 번거롭기 때문에 상세한 내용은 생략할 수 있다

위에서 말한 바와 같다

/(루트) ANY 프로토콜

/{proxy+}의 프록시 자원

Lambda 함수와 연관되어 있으며 Lambda 함수는 모든 요청을 처리합니다.

참고로 Lambda 프록시 병합을 확인하십시오.

완성!

특별히 고개를 돌릴 것은 없지만 API Gateway + Lambda + Nuxt 3 beta (\') 를 이렇게 사용할 수 있다.

마지막 소감 같은 거.

이번엔 자바스크립트의 이해가 안 되는 부분에 빠져서 램바다 핸들러 부분은 도저히 못하겠어요.
ESModule인가?Nuxt 3측에서 그걸 뱉었지만, Lambda Handler 측에서 그 사고팔고를 읽을 수는 없었다.
나는 매우 신기하다고 생각한다.
그리고 오류 페이지가 제이슨에서 나와서 깜짝 놀랐어요.
문제가 해결되었습니다. 이 index.저는 개인적으로 js가 있으면 문제없다고 생각합니다. Lambda에서 Nuxt3 앱을 탈 수 있습니다.
시동만 3초 걸리는데 시동이 너무 느리지 않나요?이런 기분이야.