정적 웹 사이트 빌드

이 학습서는 버킷 작성, 컨텐츠 업로드 및 새 웹 사이트 구성을 포함하여 IBM Cloud® Object Storage에서 정적 웹 사이트를 호스팅 하는 방법을 보여줍니다.

IBM Cloud Object Storage 을 사용하여 정적 웹 사이트를 호스팅하면 사용자에게 유연성, 전달 용이성 및 고가용성을 제공하는 공용 액세스를 위한 정적 컨텐츠를 제공합니다. 이 튜토리얼에는 cURL, AWS CLI 및 콘솔사용에 대한 지시사항이 포함되어 있습니다. 이 주제의 제목 위에 있는 지시사항 사이를 전환하기 위한 링크를 사용하여 이 학습서의 경로를 선택하십시오.

시나리오

이 학습서의 시나리오는 관련된 단계를 강조표시하기 위해 웹 호스팅을 해당 필수사항으로 단순화합니다. 모든 구성 옵션이 이 학습서에서 다루어지는 것은 아니지만 이 학습서를 올바르게 완료하면 웹에서 액세스할 수 있는 컨텐츠가 작성됩니다.

시작하기 전에

시작해야 하는 항목이 있는지 확인하십시오.

  • IBM Cloud 플랫폼의 계정
  • IBM Cloud Object Storage 의 인스턴스
  • 텍스트 (HTML이 완벽함) 및 이미지 파일과 같은 고정 양식의 컨텐츠

이 튜토리얼에서 사용할 버킷에 대해 사용할 IBM Cloud Object Storage 의 인스턴스 또는 적절한 권한 에 대한 액세스 권한이 있는지 확인하십시오.

이 튜토리얼에서 IBM Cloud CLI 를 사용하려면 사용할 서비스 인스턴스 및 새 버킷을 작성할 기본 지역을 지정하도록 Object Storage 플러그인을 구성 해야 합니다.

공용 액세스를 위해 구성된 버킷 작성

정적 웹 사이트에 대한 버킷을 작성하려면 공용 액세스가 필요합니다. 공용 액세스를 구성하기 위한 여러 옵션이 있습니다. 특히 ObjectReader IAM 역할 을 사용하면 여전히 인터넷에서 정적 컨텐츠를 볼 수 있도록 허용하면서 버킷의 컨텐츠를 나열할 수 없습니다. 컨텐츠 목록 보기를 허용하려면 버킷에 대해 ContentReader IAM 역할 을 사용하십시오.

버킷 작성

CLI 플러그인을 구성한 후 예제 명령에 표시된 대로 플레이스홀더 컨텐츠를 대체하여 버킷을 작성하십시오.

ibmcloud cos bucket-create --bucket <bucketname>

콘솔에 로그인하고 IBM Cloud Object Storage의 인스턴스를 작성한 후 버킷을 작성할 수 있습니다. 그림 1과 같이 "Create bucket" 단추를 클릭하고 옵션 중에서 선택한다. "버킷 사용자 정의" 라는 카드를 선택하십시오.

버킷 커스터마이즈

웹 사이트에 있는 정적 파일의 컨테이너는 이름을 지정할 수 있는 버킷에 상주합니다. 작성하는 이름은 고유해야 하며, 개인 또는 식별 정보를 포함하지 않아야 하고, 두 개의 마침표, 점 또는 하이픈을 한 행에 사용할 수 없으며, 영숫자 문자 (ASCII 문자 세트 항목 3-63) 로 시작하고 끝나야 합니다. 예제는 그림 2를 참조하십시오.

정적 웹 사이트의 이름 버킷

공용 액세스 설정

이 학습서의 모든 시나리오에서 콘솔의 UI 를 사용하여 새 웹 사이트에 대한 공용 액세스 를 허용할 수 있습니다.

정적 웹 사이트 컨텐츠를 호스트하기 위한 버킷을 작성할 때 버킷 작성 프로세스의 일부로 공용 액세스를 사용으로 설정하는 옵션이 있습니다. 버킷에 대한 공용 액세스를 사용으로 설정하는 옵션은 그림 3을 참조하십시오. 표시된 대로 "색인 문서" 및 "오류 문서" 의 옵션에 대한 설명을 보려면 아래의 웹 사이트에 대한 옵션 구성 절에서 자세히 찾으십시오. 다음 단계에 표시된 대로 버킷에 컨텐츠를 업로드하기 전에 이 단계에서 기본 구성을 완료할 수 있습니다.

