정적 웹 사이트 호스팅을 위한 OCI Object Storage 및 Oracle API Gateway 설정

소개

OCI(Oracle Cloud Infrastructure)에서 호스팅하려는 웹 애플리케이션이 있고 정적 웹 사이트 호스팅을 설정하려는 경우 이 자습서에서는 OCI Object Storage 및 Oracle API Gateway를 사용하여 풍부한 AOT(Ahead-of-Time) 컴파일된 JavaScript 웹 애플리케이션의 정적 호스팅을 구성하는 과정을 안내합니다. HTTP를 통해 정적 파일을 제공하려는 모든 시나리오에도 동일한 접근 방식을 적용할 수 있습니다. 간단한 앱이든 정적 웹 페이지이든 OCI 플랫폼의 사용자에게 신뢰할 수 있는 온라인 경험을 제공하는 것이든 저렴한 비용으로 말이죠.

목표

OCI Object Storage 및 Oracle API Gateway를 활용하여 Oracle Cloud Infrastructure에서 웹 콘텐츠를 효율적으로 배포하고 관리하기 위한 정적 웹 사이트를 호스팅하는 방법을 알아보십시오.

필수 조건

작업 1: Oracle Object Storage 버킷 생성

먼저 OCI Object Storage에 새 버킷을 생성해 보겠습니다. 이 버킷은 정적 웹 사이트를 호스팅하는 데 사용됩니다.

오브젝트 스토리지 버킷

작업 2: 버킷에 배포 파일 업로드

애플리케이션 배포 파일을 이전 작업에서 생성한 버킷으로 업로드합니다. 응용 프로그램 배포 파일은 일반적으로 응용 프로그램 디렉토리의 /dist 폴더에 있으며 webpack 빌드의 출력입니다.

분배 파일

참고: oci-cli를 사용하여 파일을 업로드하려면 Content-Type이 올바르게 설정되도록 --content-type auto 매개변수를 지정해야 합니다.

작업 3: 사전 인증된-요청 생성

Oracle API Gateway가 인터넷을 통해 배포 파일을 제공할 수 있도록 하려면 배포 파일이 저장된 오브젝트 스토리지 버킷에 대해 사전 인증된 요청 PAR을 생성해야 합니다.

API 게이트웨이를 구성할 때 이 기능을 사용합니다.

작업 4: Oracle API Gateway 생성

Oracle API Gateway 서비스를 사용하면 네트워크 내에서 액세스할 수 있는 프라이빗 끝점이 있는 API를 게시할 수 있으며, 인터넷 트래픽을 허용하려는 경우 퍼블릭 IP 주소로 노출할 수 있습니다. 엔드포인트는 API 검증, 요청 및 응답 변환, CORS, 인증 및 권한 부여, 요청 제한을 지원합니다. 자세한 내용은 Oracle API Gateway 개요를 참조하십시오.

  1. OCI 메뉴, 개발자 서비스, API 게이트웨이로 이동하고 생성을 누릅니다.

참고: 이 Oracle API Gateway를 배치하려면 가상 클라우드 네트워크가 필요합니다. VCN이 아직 생성되지 않은 경우 생성합니다.

Oracle API Gateway

작업 5: Oracle API Gateway 배치 설정

Oracle API Gateway가 성공적으로 생성되면 배치로 이동하여 새 배치를 생성합니다.

  1. Create from scratch를 선택하고 Path 접두어를 "/"로 설정합니다. URL의 기본 경로가 됩니다.

    게이트웨이 배치

  2. 여기서 TLS, CORS 등을 설정하거나 다음을 눌러 다음 단계로 이동합니다.

  3. No Authentication(인증 없음)을 선택하고 Next(다음)를 누릅니다. 우리는 우리의 정적 웹 사이트에 대한 인증을 추가 할 필요가 없습니다.

    배포 승인

작업 6: 경로 추가

API 배치 마법사에서 배치에 대한 기본 경로를 확장할 경로를 추가합니다.

  1. 경로 필드에 /{req*}를 입력합니다.

    배포 경로

  2. 메소드 드롭다운 목록에서 GET을 선택합니다.

  3. 추가된 다중 백엔드 편집을 선택합니다.

    다중 백엔드 배치

  4. 선택기 필드에서 경로를 선택합니다.

    배포 경로

  5. 백엔드 정의를 누릅니다.

  6. 기본 규칙을 생성하고 이름을 기본값으로, 일치 유형을 임의로 입력한 다음 기본값으로 설정 확인란을 선택하고 백엔드를 HTTP로 선택한 다음 URL 필드에 index.html 페이지의 오브젝트 스토리지 URL을 입력하고 생성을 누릅니다.

    백엔드 정의

  7. js 파일 규칙을 생성하고 이름을 js-rule로, 일치 유형을 와일드카드로, *.js를 와일드카드 표현식으로 입력하고 백엔드를 HTTP로 선택한 다음 오브젝트 스토리지 버킷 URL에 URL 필드에 ${request.path[req]} 페이지를 입력하고 생성을 누릅니다. URL은 다음과 유사합니다.

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. Create를 누릅니다.

    백엔드 정의

  9. 필요에 따라 css, html, txt, json 파일에 대해 유사한 규칙을 생성합니다.

    백엔드 모두 정의

  10. 다음을 누르고 Oracle API Gateway 생성을 완료한 후 업데이트될 때까지 기다립니다.

작업 7: 테스트

배치 URL을 검색하여 웹 브라우저에 입력합니다. 그러면 응용 프로그램이 표시됩니다.

주:

  1. 애플리케이션이 로드되지 않은 경우 VCN의 보안 목록 또는 네트워크 보안 그룹에서 Oracle API Gateway에 대한 트래픽을 허용하는지 확인합니다.

  2. 애플리케이션이 백엔드 정의에 있는 다양한 파일 유형을 모두 추가하는 것을 잊지 마십시오.

  3. 이 기술을 사용하여 AOT(Ahead of Time) 컴파일된 응용 프로그램과 정적 웹 사이트만 설정할 수 있습니다. 응용 프로그램이 고유 Javascript 코드로 컴파일되었는지 확인합니다.

승인

작성자 - Mayank Kakani(OCI 클라우드 아키텍트)

추가 학습 자원

docs.oracle.com/learn에서 다른 랩을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 액세스하세요. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer가 되십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.