Azure Static Web Apps에서 유니버설 렌더링으로 Nuxt 3 사이트 배포
이 문서의 내용
필수 조건
Nuxt 3 앱 설정
Nuxt 3 사이트 배포
이 자습서에서는 Nuxt 3 애플리케이션을 Azure Static Web Apps 에 배포하는 방법을 알아봅니다. Nuxt 3은 서버 및 API 경로를 포함하여 유니버설(클라이언트 쪽 및 서버 쪽) 렌더링 을 지원합니다. 추가 구성 없이 유니버설 렌더링을 사용하여 Azure Static Web Apps에 Nuxt 3 앱을 배포할 수 있습니다. 앱이 Static Web Apps GitHub Action 또는 Azure Pipelines 작업에서 빌드되면 Nuxt 3은 이를 Azure Static Web Apps와 호환되는 정적 자산 및 Azure Functions 앱으로 자동 변환합니다.
npx nuxi init nuxt-app
를 사용하여 새로운 Nuxt 프로젝트를 설정할 수 있습니다. 이 자습서에서는 새 프로젝트를 사용하는 대신 기존 리포지토리 설정을 사용하여 Azure Static Web Apps에서 유니버설 렌더링을 사용하여 Nuxt 3 사이트를 배포하는 방법을 보여 줍니다.
http://github.com/staticwebdev/nuxt-3-starter/generate 으로 이동합니다.
리포지토리 이름을 nuxt-3-starter 로 지정합니다.
그런 다음, 새 리포지토리를 머신에 복제합니다. <YOUR_GITHUB_ACCOUNT_NAME>을 계정 이름으로 바꾸어야 합니다.
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
새로 복제된 Nuxt.js 앱으로 이동합니다.
cd nuxt-3-starter
종속성을 설치합니다.
npm install
개발 중인 Nuxt.js 앱을 시작합니다.
npm run dev -- -o
http://localhost:3000
으로 이동하여 앱을 엽니다. 이 경우 기본 설정 브라우저에서 다음 웹 사이트를 열어 볼 수 있습니다. 서버 및 API 경로를 호출하는 단추를 선택합니다.
다음 단계에서는 Azure Static Web Apps 리소스를 만들고 GitHub에서 앱을 배포하도록 구성하는 방법을 보여 줍니다.
Azure Static Web Apps 리소스 만들기
Azure Portal 로 이동합니다.
리소스 만들기 를 선택합니다.
Static Web Apps 를 검색합니다.
Static Web Apps 를 선택합니다.
만들기 를 실행합니다.
기본 탭에서 다음 값을 입력합니다.
테이블 확장
속성
값
구독
Azure 구독 이름.
리소스 그룹
my-nuxtjs-group
이름
my-nuxt3-app
플랜 유형
무료
Azure Functions API 및 스테이징 환경을 위한 영역
가장 가까운 지역을 선택합니다.
Source
GitHub
GitHub로 로그인 을 선택하고 GitHub로 인증합니다.
다음 GitHub 값을 입력합니다.
테이블 확장
속성
값
조직
원하는 GitHub 조직을 선택합니다.
리포지토리
이전에 만든 리포지토리를 선택합니다.
Branch
기본 을 선택합니다.
빌드 세부 정보 섹션의 빌드 사전 설정 드롭다운에서 사용자 지정 을 선택하고 기본값을 유지합니다.
앱 위치 에서 상자에 / 를 입력합니다.
API 위치 에서 상자에 .output/server 를 입력합니다.
출력 위치 에서 상자에 .output/public 을 입력합니다.
검토 + 만들기 를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기 를 선택하여 정적 웹앱 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.
배포가 완료되면 리소스로 이동 을 선택합니다.
개요 창에서 URL 링크를 선택하여 배포된 애플리케이션을 엽니다.
웹 사이트가 즉시 로드되지 않으면 백그라운드 GitHub Actions 워크플로가 계속 실행 중인 것입니다. 워크플로가 완료되면 브라우저를 새로 고치고 웹앱을 볼 수 있습니다.
리포지토리의 작업으로 이동하여 작업 워크플로의 상태를 확인할 수 있습니다.
https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
앱을 만들 때 Azure Static Web Apps는 리포지토리에 GitHub Actions 워크플로 파일을 만들었습니다. 터미널로 돌아가서 다음 명령을 실행하여 새 파일이 포함된 커밋을 가져옵니다.
git pull
코드를 업데이트하고 GitHub에 푸시하여 앱을 변경합니다. GitHub Actions는 자동으로 앱을 빌드하고 배포합니다.
자세한 내용은 Azure Static Web Apps Nuxt 3 배포 사전 설정 설명서 를 참조하세요.