I am using Google App Engine to host and serve my website, but I am encountering one issue when browsing on my website, I can retrieve all the source code I wrote in the dev tools:
Here are the two commands I am using when building and deploying :
"build:prod": "env-cmd -f .env.production react-scripts build",
"deploy:client-production": "copy app_to_add_in_build.yaml build/app_to_add_in_build.yaml && cd build/ && move app_to_add_in_build.yaml app.yaml && gcloud app deploy --project myProjectId",
I am copying & renaming my app.yaml to the build folder then running the deploy from there.
Here is the content of my app.yaml file:
runtime: nodejs12
handlers:
- url: '/service-worker.js'
secure: always
static_files: service-worker.js
upload: service-worker.js
mime_type: application/javascript
- url: /(precache-manifest.*)$
secure: always
mime_type: application/javascript
static_files: \1
upload: ./(precache-manifest.*)$
- url: /(.*\.js)$
secure: always
static_files: \1
upload: .*\.js$
mime_type: application/javascript
- url: /(.*\.(css|map|png|jpg|svg|ico|json|txt|woff))$
secure: always
static_files: \1
upload: .*\.(css|map|png|jpg|svg|ico|json|txt|woff)$
- url: '/(.*)'
secure: always
static_files: index.html
upload: index.html
Plus here is the content of the build folder
As we can see, there are no source files inside.
Once this is deployed, I browse the files in Google cloud debugger:
There are no source files inside.
I cleared my cache and cookies, reset my browser data, and tried with several browsers, I still have access to all Javascript/JSX sources. When serving the website, I see that it is using a React production build, but I am sure it's using the javascript files inside instead, as components are mounted twice (https://medium.com/#andreasheissenberger/react-components-render-twice-any-way-to-fix-this-91cf23961625).
I don't know where the issue comes from as nothing is cached anymore, neither on GCP, neither on my computer...
Do you have any clues if I did something wrong? Or any fixes?
Thank you in advance
After searching around and how the source code could be available, I try to serve it to myself and the code was still present.
After some other research I found that it's an intended feature or react scripts:
create-react-app is showing all my code in production, how to hide it?
Is there ever going to be a situation where you want these sources files to be deployed / available on the remote server? You could just opt to not even deploy them, by adding them to your .gcloudignore. In the example below, all files ending in jsx would not get uploaded
*jsx
https://cloud.google.com/sdk/gcloud/reference/topic/gcloudignore
Related
I followed this tutorial: https://cloud.google.com/storage/docs/hosting-static-website to host my React webapp. Here is what I have so far:
// app.yaml
runtime: nodejs10
handlers:
- url: /static
static_dir: build/static
- url: /(.*\.(json|ico|js))$
static_files: build/\1
upload: build/.*\.(json|ico|js)$
- url: /.*
static_files: build/index.html
upload: build/index.html
(I've tried MANY configurations here)
I run npm run build and put the build directory in GCP Cloud Storage along with app.yaml. When I go to my website I get this:
This happens when I hit the root url.
It looks like it is looking at the static directory which should then look at build/static according to my app.yaml.
If I go directly to the webpage such as https://www.drinkingbuddy.io/build/static/js/main.39aaab31.js, the browser displays the file as expected. So it is there being hosted but something is messed up with pathing? I'm not sure.
Testing locally, everything works. Even when serving the build files.
Any guidance would be greatly appreciated! Thank you.
EDIT:
Another thing is that when I go to the base url, it just shows the document tree.
EDIT 2:
When accessing the files directly from the bucket such as https://www.storage.googleapis.com/drinkingbuddy-static/build/index.html, I then get this error:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>UserProjectAccountProblem</Code>
<Message>User project billing account not in good standing.</Message>
<Details>The billing account for the owning project is disabled in state absent</Details>
</Error>
But looking through my account I don't see any billing issues.
EDIT 3:
Now I am able to get to .../build/index.html and it displays my site. but the root / is still throwing errors saying it can't find main.js. I added homepage: "." to my package.json.
I was able to get it to work by doing homepage:"/build". Now I can access the root url and get expected behavior.
I deployed my web on Google Cloud Platform App Engine several times. Using the setting as follows:
app.yaml
runtime: nodejs10
Everything just worked fine when I tested it on the localhost.
But when I deployed it to Google Cloud Platform. The response header always is showing last-modified: Tue, 01 Jan 1980 00:00:01 GMT.
I have checked by [my-web].df.r.appspot.com to make sure that the problem is coming from Google Cloud Platform.
Does anyone have an idea?
Updated 2020-10-07
For anyone facing the same issue, please feel free to join the discussion here.
Apparently, this is behaviour by design as all timestamps are made zero on deploy by app-engine. see: https://issuetracker.google.com/issues/168399701
I was sending the static files myself using express. So I solved it by not setting the etag and last-modified headers. For example:
app.use("/", express.static(root, { etag: false, lastModified: false }));
Or for individual files:
app.get("/*", async (req, res) => {
return res.sendFile("index.html", { root, lastModified: false, etag: false });
});
I had the same problem of old index.html being served. The problem was with the etag that was generated. Even though the files changed, the etag remained the same.
This caused the file to be served from browser's cache with status code 304. The culprit was my app.yaml file, which was
runtime: nodejs10
Changing it to below fixed the issue.
env: standard
runtime: nodejs10
default_expiration: '14d'
handlers:
- url: /static
static_dir: build/static
secure: always
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
secure: always
- url: .*
static_files: build/index.html
upload: build/index.html
expiration: '5s'
secure: always
This seems to be a cache caused issue. To ensure that the new index.html is deployed, you would need to run “gcloud beta app deploy --no-cache”, additional fields may need to be added such as app.yaml as mentioned here. This would ensure that the new index.html associated with your version is pushed into the container.
We are experiencing the same issue that previous version of index.html are getting picked up by clients after redeploying an appengine standard app. This problem seemed to start mid-August. We initially found that adding a line to the client HTML file like: seemed to solve the problem. But this is no longer working.
I'm deploying a React app to Google App Engine. Currently I need to append .html or /index.html to the requests but I would like to avoid this so I have clean routes.
For example, I can load mywebsite.com/docs/page1.html and mywebsite.com/docs/page1/index.html but I want to load mywebsite.com/docs/page1. The react app actually builds both of these duplicate pages so it appears this is somewhat default behaviour. The routing is only "broken" like this when I build, it works fine in the dev server.
Directory structure
- build/my_docs/
- css/
- img/
- js/
- docs/
- page1.html
- page1/
- index.html
app.yaml
runtime: python3
service: docs
handlers:
- url: /
secure: always
redirect_http_response_code: 301
static_files: build/my_docs/index.html
upload: build/my_docs/index.html
- url: /css/(.*)
static_files: build/my_docs/css/\1
upload: build/my_docs/css/(.*)
- url: /img/(.*)
static_files: build/my_docs/img/\1
upload: build/my_docs/img/(.*)
- url: /js/(.*)
static_files: build/my_docs/s/\1
upload: build/my_docs/js/(.*)
- url: /(.*\.(json|ico|xml))$
static_files: build/my_docs/\1
upload: build/my_docs/.*\.(json|ico|xml)$
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*).html
# Trying to append .html to non css/img/js requests but it doesn't work!
I also tried to deploy the sample Docusaurus project to GAE with no app.yaml handlers, and I see the same undesired routing (need to append .html).
Are you satisfied with serving these html files as static docs, or should they be templates which you can pass content to?
First, in your / handler, there is no such file build/my_docs/index.html
Your /docs/(.*) handler appears to be fine. You say it works in dev but not in build? That sounds like a routing problem inside React. Check your React routing. Also, make sure you're resetting your browser cache frequently, as you may be caching old React code.
** EDIT **
Let's look at this handler:
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*).html
If you request at the url /docs/page1, it is going to try to load the static file from the directory build/my_docs/docs/page1. So far, so good, as that directory exists.
The problem comes in the next line. You are asking to serve the static file build/my_docs/docs/page1.html, which does not exist in the directory specified. Try one of these:
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*)/index.html
or:
- url: /docs/(.*)
static_files: build/my_docs/docs
upload: build/my_docs/docs/(.*).html
I other words, there is a mismatch between the static_files directory you specify and the location of the file you're trying to serve.
I am trying to host my site on Google APP Engine. I have configured my app.yaml file and deployed the website. All the files deployed correctly including the css and js files. What I am facing trouble with are the image files. I am getting a 404 resource not found error in my console for the images that my static web page is using. I am not sure what the problem is. Here is the structure of my site
index.html
view(folder)
-images
-abc.png
-xyz.png
-js
-css
Here is the code in app.yaml
- url: /(.*\.png)
mime_type: image/png
static_files: template/\1
upload: template/(.*\.png)
Wanted to know if the app.yaml is configured correctly to go through the images folder and then upload my image files.
You are pointing to the template directory in app.yaml, but you images are actually in a directory tree branched as view/images. Try this:
- url: /(.*\.png)
mime_type: image/png
static_files: view/images/\1
upload: view/images/(.*\.png)
I'm just getting started with my first app engine site. I followed the hello world sample to get my home page up and running. I added a css file and declared a static handler for it in my app.yaml. Here is the full content:
application: myapp
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /css/.*/(.*)
mime_type: text/css
static_files: css/\1
upload: css/(.*)
expiration: "30d"
- url: /.*
script: myapp.app
When I use the Audit feature of the Chrome developer tools, it warns that my CSS file is explicitly non-cacheable. I tried increasing the expiration time, but that didn't help.
Is there anything else I need to do to enable caching for static files? I haven't messed around with any settings in the site dashboard, so it should be using the default settings.
When I run this same test on the SDK against localhost, I get the same warning that none of my CSS is cached and that it's set to be explicitly non-cachable.
When I deploy the app and run the test from .appspot.com, I only get a warning for the jquery CDN link, and all of my CSS files are cached.
Hope this helps.
EDIT: Looks like the files are marked as proxy-cacheable, but I'm still seeing them as non-browser cacheable.