如何使用存储区存储在Google Flex / App引擎环境中提供静态文件？ [英] How can I use bucket storage to serve static files on google flex/app engine environment?

问题描述

我有一个nodejs后端和一个reactjs前端。我正在使用gcloud flex环境（应用程序引擎），并希望使用CDN提供所有前端文件。我不希望这些请求触及我的nodejs服务器。我无法配置我的项目app.yaml做同样的事情。

我怀疑我的请求没有从CDN提供服务，因为如果我在

 .resolve（ './前端/ DIST'）））; 
  

以下是YAML档案。

处理程序：
  -  url：/(.*\\.html）
 mime_type：text / html 
 static_files：frontend / dist / \ 
上传：frontend / dist /(.* \.html）
 
  -  url：/styles/(.*\.css）
 mime_type：text / css 
 static_files：frontend / dist / styles / \ 1 
上传：frontend / dist / styles /(.* \.css）
 
  -  url：/scripts/(.* \.js）
 mime_type：text / javascript 
 static_files：frontend / dist / scripts / \ $ $ b $ upload：frontend / dist / scripts /(.* \.js）
 
  -  url：/images/(.*\.(bmp|gif|ico|jpeg|jpg|png））
 static_files：frontend / dist / images / \ 1 
上传：frontend / dist / images /(.* \。（bmp | gif | ico | jpeg | jpg | png））
 
  -  url：/ 
 static_files：frontend / dist / index.html 
上传：frontend / dist / index.html 
 
  -  url：/.* 
 script：IGNORED 
 secure：始终
  

是th是一种配置应用程序引擎的方式，以便静态文件请求不会对我的nodejs后端服务器产生反应？

谢谢

解决方案

您正在混淆标准GAE env app.yaml 元素（静态内容配置）放入您的 flex env app app.yaml 。 p>

在柔性环境中为静态内容提供服务是不同的。 $ b

您的 express.static 基于静态文件的方法实际上对应于从您的应用程序中提供服务：

从您的应用程序on

大多数Web框架都支持静态文件。在这个
示例中，应用程序使用 express.static 中间件
将文件从 ./ public 目录提供给 / static URL。

要提供没有请求的静态内容，您需要按照从云存储服务：

从云存储存储桶中提供静态文件的示例

这个简单示例创建一个云存储存储桶并使用Cloud SDK上传静态
资产：

1. 创建一个存储桶。在您的项目ID之后命名您的存储桶很常见，但不是必需的。

     gsutil mb gs：//< your-bucket-name> 
     




2. 设置ACL以授予对存储区中项目的读取权限。 b
   $ b

     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用于
的更多信息，请动态上传，下载和操作您的
应用程序中的文件，请参阅使用云端存储。

I have a nodejs backend and a reactjs frontend. I am using the gcloud flex environment (app engine) and want to serve all the frontend files using a CDN. I would not want the requests to touch my nodejs server. I am unable to configure my projects app.yaml to do the same.

I suspect that my requests are not being served from a CDN because if I comment the below line in my nodejs code, I can no longer access index.html .

app.use('/', express.static(path.resolve('./frontend/dist')));

Below is the YAML file.

handlers:
- url: /(.*\.html)
  mime_type: text/html 
  static_files: frontend/dist/\1 
  upload: frontend/dist/(.*\.html)

- url: /styles/(.*\.css) 
  mime_type: text/css 
  static_files: frontend/dist/styles/\1 
  upload: frontend/dist/styles/(.*\.css)

- url: /scripts/(.*\.js) 
  mime_type: text/javascript 
  static_files: frontend/dist/scripts/\1 
  upload: frontend/dist/scripts/(.*\.js)

- url: /images/(.*\.(bmp|gif|ico|jpeg|jpg|png)) 
  static_files: frontend/dist/images/\1 
  upload: frontend/dist/images/(.*\.(bmp|gif|ico|jpeg|jpg|png))

- url: / 
  static_files: frontend/dist/index.html 
  upload: frontend/dist/index.html

-  url: /.* 
  script: IGNORED
  secure: always

Is there a way to configure app engine such that the static file requests don't react my nodejs backend servers?

Thanks

解决方案

You're mixing up standard GAE env app.yaml elements (the static content config) into your flex env app app.yaml.

Serving the static content is different in the flex environment.

Your express.static-based method for serving static files actually corresponds to Serving from your application:

Serving from your application

Most web frameworks include support for serving static files. In this sample, the application uses the express.static middleware to serve files from the ./public directory to the /static URL.

To serve static content without the requests hitting your app you need to follow the Serving from Cloud Storage:

Example of serving static files from a Cloud Storage bucket

This simple example creates a Cloud Storage bucket and uploads static assets using the Cloud SDK:

1. Create a bucket. It's common, but not required, to name your bucket after your project ID. The bucket name must be globally unique.

   gsutil mb gs://<your-bucket-name>
   

2. Set the ACL to grant read access to items in the bucket.

   gsutil defacl set public-read gs://<your-bucket-name>
   

3. Upload items to the bucket. The rsync command is typically the fastest and easiest way to upload and update assets. You could also use cp.

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

You can now access your static assets via https://storage.googleapis.com/<your-bucket-name>/static/....

For more details on how to use Cloud Storage to serve static assets, including how to serve from a custom domain name, refer to How to Host a Static Website.

For more information on how to use the Cloud Storage API to dynamically upload, download, and manipulate files from within your application, see Using Cloud Storage.

这篇关于如何使用存储区存储在Google Flex / App引擎环境中提供静态文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！