Azure Static Web Apps에서 유니버설 렌더링으로 Nuxt 3 사이트 배포

아티클
02/19/2024

이 자습서에서는 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 앱으로 자동 변환합니다.

필수 조건

활성 구독이 있는 Azure 계정. 체험 계정을 만듭니다.
GitHub 계정. 체험 계정을 만듭니다.
Node.js 16 이상이 설치되어 있어야 합니다.

Nuxt 3 앱 설정

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 경로를 호출하는 단추를 선택합니다.

Start Nuxt.js app

Nuxt 3 사이트 배포

다음 단계에서는 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 조직을 선택합니다.
리포지토리	이전에 만든 리포지토리를 선택합니다.
Branch	기본을 선택합니다.

검토 후 만들기

검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기를 선택하여 정적 웹앱 만들기를 시작하고 배포를 위한 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 배포 사전 설정 설명서를 참조하세요.

사용자 지정 도메인 설정