Search code examples
reactjsgoogle-app-enginegoogle-cloud-platform

Deploying a React Build stored in a Cloud Storage bucket using Google App Engine returns a 404 error page

I have stored my react build in a cloud storage bucket.

enter image description here

App Engine Yaml config:

service: demo-react-app
runtime: python39

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html

  - url: /(.*)
    static_files: build/\1
    upload: build/(.*)

Deployment logs:

dineshsonachalam@macbook infra_v2 % gcloud app deploy app_engine.yaml --bucket=gs://dinesh_test_bucket_2023 --version=1-0-0 --quiet

Services to deploy:

descriptor:                  [/Users/dineshsonachalam/Desktop/react-app/app_engine.yaml]
source:                      [/Users/dineshsonachalam/Desktop/react-app]
target project:              [iac-v4]
target service:              [demo-react-app]
target version:              [1-0-0]
target url:                  [https://demo-react-app-dot-iac-v4.nw.r.appspot.com]
target service account:      [App Engine default service account]


Beginning deployment of service [demo-react-app]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 3 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [demo-react-app]...done.                                                                         
Setting traffic split for service [demo-react-app]...done.                                                        
Deployed service [demo-react-app] to [https://demo-react-app-dot-iac-v4.nw.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s demo-react-app

To view your application in the web browser run:
  $ gcloud app browse -s demo-react-app

After deployment my app engine returns 404 page not found error page.

enter image description here

Surprisingly if my react build is stored in my local directory instead of the cloud storage bucket, react app render is working properly.

Deployment logs:

dineshsonachalam@macbook infra_v2 % ls -lrt
total 16
-rw-r--r--   1 dineshsonachalam  staff  193  9 Apr 21:22 app_engine.yaml
-rw-r--r--   1 dineshsonachalam  staff  140  9 Apr 21:22 README.md
drwxr-xr-x@ 10 dineshsonachalam  staff  320  9 Apr 21:28 build
dineshsonachalam@macbook infra_v2 % gcloud app deploy app_engine.yaml --bucket=gs://dinesh_test_bucket_2023 --version=1-0-2

Services to deploy:

descriptor:                  [/Users/dineshsonachalam/Desktop/react-app/app_engine.yaml]
source:                      [/Users/dineshsonachalam/Desktop/react-app]
target project:              [iac-v4]
target service:              [demo-react-app]
target version:              [1-0-2]
target url:                  [https://demo-react-app-dot-iac-v4.nw.r.appspot.com]
target service account:      [App Engine default service account]


Do you want to continue (Y/n)?  y

Beginning deployment of service [demo-react-app]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 15 files to Google Cloud Storage               ═╣
╚════════════════════════════════════════════════════════════╝
                                                                            
File upload done.
Updating service [demo-react-app]...done.                                                                         
Setting traffic split for service [demo-react-app]...done.                                                        
Deployed service [demo-react-app] to [https://demo-react-app-dot-iac-v4.nw.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s demo-react-app

To view your application in the web browser run:
  $ gcloud app browse -s demo-react-app
dineshsonachalam@macbook infra_v2 %

enter image description here

Do you think any problem with app engine bucket option or app engine handlers?

Solution

  • The --bucket flag for gcloud app deploy is just for staging files for the build. It is not a way to identify storage for static files. Also, you can't use the App Engine static file handlers to point to a GCS bucket, only to files actually included in the deployment.

    Check out this documentation for different options on how to serve static files.