정적 파일 저장 및 제공

애플리케이션은 동적 요청 처리 외에도 자바스크립트, 이미지, CSS와 같은 정적 파일을 종종 제공해야 합니다. 표준 환경의 앱은 Cloud Storage와 같은 Google Cloud 옵션으로 정적 파일을 제공하거나, 직접 제공하거나, 타사 콘텐츠 전송 네트워크(CDN)를 사용할 수 있습니다.

Cloud Storage에서 파일 제공

Cloud Storage는 동적 웹 앱의 정적 애셋을 호스팅할 수 있습니다. 앱에서 직접 제공하는 대신 Cloud Storage를 사용할 때의 이점은 다음과 같습니다.

• Cloud Storage가 콘텐츠 전송 네트워크 역할을 하게 되는데, 그렇다고 특별한 구성이 필요한 것은 아닙니다. 공개적으로 읽을 수 있는 모든 객체가 글로벌 Cloud Storage 네트워크에 캐시되기 때문입니다.
• 정적 애셋 제공에 따른 부하를 Cloud Storage로 분산함으로써 앱 부하를 줄일 수 있습니다. 포함된 정적 애셋 수 및 액세스 빈도에 따라 앱 실행 비용을 크게 줄일 수 있습니다.
• Cloud Storage를 사용하면 콘텐츠 액세스를 위한 대역폭 비용을 낮출 수 있습니다.

Google Cloud CLI 또는 Cloud Storage API를 사용하여 Cloud Storage에 애셋을 업로드할 수 있습니다.

Google Cloud 클라이언트 라이브러리는 App Engine 앱에서 Cloud Storage로 데이터를 저장하고 검색하기 위한 Cloud Storage에 관용적 클라이언트를 제공합니다.

Cloud Storage 버킷을 사용한 파일 제공의 예시

이 예에서는 Cloud Storage 버킷을 만들고 gcloud CLI를 사용하여 정적 애셋을 업로드합니다.

1. 버킷을 만듭니다. 버킷 이름을 프로젝트 ID와 동일하게 지정하는 것이 일반적이지만 필수는 아닙니다. 버킷 이름은 전역적으로 고유해야 합니다.

   gcloud storage buckets create gs://<var>your-bucket-name</var>
   

2. 버킷의 항목에 대한 공개 읽기 액세스 권한을 부여하도록 IAM 정책을 설정합니다.

   gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer
   

3. 버킷에 항목을 업로드합니다. 애셋을 업로드하고 업데이트할 때는 일반적으로 rsync 명령어가 가장 빠르고 쉬운 방법입니다. cp를 사용해도 됩니다.

   gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive
   

이제 https://storage.googleapis.com/<var>your-bucket-name</var>/static/...을 통해 정적 애셋에 액세스할 수 있습니다.

커스텀 도메인 이름에서 제공하는 방법 등 Cloud Storage를 사용해서 정적 애셋을 제공하는 방법에 대한 자세한 내용은 정적 웹사이트를 호스팅하는 방법을 참조하세요.

다른 Google Cloud 서비스에서 파일 제공

Cloud CDN 또는 다른 Google Cloud Storage 서비스를 사용할 수도 있습니다.

앱에서 직접 파일 제공

표준 환경에서 정적 파일을 제공하려면 app.yaml 파일에서 static_dir 또는 static_files 요소를 사용하여 핸들러를 정의합니다.

정적 파일이나 정적 디렉터리의 콘텐츠는 app.yaml 파일의 확장 설정에 영향을 받지 않습니다. 정적 파일이나 정적 디렉터리에 대한 요청은 App Engine 인프라에서 직접 처리되며 애플리케이션의 언어 런타임에 도달하지 않습니다.

정적 파일 핸들러 구성

/static URL에서 ./public 디렉터리를 제공하도록 앱을 구성하려면 app.yaml 파일에서 핸들러를 정의합니다.

다음은 샘플 앱의 ./public 디렉터리에 있는 정적 파일을 제공하는 방법을 보여줍니다. 이 앱의 index.html 페이지 템플릿은 브라우저가 main.css 파일을 로드하도록 지시합니다. 예를 들면 다음과 같습니다.

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

./public 디렉터리는 프로젝트의 app.yaml 파일에 있는 static_dir 요소에 정의됩니다.

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

위 예시에서 handlers 섹션은 세 가지 URL 패턴을 처리합니다.

• /favicon.ico 핸들러는 앱의 루트 디렉터리에 있는 favicon.ico 이름의 파일에 /favicon.ico에 대한 요청을 매핑합니다.

• /static 핸들러는 /static으로 시작하는 URL에 대한 요청을 매핑합니다. App Engine이 /static으로 시작하는 URL 요청을 수신하면 경로의 나머지 부분을 ./public 디렉터리의 파일에 매핑합니다. 디렉터리에서 적절한 파일이 발견되면 해당 파일의 내용이 클라이언트에 반환됩니다.

• /.* 핸들러는 다른 모든 URL을 매치하여 앱에 연결합니다.

URL 경로 패턴은 app.yaml에 표시된 순서에 따라 테스트됩니다. 따라서 정적 파일의 패턴을 /.* 패턴 앞에 정의해야 합니다. 자세한 내용은 app.yaml 참조 문서를 확인하세요.

서드 파티 콘텐츠 전송 네트워크에서 제공

외부 서드 파티 CDN을 사용해서 정적 파일을 제공하고 동적 요청을 캐시할 수 있지만, 이 경우 앱에서 지연 시간과 비용이 늘어날 수 있습니다.

성능 향상을 위해서는 CDN Interconnect를 지원하는 서드 파티 CDN을 사용해야 합니다.