Error Static file referenced by handler not found: dist/api/landing for Angular App deployed on Google Cloud - html

Question

please help, I do not have experience deploying, I have been trying for days, bear with me. Thanks.
I have been working on a angular app with flask backend and both work proper locally, I need to deploy them. The server is written in flask and it is accessible via Postman. The page renders properly from "https://apt-trainer-279210.uc.r.appspot.com/" but on API call an error 404 not found when calling "api/landing" to my server. Going to the logs on GAE I see error.
Static file referenced by handler not found: dist/api/landing
I am guessing that its looking for file in the above path but it should be calling my server instead. Below is my app.yaml file for angular:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /
static_dir: dist
skip_files:
- e2e/
- node_modules/
- src/
- coverage
- ^(.*/)?\..*$
- ^(.*/)?.*\.json$
- ^(.*/)?.*\.md$
- ^(.*/)?.*\.yaml$
- ^LICENSE
Also note that in the angular app I proxy to the server:
{
"/api": {
"target": "http://civil-planet-279210.uc.r.appspot.com" ,
"secure": true,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/api/*": ""
}
}
}
A Similar question was also posted but the user was using Cloud Endpoints while my server is in python flask. I could not use the solution.
Not sure if I should post the app.yaml for the python server as it is working properly.
Your assistance would be greatly appreaciated.

Answer 1

According to my understanding this is working as expected. According to the documentation about header element we may find in url part:
The URL pattern has some differences in behavior when used with the following elements:
static_dir
Uses a URL prefix. The regular express pattern should not
contain groupings when used with the static_dir element. All URLs that
begin with this prefix are handled by this handler, using the portion
of the URL after the prefix as part of the file path.
So calling .../api/landing will use the same logic: " using the portion of the URL after the prefix as part of the file path."
I am not sure what is your intention, but I think you should create the handler for the feature you want to invoke.
BTW you are using Python 2 which is not already not recommended and not supported. I would consider migration. You can see this at top of every page of documentation.

Answer 2

Was able to fix the issue with the following yaml - I was missing the third handler.
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /
static_dir: dist
- url: /.*
script: auto
secure: always
redirect_http_response_code: 301
skip_files:
- e2e/
- node_modules/
- src/
- coverage
- ^(.*/)?\..*$
- ^(.*/)?.*\.json$
- ^(.*/)?.*\.md$
- ^(.*/)?.*\.yaml$
- ^LICENSE