단일 페이지 애플리케이션(single-page application, SPA)은 서버에서 전체 새 페이지를 다시 로딩하는 기존 방법 대신 현재 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 애플리케이션 또는 웹 사이트의 모델입니다. 이 접근 방식은 페이지 사이를 전환하여 사용자 경험이 중단되는 것을 방지하고 애플리케이션을 데스크톱 애플리케이션처럼 만들어 줍니다. SPA에서 필요한 모든 코드(HTML, JavaScript 및 CSS)는 단일 페이지 로딩으로 검색되거나 일반적으로 사용자 작업에 대한 응답으로 필요에 따라 적절한 리소스가 동적으로 로딩되고 페이지에 추가됩니다.
현재 프런트 엔드 개발 분야에서 일반적인 SPA 개발 프레임워크에는 React, Vue 및 Angular가 포함됩니다.
본문은 두 가지 인기 있는 프레임워크를 사용하여 **Tencent Cloud의 Cloud Object Storage(COS)**에서 제공하는 정적 웹 사이트 기능을 사용하여 온라인에서 사용 가능한 SPA를 빠르게 구축하는 방법을 설명하고 몇 가지 일반적인 문제에 대한 솔루션을 제공합니다.
준비 작업
1. Node.js 환경을 설치합니다.
2. Tencent Cloud 계정 가입 및 실명 인증을 완료하여 Tencent Cloud COS 콘솔에 정상적으로 로그인할 수 있도록 합니다.
3. 버킷을 생성합니다(테스트를 용이하게 하려면 버킷 권한을 공개 읽기/비공개 쓰기로 설정).
2. vue-cli에서 다음 명령을 실행하여 vue 프로젝트를 빠르게 생성합니다. 자세한 내용은 공식 문서를 참고하십시오.
vue create vue-spa
3. 다음 명령어를 실행하여 프로젝트 루트 디렉터리에 vue-router를 설치합니다.
npminstall vue-router -S (Vue2.x)
또는
npminstall vue-router@4 -S (Vue3.x)
4. 프로젝트에서 main.js 및 App.vue 파일을 수정합니다.
main.js는 아래 이미지와 같습니다:
주로 아래 이미지와 같이 App.vue 컴포넌트의 template을 수정합니다.
설명：
본문에서는 일부 키 코드만 소개합니다. 전체 코드는 여기를 클릭하여 다운로드할 수 있습니다.
5. 코드 수정 후 다음 명령어를 실행하여 로컬 미리보기를 실행합니다.
npm run serve
6. 디버깅 및 미리보기에 오류 없음을 확인한 후, 다음 명령어를 실행하여 프로덕션 환경 코드를 패키징 합니다.
npm run build
이 때 프로젝트 루트 디렉터리에 dist 디렉터리가 생성되며 Vue 프로그램 코드가 준비됩니다.
React를 사용하여 단일 페이지 애플리케이션을 빠르게 구축
1. 다음 명령어를 실행하여 create-react-app을 설치합니다.
npminstall -g create-react-app
2. create-react-app을 사용하여 react 프로젝트를 빠르게 생성합니다. 공식 홈페이지 문서를 참고하십시오.
3. 다음 명령어를 실행하여 프로젝트 루트 디렉터리에 react-router-dom을 설치합니다.
npminstall react-router-dom -S
4. 프로젝트에서 App.js 파일을 수정합니다.
</br>
설명：
본문에서는 일부 키 코드만 소개합니다. 전체 코드는 여기를 클릭하여 다운로드할 수 있습니다.
5. 코드 수정 후 다음 명령어를 실행하여 로컬 미리보기를 실행합니다.
npm run start
6. 디버깅 및 미리보기에 오류 없음을 확인한 후, 다음 명령어를 실행하여 프로덕션 환경 코드를 패키징 합니다.
npm run build
이 때 프로젝트 루트 디렉터리에 build 디렉터리가 생성되며 React 프로그램 코드가 준비됩니다.
버킷 정적 웹 사이트 설정 활성화
1. 생성된 버킷의 세부 정보 페이지로 이동하여 기본 구성 > 정적 웹 사이트를 선택합니다.
2. 정적 웹 사이트 관리 페이지에서 아래 이미지를 참고하여 설정합니다. 자세한 작업은 정적 웹 사이트 설정을 참고하십시오.
COS에 배포
1. 이전에 설정되어 있던 정적 웹 사이트의 버킷을 찾아서 파일 리스트 페이지로 들어갑니다.
2. 컴파일 디렉터리(Vue 기본값: dist 디렉터리, react 기본값: build 디렉터리)의 모든 파일을 버킷의 루트 디렉터리에 업로드합니다. 자세한 작업은 객체 업로드를 참고하십시오.
3. 버킷의 정적 웹 사이트 도메인(아래 이미지의 액세스 노드)에 액세스합니다.
배포된 애플리케이션의 메인 페이지를 볼 수 있습니다. 다음은 Vue 애플리케이션 예시입니다.
4. 라우팅(Home, Foo, Bar)을 전환하고 페이지를 새로고침하여 예상에 부합하는지 확인합니다(즉, 라우팅에서 새로고침할 때 404 오류가 발생하지 않음).
FAQ
정적 웹사이트의 기본 도메인 이름을 사용하고 싶지 않으면 어떻게 하나요? 내 도메인 이름을 사용할 수 있나요?
상기 기본 정적 웹사이트 엔드포인트 외에도 COS를 사용하면 사용자 정의 CDN 가속 도메인 이름과 사용자 정의 엔드포인트를 설정할 수 있습니다. 구성 세부 정보는 도메인 관리 개요를 참고하십시오. 구성에 성공하면 원하는 도메인 이름을 사용하여 애플리케이션에 액세스할 수 있습니다.
CDN 가속 도메인 이름 구성을 선택한 경우 노드 캐시 유효성 구성을 참고하여 업데이트된 데이터를 얻으십시오.
애플리케이션 배포 후 라우팅 전환 시 렌더링이 성공적이지만 페이지 새로고침 시 404 오류 발생 원인이 무엇인가요?
가능한 원인은 정적 웹 사이트를 설정할 때 설정이 누락되었거나 오류 문서가 잘못 설정되었기 때문일 수 있습니다. 본문 시작 부분의 표준 설정 스크린샷에서 오류 문서와 인덱스 문서 모두 index.html 로 설정되어 있는 것을 확인할 수 있습니다.
단일 페이지 애플리케이션의 특성으로 인해 후속 라우팅을 위한 일련의 내부 로직을 트리거 하려면 어떤 상황에서도 애플리케이션 게이트(일반적으로 'index.html')에 성공적으로 액세스할 수 있는지 확인해야 합니다.
라우팅 전환 후 페이지가 정상적으로 표시되지만 HTTP 상태 코드는 여전히 404입니다. 어떻게 해야 정상적으로 200이 반환됩니까?
원인은 정적 웹 사이트를 설정할 때 설정 오류 문서 응답 코드가 부족하기 때문입니다. 본문 시작 부분의 표준 설정 스크린샷을 참고하여 200으로 설정하면 해결됩니다.
오류 문서 설정 후 오류 액세스 경로에 여전히 404 기능을 표시하려면 어떻게 처리해야 하나요?
프런트 엔드 코드에서 404 로직을 구현하는 것을 추천합니다. 라우팅 설정 하단에 하위 수준에 일치하는 규칙을 설정하고 이전의 모든 규칙이 일치하지 않을 때 404 컴포넌트가 렌더링됩니다. 컴포넌트 콘텐츠는 필요에 따라 설계 및 구현할 수 있습니다. 자세한 내용은 본문에서 제공하는 코드 demo의 라우팅 설정의 마지막 설정을 참고하십시오.
페이지 액세스 시 403 Access Denied 오류가 발생하는 이유는 무엇입니까?
버킷의 권한이 개인 읽기/쓰기로 설정되어 있을 수 있습니다. 공개 읽기/개인 쓰기로 수정하여 해결할 수 있습니다.
또한 CDN 가속 도메인을 사용하여 개인 읽기/쓰기 버킷에 액세스하는 경우 Origin-pull 인증 설정도 활성화해야 CDN에 COS 리소스 액세스 권한이 부여됩니다.
