Azure Static Web Apps에서 정적으로 렌더링된 Next.js 웹 사이트 배포

  • 아티클

이 자습서에서는 Next.js에서 생성된 정적 웹 사이트를 Azure Static Web Apps에 배포하는 방법을 알아봅니다. Next.js 관련 사항에 대한 자세한 내용은 시작 템플릿 추가 정보를 참조하세요.

필수 조건

1. Next.js 앱 설정

Next.js CLI를 사용하여 앱을 만드는 대신 시작 리포지토리를 사용할 수 있습니다. 시작 리포지토리에는 동적 경로를 지원하는 기존 Next.js 앱이 포함되어 있습니다.

시작하려면 템플릿 리포지토리에서 GitHub 계정 아래에 새 리포지토리를 만듭니다.

  1. https://github.com/staticwebdev/nextjs-starter/generate로 이동

  2. 리포지토리 이름을 nextjs-starter로 지정

  3. 그런 다음, 새 리포지토리를 머신에 복제합니다. <YOUR_GITHUB_ACCOUNT_NAME>을 계정 이름으로 바꿔야 합니다.

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

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

    cd nextjs-starter

  5. 종속성을 설치합니다.

    npm install

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

    npm run dev

  7. http://localhost:3000으로 이동하여 앱을 엽니다. 이 경우 기본 브라우저에서 다음 웹 사이트를 열어 볼 수 있습니다.

Start Next.js app

프레임워크 또는 라이브러리를 선택하면 선택한 항목에 대한 세부 정보 페이지가 표시됩니다.

Details page

2. 정적 앱 만들기

다음 단계에서는 앱을 Azure Static Web Apps에 연결하는 방법을 보여 줍니다. Azure에 있으면 애플리케이션을 프로덕션 환경에 배포할 수 있습니다.

  1. Azure Portal로 이동합니다.

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

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

  4. Static Web App을 선택합니다.

  5. 만들기를 실행합니다.

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

    속성 값
    구독 Azure 구독 이름.
    리소스 그룹 my-nextjs-group
    이름 my-nextjs-app
    플랜 유형 무료
    Azure Functions API 및 스테이징 환경을 위한 영역 가장 가까운 지역을 선택합니다.
    Source GitHub

  7. GitHub로 로그인을 선택하고 메시지가 표시되면 GitHub로 인증합니다.

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

    속성 값
    조직 적절한 GitHub 조직을 선택합니다.
    리포지토리 nextjs-starter를 선택합니다.
    Branch 기본을 선택합니다.

  9. 빌드 세부 정보 섹션의 빌드 기본 설정에서 사용자 지정을 선택합니다. 빌드 구성에 대해 다음 값을 추가합니다.

    속성 값
    앱 위치 상자에 /를 입력합니다.
    API 위치 이 상자를 비워 둡니다.
    출력 위치 상자에 out을 입력합니다.

3. 검토 및 만들기

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

  2. 만들기를 선택하여 App Service Static Web App 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.

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

  4. 개요 창에서 URL 링크를 선택하여 배포된 애플리케이션을 엽니다.

웹 사이트가 즉시 로드되지 않으면 빌드가 계속 실행 중인 것입니다. 작업 워크플로의 상태를 확인하려면 리포지토리의 작업 대시보드로 이동합니다.

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

워크플로가 완료되면 브라우저를 새로 고치고 웹앱을 볼 수 있습니다.

이제 main 분기를 변경하면 웹 사이트의 새 빌드 및 배포가 시작됩니다.

4. 변경 내용 동기화

앱을 만들 때 Azure Static Web Apps는 리포지토리에 GitHub Actions 파일을 만들었습니다. 최신 버전을 로컬 리포지토리로 가져와 서버와 동기화합니다.

터미널로 돌아가 다음 git pull origin main 명령을 실행합니다.

정적 렌더링 구성

기본적으로 애플리케이션은 하이브리드 렌더링된 Next.js 애플리케이션으로 처리되지만 정적 사이트 생성기로 계속 사용하려면 배포 작업을 업데이트해야 합니다.

  1. Visual Studio Code 리포지토리를 엽니다.

  2. .github/workflows/azure-static-web-apps-<your site ID>.yml의 리포지토리에 Azure Static Web Apps가 추가한 GitHub Actions 파일로 이동합니다.

  3. IS_STATIC_EXPORT의 환경 변수를 true로 설정하도록 빌드 및 배포 작업을 업데이트합니다.

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. git에 변경 내용을 커밋하고 GitHub에 푸시합니다.

    git commit -am "Configuring static site generation" && git push

빌드가 완료되면 사이트가 정적으로 렌더링됩니다.

리소스 정리

이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web Apps 인스턴스를 삭제할 수 있습니다.

  1. Azure Portal을 엽니다.
  2. 위쪽 검색 창에서 my-nextjs-group을 검색합니다.
  3. 그룹 이름을 선택합니다.
  4. 삭제를 선택합니다.
  5. 예를 선택하여 삭제 작업을 확인합니다.

다음 단계

사용자 지정 도메인 설정