Static website 404 error page for Google App Engine

Question

I have a completely static website that'd I've deployed to Google App Engine, but I cannot get it to return my custom 404 page, just the generic one like this.

<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>404 Not Found</title>
</head>
<body text=#000000 bgcolor=#ffffff>
<h1>Error: Not Found</h1>
<h2>The requested URL <code>/foo</code> was not found on this server.</h2>
<h2></h2>
</body></html>

I've tried all the solutions I can find but still cannot get it to work. I tried adding require_matching_file: true as recommended in this answer but to no avail. I've also tried to "Edit website configuration" under the bucket storage options.

This is my app.yaml file.

runtime: php55
api_version: 1
threadsafe: true

# Handle the main page by serving the index page.
handlers:
- url: /$
  static_files: build/index.html
  upload: build/index.html

# Handle folder urls by serving the index.html page inside.
- url: /(.*)/$
  static_files: build/\1/index.html
  upload: build/.*/index.html

# Handle nearly every other file by just serving it.
- url: /(.+)
  static_files: build/\1
  upload: build/(.*)

# all other pages are a 404
- url: /.*
  static_files: build/404.html
  upload: build/404.html

# This doesn't work either
error_handlers:
- file: build/404.html

This is my website's directory structure.

build
│
│   index.html 
│   404.html   
│
└───blog
│   │   index.html 
│   │
│   └───post-1
│       │   index.html 
│       post-2
│       │   index.html 
│       | ...
│
└───data
│   │   blog-posts.json
│   │   projects.json
│
└───img
│   │   image-1.jpg 
│   │   image-2.jpg 
│   | ...
│ 
└───projects
│   │   index.html 
│   │
│   └───project-1
│       │   index.html 
│       project-2
│       │   index.html 
│       | ...
│ 
└───static
│   │
│   └───css
│       │   styles.css
│       js
│       │   scripts.js
│

Ultimately I'd like to use a PHP 404 page to send the proper 404 header, but right now I'd settle for a plain HTML page.

hi... can you please provide your applications directory structure — Paddy Popeye, Jun 18 '19 at 07:47
You don't seem to actually have a `build` directory in your app dir structure. Where is your `404.html` file located in your app dir? (other header rules also mention `build`) — Dan Cornilescu, Jun 19 '19 at 02:53
@DanCornilescu sorry for the confusion. Everything is inside the `build` folder. The `404.html` file is directly inside the `build` folder. — Dan0, Jun 19 '19 at 06:07
ok try moving your 404 file into your static directory... and following the instructions contained here https://cloud.google.com/appengine/docs/standard/php/getting-started/serving-static-files and also have a look at this https://cloud.google.com/appengine/docs/standard/php/config/appref#example — Paddy Popeye, Jun 19 '19 at 07:08

score 2 · Answer 1 · answered Jun 23 '19 at 02:43

This the app.yaml file that worked for me.

runtime: php55
api_version: 1
threadsafe: true

# Handle the main page by serving the index page.
handlers:
- url: /
  static_files: build/index.html
  upload: build/index.html

# Handle folder urls by serving the index.html page inside
- url: /(.*)/$
  static_files: build/\1/index.html
  upload: build/.*/index.html

# Handle other file types by just serving them
- url: /(.*\.(css|js|json|gif|eot|png|jpg|jpeg|ico|svg|xml|woff|woff2))$
  static_files: build/\1
  upload: build/.*\.(css|js|json|gif|eot|png|jpg|jpeg|ico|svg|xml|woff|woff2)$

# all other pages are a 404
- url: /.*
  script: build/404.php

The structure is the same as posted in the question, I just changed 404.html to 404.php.

Static website 404 error page for Google App Engine

1 Answers1