如何使用bucket存储服务谷歌flex/app engine环境中的静态文件?

时间:2022-10-12 23:15:57

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.

我有一个nodejs后端和一个堆js前端。我正在使用gcloud flex环境(app engine),并希望使用CDN服务所有前端文件。我不希望请求触及nodejs服务器。我无法配置我的projects app.yaml来做同样的事情。

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 .

我怀疑我的请求没有来自CDN,因为如果我在nodejs代码中注释下面的行,我将无法访问索引。html。

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

Below is the YAML file.

下面是YAML文件。

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?

有没有一种方法可以配置app engine,使静态文件请求不会对nodejs后端服务器作出响应?

Thanks

谢谢

1 个解决方案

#1


2  

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

您正在将标准的GAE env app.yaml元素(静态内容配置)混合到您的flex env应用程序app.yaml中。

Serving the static content is different in the flex environment.

在flex环境中服务静态内容是不同的。

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.

大多数web框架都支持提供静态文件。在这个示例中,应用程序使用express。静态中间件,用于将文件从./public目录服务到/静态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:

这个简单的示例创建一个云存储桶并使用云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.

    创建一个桶。按项目ID命名bucket是很常见的,但不是必须的。bucket名必须是全局唯一的。

    gsutil mb gs://<your-bucket-name>
    
  2. Set the ACL to grant read access to items in the bucket.

    设置ACL,授予对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.

    上传项目到桶。rsync命令通常是上传和更新资产的最快、最简单的方式。你也可以使用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/....

你现在可以访问静态资产通过https://storage.googleapis.com/ < your-bucket-name > /静态/ ....

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.

有关如何使用云存储API从应用程序中动态上传、下载和操作文件的更多信息,请参见使用云存储。

#1


2  

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

您正在将标准的GAE env app.yaml元素(静态内容配置)混合到您的flex env应用程序app.yaml中。

Serving the static content is different in the flex environment.

在flex环境中服务静态内容是不同的。

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.

大多数web框架都支持提供静态文件。在这个示例中,应用程序使用express。静态中间件,用于将文件从./public目录服务到/静态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:

这个简单的示例创建一个云存储桶并使用云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.

    创建一个桶。按项目ID命名bucket是很常见的,但不是必须的。bucket名必须是全局唯一的。

    gsutil mb gs://<your-bucket-name>
    
  2. Set the ACL to grant read access to items in the bucket.

    设置ACL,授予对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.

    上传项目到桶。rsync命令通常是上传和更新资产的最快、最简单的方式。你也可以使用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/....

你现在可以访问静态资产通过https://storage.googleapis.com/ < your-bucket-name > /静态/ ....

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.

有关如何使用云存储API从应用程序中动态上传、下载和操作文件的更多信息,请参见使用云存储。