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)
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 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
I have deployed my react app to GCP's App engine. It successfully deploys and the landing page is accessible. However none of the routes work. All the routes are giving '404' error.
I am pretty sure its the app.yaml configuration that has issue. Help please!
app.yaml
runtime: nodejs10
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
The issue is that you are using both static_files and static_dir to your / url.
You need to either use static_files or static_dir.
From the description of your question it looks like you want to use static_dir to match everything that is inside the directory after the url: /.
As stated in the documentation:
static_dir: The path to the directory containing the static files, from the application root directory. Everything after the end of the matched url pattern is appended to static_dir to form the full path to the requested file.
static_files: A static file pattern handler associates a URL pattern with paths to static files uploaded with the application. The URL pattern regular expression can define regular expression groupings to be used in the construction of the file path. You can use this instead of static_dir to map to specific files in a directory structure without mapping the entire directory.
I am fairly new to Google App Engine. When I keep files in images folder and run bat file, it uploads images properly but when I remove those images and put new images to upload, it removes previous images.
My app.yaml looks like this
application: testcdn
version: 1
runtime: python27
api_version: 1
threadsafe: true
default_expiration: "1d 1h"
handlers:
- url: /css
static_dir: css
- url: /images
static_dir: images
- url: /js
static_dir: js
- url: /.*
static_files: index.html
upload: index.html
Also when 2 developers try to upload images to the same cdn store with different google accounts, it removes images previously uploaded by other developer.
Please suggest.
Your local files mirror your deployed files. If you remove files locally, then deploy, the remote files will be deleted. You are not just defining the files to upload, but the files to mirror remotely.
I am not sure about your 2nd comment. Do the files have the same filenames? You will have to provide the upload code for diagnosis.
How do I set index.html for the default root web page?
application: dfischerdna version: 1
runtime: python api_version: 1
handlers:
- url: /
static_dir: static_files
This works great when the visitor types
http://dfischerdna.appspot.com/index.html
However I would like that when he types this, the index.html web page would be displayed.
http://dfischerdna.appspot.com/ -> goes to 404 page
This might do the trick for you:
handlers:
- url: /
static_files: path/to/index.html
upload: local/path/to/index.html
- url: /(.+)
static_files: path/to/\1
upload: local/path/to/(.+)
The first url section will match the root URL and serve path/to/index.html. The second will match any path other than the root path, and will serve the file located under path/to that the request URI matches. For the URL http://yourapp.appspot.com/index.html it will serve path/to/index.html, and for a URL like http://yourapp.appspot.com/foo/bar.html it will serve path/to/foo/bar.html.
The upload directive tells GAE which local files to upload to serve as static files in your app instance.