The current folder structure is like this:

root
  -.github/workflows
  -frontend
  -backend

The back end uses NodeJS-NestJS/Express and serve static files from a React front end. The front end must be served by back end because some specific cookies are provided along with the static asset. For example, user must reach example.com/ to see the website, and the API is like example.com/someapi. Deploying the front end to example1234.com and make API call to example.com/someapi will not work due to missing important cookies.

App engine is used to store the back end, with Identity Aware Proxy enabled. Currently, I'm aware of 2 options:

1. Using dispatch.yaml, I believe this will not work as front end and back end are on 2 different instances, so different domains (e.g., example1234.com and example.com).
2. Using Cloud Storage Bucket, this will work but static asset must be publicly available. This is not allowed because an application is for internal use only. IAM is necessary, that said, an application itself also has a separate authentication layer.

Any suggestion or correction on my thought is appreciated!

Update - Solution Based on the accepted answer, here is how I solved this.

1. Build React, and copy its build folder to a folder inside back end.

2. In nest-cli.json, include the static React build in NestJS build

   "compilerOptions": {
   "assets": [
       "resources/build"
   ]}
   

3. Dynamically load static serve path during compile time.

All of this is done in a CI/CD pipeline.

CodePudding user response：

If you must go through the backend to serve static files, serve them directly from the backend (and remove the value of static files that are served without any check).

IAP is a solution to prevent the access to static files but if it's not enough, you haven't other solution than my previous remarks (at least with serverless product, I'm sure you can do more customizable things with Nginx in a container or a VM)