5분 자습서 - AWS에 Nuxt 배포

Amplify hosting을 사용하면 몇 번의 클릭만으로 웹 사이트와 웹 앱을 AWS의 글로벌 에지 CDN에 배포할 수 있습니다.

이 자습서에서는 다음 두 가지 방법으로 Amplify 정적 사이트 호스팅을 사용하여 정적 또는 SPA(Single Page Application) NuxtJS 앱을 AWS에 배포하는 방법을 알아봅니다.

Git 기반 호스팅

Amplify CLI 사용

Git 기반 호스팅

1 단계

Amplify Console을 방문하고 배포에서 시작하기를 클릭하여 새 앱을 연결합니다.

2 단계

Git 공급자를 선택하고 계속을 클릭합니다.

3단계

다음 화면에서 리포지토리와 브랜치를 선택하고 다음을 클릭합니다.

4단계

정적 사이트의 경우

앱 빌드 및 테스트 설정 보기에서 편집을 클릭하고 다음을 수행하십시오.

빌드 명령을 다음으로 설정합니다. yarn run generate

baseDirectory 위치를 dist로 설정

저장을 클릭합니다.

다음을 클릭합니다.

스파를 위해

기존 빌드 설정을 유지하고 다음을 클릭합니다.

5단계

저장 및 배포를 클릭합니다.

사이트가 성공적으로 배포되면 세 개의 녹색 확인 표시가 나타납니다.



라이브 사이트를 보려면 Amplify Console에서 자동으로 생성된 URL을 클릭하십시오.

비디오 연습

다음은 Git 리포지토리에서 Amplify 호스팅을 사용하여 정적 Nuxt 사이트를 배포하는 방법에 대한 비디오 연습입니다.

Amplify CLI 사용

To deploy using the CLI, you must first install and configure the Amplify CLI. To view a video walkthrough of how to do this, click

1 단계

NuxtJS 앱의 루트에서 새 Amplify 프로젝트를 초기화합니다.

정적 사이트의 경우

amplify init

> When prompted for the Build Command, use: npm run generate
# Choose default options for the other prompts

스파를 위해

amplify init

# Choose all of the defaults when prompted

2 단계

add 명령을 사용하여 호스팅을 추가합니다.

amplify add hosting

? Select the plugin module to execute: Hosting with Amplify Console
? Choose a type: Manual deployment

3단계

publish 명령을 사용하여 사이트를 배포합니다.

amplify publish

🎉 축하합니다! 사이트가 공식적으로 AWS에 배포되었습니다.

언제든지 호스팅 서비스를 보고 Amplify Console을 방문하거나 console 명령을 사용하여 사용자 지정 도메인, 액세스 제어 등과 같은 추가 기능을 추가할 수 있습니다.

amplify console

4단계

amplify publish 명령을 다시 실행하여 언제든지 앱에 업데이트를 배포할 수 있습니다.

비디오 연습

다음은 Amplify CLI를 사용하여 정적 Nuxt 사이트를 배포하는 방법에 대한 비디오 연습입니다.