[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["難以理解","hardToUnderstand","thumb-down"],["資訊或程式碼範例有誤","incorrectInformationOrSampleCode","thumb-down"],["缺少我需要的資訊/範例","missingTheInformationSamplesINeed","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-09-04 (世界標準時間)。"],[[["\u003cp\u003eApps in the standard environment can serve static files directly, use a third-party content delivery network (CDN), or leverage Google Cloud options like Cloud Storage.\u003c/p\u003e\n"],["\u003cp\u003eUsing Cloud Storage to host static assets can reduce app load, lower bandwidth charges, and function as a content delivery network by default with publicly readable objects being cached globally.\u003c/p\u003e\n"],["\u003cp\u003eStatic files can be served directly from an app by configuring handlers in the \u003ccode\u003eapp.yaml\u003c/code\u003e file using \u003ccode\u003estatic_dir\u003c/code\u003e or \u003ccode\u003estatic_files\u003c/code\u003e elements, which are managed directly by the App Engine infrastructure.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003eapp.yaml\u003c/code\u003e file allows you to define handlers for specific URL patterns, such as mapping requests for \u003ccode\u003e/static\u003c/code\u003e to files within a designated directory like \u003ccode\u003e./public\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eWhile third-party CDNs can be utilized, they might result in increased latency and cost, but using a CDN that supports CDN Interconnect can improve performance.\u003c/p\u003e\n"]]],[],null,["# Storing and serving static files\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\nGo Java Node.js PHP Python Ruby\n\nApplications often need to serve static files such as JavaScript, images, and\nCSS in addition to handling dynamic requests. Apps in the standard\nenvironment can serve static files from a Google Cloud option\nlike Cloud Storage, serve them directly, or use a third-party content\ndelivery network (CDN).\nHosting your static site on Google Cloud can cost less than using a traditional hosting provider, as Google Cloud provides a [free tier](/free).\n\nServing files from Cloud Storage\n--------------------------------\n\n[Cloud Storage](/storage) can host\nstatic assets for dynamic web apps. The benefits of using Cloud Storage\ninstead of serving directly from your app include:\n\n- Cloud Storage essentially works as a [content delivery network](https://wikipedia.org/wiki/Content_delivery_network). This does not require any special configuration because by default any publicly readable object is cached in the global Cloud Storage network.\n- Your app's load will be reduced by offloading serving static assets to Cloud Storage. Depending on how many static assets you have and the frequency of access, this can reduce the cost of running your app by a significant amount.\n- Bandwidth charges for accessing content can often be less with Cloud Storage.\n\nYou can upload your assets to Cloud Storage by using the\n[Google Cloud CLI](/storage/docs/uploading-objects)\nor the [Cloud Storage API](/storage/docs).\n\nThe Google Cloud Client Library provides an idiomatic\n[client to Cloud Storage](/storage/docs/reference/libraries),\nfor storing and retrieving data with Cloud Storage in an\nApp Engine app.\n\n\n### Example of serving from a Cloud Storage bucket\n\nThis example creates a Cloud Storage bucket and uploads static\nassets using the gcloud CLI:\n\n1. Create a bucket. It's common, but not required, to name your bucket after\n your project ID. The bucket name must be globally unique.\n\n gcloud storage buckets create gs://\u003cvar\u003eyour-bucket-name\u003c/var\u003e\n\n2. Set the IAM policy to grant public read access to items in the bucket.\n\n gcloud storage buckets add-iam-policy-binding gs://\u003cvar\u003eyour-bucket-name\u003c/var\u003e --member=allUsers --role=roles/storage.objectViewer\n\n3. Upload items to the bucket. The `rsync` command is typically the fastest and\n easiest way to upload and update assets. You could also use `cp`.\n\n gcloud storage rsync ./static gs://\u003cvar\u003eyour-bucket-name\u003c/var\u003e/static --recursive\n\nYou can now access your static assets via\n`https://storage.googleapis.com/\u003cvar\u003eyour-bucket-name\u003c/var\u003e/static/...`.\n\nFor more details on how to use Cloud Storage to serve static assets,\nincluding how to serve from a custom domain name, refer to [How to Host a Static\nWebsite](/storage/docs/website-configuration).\n\n### Serving files from other Google Cloud services\n\nYou also have the option of using\n[Cloud CDN](/cdn/docs/overview) or other Google Cloud storage\nservices.\n\nServing files directly from your app\n------------------------------------\n\n\nTo serve static files in the standard environment,\nyou define the handlers in your `app.yaml` file using either the\n[`static_dir`](/appengine/docs/standard/reference/app-yaml#handlers_static_dir)\nor\n[`static_files`](/appengine/docs/standard/reference/app-yaml#handlers_static_files)\nelements.\n\nThe content in the static files or static directories are unaffected\nby the scaling settings in your `app.yaml` file. Requests to static files or\nstatic directories are handled by the App Engine infrastructure\ndirectly, and do not reach the language runtime of the application.\n\n### Configuring your static file handlers\n\nTo configure your app to serve the `./public` directory from the `/static` URL,\nyou define a handler in your `app.yaml` file.\n\nThe following demonstrates how to serve the static files of a sample\napp's `./public` directory. The template for this app's `index.html` page\ninstructs the browser to load the `main.css` file, for example: \n\n```carbon\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"/static/css/main.css\"\u003e\n```\n\nThe `./public` directory is defined in the `static_dir` element of the project's\n`app.yaml` file: \n\n```gdscript\nhandlers:\n - url: /favicon\\.ico\n static_files: favicon.ico\n upload: favicon\\.ico\n\n - url: /static\n static_dir: public\n\n - url: /.*\n secure: always\n redirect_http_response_code: 301\n script: auto\n```\n\nThe `handlers` section in the above example handles three URL patterns:\n\n- The **/favicon.ico** handler maps a request specifically for `/favicon.ico`\n to a file named `favicon.ico` in the app's root directory.\n\n- The **/static** handler maps requests for URLs that start with `/static`.\n When App Engine receives a request for a URL beginning with `/static`,\n it maps the remainder of the path to files in the `./public` directory. If an\n appropriate file is found in the directory, the contents of that file are\n returned to the client.\n\n- The **/.**\\* handler matches all other URLs and directs them to your app.\n\nURL path patterns are tested in the order they appear in `app.yaml`, therefore\nthe pattern for your static files should be defined before the `/.*` pattern.\nFor more information, see the [`app.yaml`\nreference](/appengine/docs/standard/reference/app-yaml#handlers).\n\n\nServing from a third-party content delivery network\n---------------------------------------------------\n\nYou can use any external third-party CDN to serve your static files and cache\ndynamic requests but your app might experience increased latency and cost.\n\nFor improved performance, you should use a third-party CDN that supports\n[CDN Interconnect](/network-connectivity/docs/cdn-interconnect)."]]
