다음을 통해 공유

Azure Static Web Apps에서 유니버설 렌더링을 사용하여 Nuxt 3 사이트 배포

이 자습서에서는 Azure Static Web Apps에 Nuxt 3 애플리케이션을 배포하는 방법을 알아봅니다. Nuxt 3은 서버 및 API 경로를 포함하여 범용(클라이언트 쪽 및 서버 쪽) 렌더링을 지원합니다. 추가 구성 없이 유니버설 렌더링을 사용하여 Nuxt 3 앱을 Azure Static Web Apps에 배포할 수 있습니다. 앱이 Static Web Apps GitHub 작업 또는 Azure Pipelines 작업에서 빌드되면 Nuxt 3은 자동으로 정적 자산 및 Azure Static Web Apps와 호환되는 Azure Functions 앱으로 변환합니다.

필수 조건

Nuxt 3 앱 설정

를 사용하여 npx nuxi init nuxt-app새 Nuxt 프로젝트를 설정할 수 있습니다. 이 자습서에서는 새 프로젝트를 사용하는 대신 기존 리포지토리를 사용하여 Azure Static Web Apps에서 유니버설 렌더링을 사용하여 Nuxt 3 사이트를 배포하는 방법을 보여 줍니다.

  1. http://github.com/staticwebdev/nuxt-3-starter/generate으로 이동합니다.

  2. 리포지토리 nuxt-3-starter의 이름을 지정합니다.

  3. 다음으로, 컴퓨터에 새 리포지토리를 복제합니다. 반드시 <YOUR_GITHUB_ACCOUNT_NAME>을(를) 자신의 계정 이름으로 바꾸십시오.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. 새로 복제된 Nuxt.js 앱으로 이동합니다.

    cd nuxt-3-starter

  5. 종속성 설치:

    npm install

  6. 개발 중인 Nuxt.js 앱을 시작합니다.

    npm run dev -- -o

http://localhost:3000으로 이동하여 앱을 열면, 선택한 브라우저에서 다음 웹사이트가 열립니다. 서버 및 API 경로를 호출하는 단추를 선택합니다.

Nuxt.js 앱 시작

** 귀하의 Nuxt 3 사이트를 배포하세요.

다음 단계에서는 Azure Static Web Apps 리소스를 만들고 GitHub에서 앱을 배포하도록 구성하는 방법을 보여 줍니다.

Azure Static Web Apps 리소스 만들기

  1. Azure Portal로 이동합니다.

  2. 리소스 만들기를 선택합니다.

  3. Static Web Apps를 검색합니다.

  4. Static Web Apps를 선택합니다.

  5. 선택하고생성합니다.

  6. 기본 탭에서 다음 값을 입력합니다.

    재산 가치
    Subscription Azure 구독 이름.
    리소스 그룹 my-nuxtjs-group
    이름 my-nuxt3-app
    계획 유형 무료
    Azure Functions API 및 스테이징 환경을 위한 영역 가장 가까운 지역을 선택합니다.
    출처 깃허브

  7. GitHub로 로그인을 선택하고 GitHub로 인증합니다.

  8. 다음 GitHub 값을 입력합니다.

    재산 가치
    조직 원하는 GitHub 조직을 선택합니다.
    리포지토리 이전에 만든 리포지토리를 선택합니다.
    브랜치 기본을 선택합니다.

  9. 빌드 세부 정보 섹션의 빌드 사전 설정 드롭다운에서 사용자 지정을 선택하고 기본값을 유지합니다.

  10. 앱 위치의 상자에 를 입력합니다.

  11. API 위치에 상자에 .output/server를 입력합니다.

  12. 출력 위치에 상자에 .output/public을 입력합니다.

검토 후 만들기

  1. 검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.

  2. 만들기를 선택하여 정적 웹앱 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.

  3. 배포가 완료되면 리소스로 이동을 선택합니다.

  4. 개요 창에서 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 배포 사전 설정 설명서를 참조하세요.

사용자 지정 도메인 설정

  • Last updated on