다음을 통해 공유

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로 이동하여 앱을 엽니다. 기본 설정 브라우저에서 다음 웹 사이트가 열리는 것을 확인하십시오.

Next.js 앱 시작

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

세부 정보 페이지

2. 정적 앱 만들기

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

  1. Azure Portal로 이동합니다.

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

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

  4. 정적 웹앱을 선택합니다.

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

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

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

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

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

    재산 가치
    조직 적절한 GitHub 조직을 선택합니다.
    리포지토리 nextjs-starter를 선택합니다.
    브랜치 기본을 선택합니다.

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

  3. 다음과 같은 환경 변수를 설정하도록 빌드 및 배포 작업을 업데이트합니다: IS_STATIC_EXPORTtrue.

        - 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. 예를 선택하여 삭제 작업을 확인합니다.

다음 단계

사용자 지정 도메인 설정

  • Last updated on