NuxtJS

시작하기

Edgegap은 필요에 따라 서버리스 웹 애플리케이션을 배포할 수 있는 직관적인 플랫폼을 제공합니다. 이 튜토리얼에서는 Nuxt 앱을 배포하는 단계를 설명합니다. 다른 것을 확인하기 전에 yarn 또는 npm, npx와 같은 다른 패키지 관리 소프트웨어가 있는지 확인하세요. 이 튜토리얼에서는 yarn을 사용합니다. 애플리케이션 디렉터리에서 실행되어야 하며, 처음에는 빈 폴더일 수 있습니다.

폴더 위치에서 터미널을 열고 다음 명령을 실행하세요:

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn

모든 종속성이 설치되면 다음 명령을 실행하여 제대로 설치되었는지 확인하세요:

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn dev

yarn dev는 모든 것이 순조롭게 진행되었으면 설치된 yarn의 버전을 반환해야 합니다. 이 부분이 끝나면 이 튜토리얼을 성공적으로 완료하기 위한 나머지 요구 사항을 살펴볼 수 있습니다.

요구 사항

애플리케이션 컨테이너화하기

대부분의 애플리케이션을 컨테이너화하는 것은 간단합니다. Dockerfile을 생성한 다음 해당 파일을 Docker에서 실행하여 이미지를 만들어야 합니다. Visual Studio Code는 기본적으로 새로 생성한 파일에 확장자를 자동으로 붙이지 않기 때문에 Dockerfile을 작성하기에 좋은 플랫폼입니다. 바로 그것이 필요합니다. 새 파일을 만들고 이름을 Dockerfile로 지정하세요. 파일 옆에 작은 도커 로고가 나타날 것입니다.

이제 주요 종속성을 얻기 위해 이 스크립트를 복사하여 붙여넣을 수 있습니다. 이로 인해 이미지 크기가 약 1GB를 조금 넘게 생성된다는 점을 유념하세요. 이 튜토리얼 목적에는 괜찮지만, 프로덕션 애플리케이션에서는 최적화해야 합니다:

FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
  --prefer-offline \
  --frozen-lockfile \
  --non-interactive \
  --production=false

RUN yarn build

RUN rm -rf node_modules && \
  NODE_ENV=production yarn install \
  --prefer-offline \
  --pure-lockfile \
  --non-interactive \
  --production=true

FROM node:lts

WORKDIR /app

COPY --from=builder /app  .

ENV HOST 0.0.0.0
EXPOSE 80

CMD [ "yarn", "start" ]

Dockerfile을 저장한 후 이미지를 생성할 시간입니다. 다음 명령을 실행하여 쉽게 생성할 수 있습니다:

ARM CPU(Mac M1, M2 등)를 사용하는 경우, 다음 전용 페이지.

docker build . -t regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

의미론적 버전 관리를 따르는 버전 번호를 붙이는 것이 바람직하지만, 첫 배포 후 Edgegap에서 빌드를 업데이트할 계획이 없다면 버전 번호를 완전히 생략할 수 있습니다.

하지만 그 전에 새로 생성한 도커 이미지를 선택한 이미지 저장소에 푸시해야 합니다. 기본 Docker 저장소를 사용하는 경우에는 제공되지 않을 수 있는 일련의 보안 이점을 제공하는 Harbor를 통한 사설 저장소를 제공한다는 점을 기억하세요.

하지만 그 전에 새로 생성한 도커 이미지를 선택한 이미지 저장소에 푸시해야 합니다. 기본 Docker 저장소를 사용하는 경우에는 제공되지 않을 수 있는 일련의 보안 이점을 제공하는 Edgegap Registry를 통한 사설 저장소를 제공한다는 점을 기억하세요.

이미지를 우리 저장소에 푸시하려면 먼저 다음 명령을 사용하여 자격 증명으로 로그인해야 합니다:

docker login regsitry.edgegap.com

이제 남은 것은 다음과 같이 이미지를 푸시하는 것뿐입니다:

docker push regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

좋습니다! 이제 Edgegap 플랫폼에 Nuxt 앱을 배포하기까지 단 한 단계만 남았습니다.

Edgegap에 애플리케이션 배포하기

Edgegap에 애플리케이션을 배포하는 방법은 두 가지가 있습니다. 둘 다 당사 계정이 필요하며, 여기에서 무료로 계정을 생성할 수 있습니다. 먼저 웹사이트를 통해 컨테이너화된 애플리케이션을 배포하는 방법을 살펴보겠습니다.

Edgegap 대시보드를 통한 애플리케이션 배포:

다음 웹 주소로 이동하여 자격 증명을 입력해야 합니다. 입력하면 자동으로 대시보드로 리디렉션됩니다. 방금 계정을 생성한 경우 바로 첫 애플리케이션을 시작하는 옵션을 보게 될 것입니다. 그렇지 않다면 화면 왼쪽의 메뉴에서 'Applications and games' 탭으로 이동하세요. 오른쪽 상단에 새 애플리케이션을 생성하는 옵션이 보일 것입니다:

클릭하면 다음 양식이 나타납니다:

필수 필드를 모두 작성해야 하며, 완료한 후 기본값에서 수정해야 할 몇 가지가 있습니다:

• 포트 번호: 이 애플리케이션은 포트 3000을 열어야 하므로 생성 양식의 'ports' 섹션에 추가하세요.

• 최대 배포 시간: 앞서 언급했듯이 우리의 NuxtJS 이미지는 약 1GB 정도입니다. Edgegap에 이렇게 큰 이미지를 배포하려면 최대 배포 시간을 약 300초로 늘려야 합니다.

적절한 정보로 양식을 작성한 후 제출하면 배포 준비가 완료됩니다. 단순히 리전과 에뮬레이션하려는 플레이어 수를 선택하세요.

선택을 확인하면 애플리케이션이 곧 온라인 상태가 됩니다. 배포된 후 볼 수 있는 화면은 다음과 같습니다. 이 이미지에서 원으로 표시한 아이콘을 클릭하면 접속할 수 있습니다.

이렇게 하면 Nuxt 애플리케이션의 기본 랜딩 페이지가 표시되는 새 탭이 열립니다.

Edgegap의 API를 통해 애플리케이션 배포하기

웹 대시보드는 애플리케이션을 배포하는 가장 사용자 친화적인 방법이지만, 매우 간단한 API 요청을 통해서도 배포할 수 있습니다. 이를 위해 Postman을 사용할 수 있습니다. 프로필 옵션에서 API 토큰 생성 프로필의 옵션을 통해. 다음은 API 토큰을 생성하는 간단한 가이드입니다.

API 토큰을 얻으면 남은 것은 애플리케이션 이름, 버전, IP 주소, 배포할 리전 및 인증 매개변수의 일부로 토큰을 포함한 배포 요청을 작성하는 것입니다. 전체 요청 예시는 우리의 문서에서 확인할 수 있습니다.

요청을 보내면 커맨드 라인이나 Postman에서 다음과 유사한 응답을 볼 수 있습니다:

CLI를 통해 애플리케이션을 배포하기 위해 해야 할 일은 이것뿐입니다. 앱이 배포되었는지 확인하려면 대시보드로 다시 이동하여 “Active deployments” 탭을 클릭하면 활성 배포를 확인할 수 있습니다.