공용 액세스 사용

버킷에 컨텐츠 업로드

호스팅되는 정적 웹 사이트 파일의 컨텐츠는 정보 및 매체에 자연스럽게 초점을 맞춥니다. 정적 웹 사이트의 컨텐츠를 작성하는 일반적인 방법은 StaticGen에 나열된 오픈 소스 생성기입니다. 이 학습서에서는 두 개의 파일만 필요합니다.

  • 사이트 방문자를 위해 기본적으로 로드되는 색인 페이지 (일반적으로 HTML로 작성되고 index.html 로 이름 지정됨)
  • HTML및 여기서 error.html 라고도 하는 오류 페이지. 일반적으로 방문자가 존재하지 않거나 공용 액세스 권한이 없는 오브젝트에 액세스하려고 시도하면 오류 페이지가 로드됩니다.

이미지, PDF 또는 비디오와 같은 다른 파일도 버킷에 업로드할 수 있습니다 (그러나 이 학습서는 최소 요구사항 세트에만 초점을 맞춥니다).

이 학습서에서는 색인 및 오류 처리를 위한 HTML 페이지를 로컬 디렉토리에 배치합니다. 예제 명령에 표시된 대로 플레이스홀더 컨텐츠를 대체하여 html 파일을 업로드하십시오.

ibmcloud cos object-put --bucket BUCKET_NAME --key KEY [--body FILE_PATH]

정적 웹 사이트를 호스팅하기 위한 기본 구성을 이미 완료했을 수 있습니다. 버킷의 이름을 지정하고 구성했으면 콘솔에서 직접 파일을 업로드할 수 있습니다. 이 단계는 그림 4와 같이 선택적이며 새로 호스트된 웹 사이트를 테스트하기 전에 언제든 발생할 수 있다.

파일 업로드

학습서의 나머지 부분에서는 색인 페이지의 오브젝트 키가 index.html 이고 오류 문서의 키가 error.html 인 것으로 가정합니다. 단, 접미부 또는 키에 적절한 파일 이름을 사용할 수 있습니다.

웹 사이트에 대한 옵션 구성

이 학습서에서 설명할 수 있는 것보다 더 많은 옵션이 있으며, 이 학습서에서는 정적 웹 사이트 기능을 사용하여 시작하도록 구성을 설정하기만 하면 됩니다.

적절한 구성 정보를 사용하여 JSON 파일을 작성하십시오.

{
  "ErrorDocument": {
    "Key": "error.html"
  },
  "IndexDocument": {
    "Suffix": "index.html"
  }
}

예제 명령에 표시된 대로 플레이스홀더 컨텐츠를 대체하여 웹 사이트를 구성하십시오.

ibmcloud cos bucket-website-put --bucket BUCKET_NAME --website-configuration file://<filename.json>

호스팅된 정적 웹 사이트에 대한 기본 구성이 컨텐츠가 표시되는 시기 및 방법을 판별하므로 버킷 작성 중에 이 단계를 완료했을 수 있습니다. 키 또는 웹 페이지를 제공하지 못한 웹 사이트 방문자의 경우 기본 파일이 대신 표시됩니다. 사용자에게 오류가 발생하면 오류 페이지의 키에 따라 방문자가 수신할 컨텐츠가 결정됩니다. 기본 및 오류 페이지에 대한 구성 옵션은 참조를 위해 반복됩니다.

구성 옵션

새 웹 사이트 테스트 및 방문

예제 명령을 사용하여 HTTP 헤더를 제공하도록 버킷을 구성한 후에는 새 사이트를 테스트하기 위해 사이트의 URL을 방문하기만 하면 됩니다. 플레이스홀더를 이 학습서에서 이전에 선택한 사항으로 대체한 후에 표시된 프로토콜 (http) 에 유의하십시오.

http://<bucketname>.s3-web.<endpoint>/

새 사이트의 성공적인 테스트를 통해 이제 더 많은 옵션을 탐색하고 더 많은 컨텐츠를 추가할 수 있습니다.

다음 단계

IBM Cloud Object Storage 호스팅된 정적 웹 사이트의 구성 옵션에 대한 자세한 설명은 API 문서에서 찾을 수 있습니다.