정적 파일 제공

애플리케이션은 동적 요청을 처리하는 것 외에도 자바스크립트, 이미지, CSS와 같은 추가적인 정적 파일을 제공해야 하는 경우가 많습니다. 가변형 환경에서는 애플리케이션에 정적 콘텐츠를 제공하는 방법을 결정할 수 있습니다. 정적 콘텐츠를 애플리케이션에서 직접 제공하거나, Cloud Storage와 같은 GCP 옵션으로 호스팅하거나, 타사 콘텐츠 전송 네트워크(CDN)를 사용할 수 있습니다.

App Engine에서 파일 제공

앱에서 파일을 제공하는 것은 일반적으로 간단한 작업이지만, 다음과 같은 몇 가지 단점을 고려해야 합니다.

  • 정적 파일에 대한 요청은 리소스를 사용할 수 있으며, 그러지 않을 경우 리소스가 동적 요청에 사용됩니다.
  • 구성에 따라서는 앱에서 파일을 제공할 경우 응답 지연이 발생할 수 있으며 이로 인해 부하 처리를 위해 새 인스턴스를 만들 때도 영향을 미칠 수 있습니다.

도움말: 프로덕션 환경에서는 일반적으로 GCP 또는 외부적으로 타사 CDN을 사용하여 앱과 별도로 정적 콘텐츠를 제공하는 것이 가장 좋습니다.

앱을 사용한 정적 파일 제공의 예

대부분의 웹 프레임워크에는 정적 파일을 제공하는 기능이 포함되어 있습니다. 이 샘플에서 애플리케이션은 express.static 미들웨어를 사용하여 ./public 디렉토리에서 /static URL로 파일을 제공합니다.

'use strict';

const express = require('express');
const app = express();

app.set('view engine', 'pug');

// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

이 보기는 /static/main.css를 나타냅니다.

doctype html
html(lang="en")
  head
    title Static Files
    meta(charset='utf-8')
    link(rel="stylesheet", href="/static/main.css")
  body
    p This is a static file serving example.

스타일시트 자체는 /static/main.css에서 제공되는 ./public/css에 있습니다.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

Hapi, Koa, Sails와 같은 다른 Node.js 프레임워크는 일반적으로 앱에서 직접 정적 파일 제공을 지원합니다. 정적 콘텐츠 구성 및 사용 방법에 대한 자세한 내용은 해당 문서를 참조하세요.

GCP에서 파일 제공

Cloud CDN 또는 Cloud Storage와 같은 다른 GCP 저장소 서비스를 사용할 수도 있습니다.

Cloud Storage에서 파일 제공

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

  • Cloud Storage는 본질적으로 콘텐츠 전송 네트워크 역할을 합니다. 이 경우 공개적으로 읽을 수 있는 모든 객체가 기본적으로 전역 Cloud Storage 네트워크에 캐시되므로 특별한 구성이 필요 없습니다.
  • 정적 애셋 제공에 따른 부하를 Cloud Storage로 분산하여 앱 부하를 줄일 수 있습니다. 보유한 정적 애셋의 수와 액세스 빈도에 따라 앱 실행 비용을 크게 줄일 수 있습니다.
  • Cloud Storage를 사용하면 콘텐츠 액세스를 위한 대역폭 비용이 절감되는 경우가 많습니다.

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

Cloud Storage 버킷에서 제공하는 예

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

  1. 버킷을 만듭니다. 반드시 그래야 하는 것은 아니지만 일반적으로 프로젝트 ID를 따라 버킷 이름을 지정합니다. 버킷 이름은 전역에서 고유해야 합니다.

    gsutil mb gs://<your-bucket-name>
    
  2. 버킷의 항목에 대한 읽기 액세스 권한을 부여하도록 ACL을 설정합니다.

    gsutil defacl set public-read gs://<your-bucket-name>
    
  3. 항목을 버킷에 업로드합니다. 일반적으로 애셋을 가장 쉽고 빠르게 업로드하고 업데이트하는 방법은 rsync 명령어를 사용하는 것입니다. cp를 사용할 수도 있습니다.

    gsutil -m rsync -r ./static gs://<your-bucket-name>/static
    

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

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

Cloud Storage API를 사용하여 앱 내에서 파일을 동적으로 업로드, 다운로드하고 조작하는 방법에 대한 자세한 내용은 Cloud Storage 사용을 참조하세요.

타사 콘텐츠 전송 네트워크에서 제공

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

성능 향상을 위해서는 CDN 상호 연결을 지원하는 타사 CDN을 사용해야 합니다.

이 페이지가 도움이 되었나요? 평가를 부탁드립니다.

다음에 대한 의견 보내기...

Node.js 문서용 App Engine 가변형 환경