단일 페이지 애플리케이션 호스팅
개요
React, Vue, Angular와 같은 최신 프레임워크로 구축된 여러 웹 애플리케이션은 서버에서 렌더링된 각 페이지를 가져오는 대신, 클라이언트 사이드에서 라우팅 및 렌더링을 동적으로 처리하는 단일 페이지 애플리케이션(SPA)입니다. Atlas App Services를 사용하여 SPA를 호스팅하고 클라이언트에 제공할 수 있습니다.
앱을 호스팅하려면 App Services에서 해당 앱이 SPA임을 지정해야 합니다. 기본적으로 App Services는 지정된 리소스 경로에 호스팅된 파일을 반환하거나 경로와 일치하는 파일이 없으면 404를 반환하여 지정된 리소스에 대한 요청을 처리합니다. 그러나 SPA는 특정 HTML 파일을 하나로 렌더링하므로 요청된 리소스 경로에 관계없이 모든 요청이 해당 파일을 반환해야 합니다.
이 가이드에서는 App Services Hosting이 모든 리소스 요청을 단일 파일로 리디렉션하여 SPA 패턴을 지원하도록 구성하는 방법에 대해 설명합니다.
참고
단일 페이지 앱의 404 오류
단일 페이지 애플리케이션 호스팅 이 활성화되면 App Services는 요청된 경로에 관계없이 항상 앱 루트와 함께 HTTP 200 응답을 반환합니다. 즉, SPA에 대해 사용자 지정 404 페이지를 지정할 수 없습니다. 대신 애플리케이션에 사용자 지정 코드를 포함하여 유효하지 않은 경로를 처리해야 합니다.
절차
빌드된 애플리케이션을 App Services에 업로드
단일 페이지 애플리케이션은 일반적으로 /index.html 인 단일 특정 HTML 파일 로 렌더링됩니다. 파일 에는 애플리케이션 을 연결하고 렌더링하는 데 필요한 JavaScript 코드 <script> 태그를 지정하다 의 인라인 또는 외부 파일 에서 가져온)가 포함되어 있어야 합니다. 또한 CDN을 통해 액세스 계획이 아닌 모든 리소스를 호스팅하다 해야 합니다.
SPA를 호스팅할 준비가 되면 애플리케이션의 빌드 스크립트를 실행한 다음 빌드 폴더를 App Services에 업로드합니다 .
애플리케이션을 제공하도록 App Services 구성
애플리케이션 파일 호스팅을 시작하면 루트 HTML 파일을 직접 요청하여 SPA에 즉시 액세스할 수 있습니다.그러나 루트 파일이 아닌 다른 경로에 대한 요청은 404를 반환합니다. 이로 인해 클라이언트 사이드 라우터를 사용하거나 URL 경로에 의존하는 SPA의 예상 동작이 중단될 수 있습니다.
모든 요청에 대해 SPA의 루트 페이지를 제공하도록 App Services를 구성하려면 다음을 수행합니다.
App Services UI 에서 Hosting 페이지로 이동한 다음 Settings 탭 을 클릭합니다.
사용자 지정 404 페이지가 지정되어 있는지 확인합니다. 사용자 지정 404를 사용하도록 설정한 경우 휴지통 아이콘()를 지정된 404 페이지 옆에 배치합니다.
Single Page Application 옆의 Choose File 을 클릭합니다. SPA의 루트 HTML 파일을 선택한 다음 Select 를 클릭합니다.
Save를 클릭합니다.
앱의 최신 버전 가져오기
App Services CLI 를 사용하여 단일 페이지 애플리케이션 을 구성하려면 애플리케이션 구성 파일의 로컬 복사본이 필요합니다.
최신 버전의 앱의 로컬 사본을 가져오려면 다음을 실행하세요.
appservices pull --remote="<Your App ID>"
팁
Realm UI의 Deploy > Import/Export App 화면에서 애플리케이션의 구성 파일 사본을 다운로드할 수도 있습니다.
빌드된 애플리케이션 코드 추가
단일 페이지 애플리케이션은 일반적으로 /index.html 과 같은 단일 특정 HTML 파일로 렌더링됩니다. 파일에는 애플리케이션을 연결하고 렌더링하는 데 필요한 JavaScript 코드 <script> 태그의 인라인 또는 외부 파일에서 가져온)가 포함되어야 합니다. 또한 CDN을 통해 액세스할 계획이 아닌 모든 리소스를 호스팅해야 합니다.
SPA를 호스팅하다 할 준비가 되면 애플리케이션의 빌드 스크립트 를 실행 한 다음 출력 빌드 폴더를 애플리케이션 디렉토리 의 /hosting/files 디렉토리 에 복사합니다.
애플리케이션을 제공하도록 App Services 구성
hosting/config.json 에서 default_response_code 을 200 로 설정하다 하고 default_error_path 을 SPA 루트 HTML 파일 의 리소스 경로 로 설정하다 합니다. 완료되면 파일 을 저장해야 합니다.
{ "enabled": true, "default_response_code": 200, "default_error_path": "/index.html", }