I have stored my react build in a cloud storage bucket.
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.
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 %
Do you think any problem with app engine bucket option or app engine handlers?
2
Answers
The HTTP 404 error is mostly a directory/file structure issue which means the files your handlers are looking for are not there, or are not in the correct directory. In your build directory there has to be an index.html which must be in the app.yaml deployment’s root directory. So check the index.html file located in the correct directory.Refer this document1 & document2 for more information on file structure requirements.
You can also verify the files in the cloud storage bucket are accessible and try deploying your app to a different cloud storage bucket and see if the issue is not related with the bucket configuration.
You may also check this similar stackoverflow link for reference.
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.