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 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 busy migrating a app into the GAE. I used to utilize timthumb.php to resize images on demand from within a static img folder. From the same folder I used to serve static images aswel.
eg: example.com/img/image_name.jpg
example.com/img/timbthumb.php?src=example.com/img/image_name.jpg&w=50&h=50
etc.
I am not using timbthump.php anymore, I have re-written it to serve images via CloudStorageTools.php api, and I do not want to go through all code to rewrite the image paths.
Now, on my local environment the google app engine is serving both versions of images, static and dynamic via timbthumb.php.
On the live environment GAE only serves static or dynamic, I cannot build URL handlers to serve both.
The timbthumb.php images are throwing a 404 error with both handlers.
My app.yaml
application: my-app
version: 1
runtime: php55
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /css
static_dir: dir/css
#timbthumb.php images
- url: /img/(.+\.php)$
script: dir/img/timbthumb.php
#static images
- url: /img
static_dir: dir/img
#all other php files
- url: /.*
script: dir/index.php
My Question, how can I make GAE route static images via example.com/img/ and the timthumb.php script located at example.com/img/timbthumb.php in my app.yaml?
Thanks
According to the documentation you can't serve a script from a static directory:
A static directory handler makes it easy to serve the entire contents
of a directory as static files. Each file is served using the MIME
type that corresponds with its filename extension unless overridden by
the directory's mime_type setting. All of the files in the given
directory are uploaded as static files, and none of them can be run
as scripts.
The fact that it appears to be running in the development server is just another reflection of the fact that the development server is just an approximation of GAE, but not really GAE.
If your image paths naming allows it you could use static_files routing rules instead of a static_dir one:
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 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 working on a Google App Engine project.
My app is working and looking correct locally, but when I try to upload images in an image directory, they're not being displayed at appspot.
As a little troubleshoot, I put a HTML page in "/images/page2.html" and I can load that page at the appspot, but my pages don't display my images. So, it's not a problem with my path.
As another sanity check, I'm also uploading a style sheet directory with .css code in it, and that's being read properly.
I have a suspicion that the problem lies in my app.yaml file.
Any ideas?
I don't want to paste all the code here, but here are some of the key lines. The first two work fine. The third does not work:
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />
Page 2
<img src="/images/img.gif">
This is my app.yaml file
application: myApp
version: 1
runtime: python
api_version: 1
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
- url: /.*
script: helloworld.py
You have to configure app.yaml for static content such as images and css files
Example:
url: /(.*\.(gif|png|jpg))
static_files: static/\1
upload: static/(.*\.(gif|png|jpg))
For more info check out:
http://code.google.com/appengine/docs/configuringanapp.html
I'll bet your problem is that you're using Windows.
If that's the case, I believe you need a preceding slash for your static_dir value.
I am using the Java version of App engine, and I faced a similar issues with the server not able to serve static images.
What worked ultimately was to change the AppEngine config file "appengine-web.xml" in my case to contain
<static-files>
<include path="**.*"/>
<include path="/images/**.*" />
</static-files>
My images are in the /images directory and HTML and CSS are in . directory which is at the WEB-INF level
#jamtoday The preceding slash didn't make a difference, but it did get me started figuring out what each app needs to be told what about my directory structure.
So, I have nothing very conclusive to add, but I wanted to follow up, because I got it working, but I didn't explore all the issues after I got it working.
One change that helped was to stop working from a HwlloWorld/src/ directory and start working in the HelloWorld/ directory. It seems like the dev_appserver picked up all the dependencies, but the remote server didn't. Essentially, the relative path of my local links didn't match the relative path of the links after uploading.
I also realized that the dev-appserver relies on the .yaml file, as well as the appcfg script. That is. . .if you add a directory to your project, and then try to link to files in that directory, you need to add the directory to the .yaml file, and then restart the dev-appserver to pick up on this.
So, there are probably ways to handle what I was originally trying to do if you give the .yaml file the right info, but changing to a different directory structure locally handled it for me.
<img src="/images/img.gif">
this line can't show you the image.
Try this one:
1-Create a class to handle "image request"
class GetImage(webapp.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'image/jpg'
self.response.out.write(image_object)
2-In your page.html:
<img src="/image"
3-At the main function in your code.py:
application = webapp.WSGIApplication(('/image', GetImage), debug=True)
have fun