Django on Google app engine cannot serve media files - google-app-engine

I deployed a Django web app on Google app engine flex env, and I could upload files to this app, but the MEDIA_URL and MEDIA_ROOT are not set to Google cloud storage for now, so uploaded files should be stored on local disk.
The problem is, when I open the app website, some uploaded images cannot load successfully, with error saying
GET https://app-name.ew.r.appspot.com/media/images/icon_TPUrf8a.jpg 404
and strangely, even the same image could some time load and then sometime cannot load, very random.
Could anyone please tell why it sometimes ok and sometime not, and what's the best way to fix it?

You have to tell the app where to look for your static files. This is best done in app.yaml:
handlers:
- url: /static
static_dir: static/
- url: .*
script: auto

Related

Next.js images return 500 error in production

I am deploying a Next.js app on GAE and none of the images in the public folder get served, they all return 500 with the following error after reviewing logs
EROFS: read-only file system, unlink '/workspace/.next/cache/images/zUb0XWtfOUy8jJS-olwIcsJpEse7wovGYRmT3B79mCc=/0.1641776976898.S-2U16B+8WquUZAAJsKsf1k9FpDiuBJX2T6gFU5eXy4=.svg
Here is how my app.yaml file looks like:
---
handlers:
- url: /.*
secure: always
script: auto
manual_scaling:
instances: 1
runtime: nodejs16
I run next build to get a production build, however none of the images load. Please help
It looks like GAE (Google App Engine) does not allow for writing, you can read them but its probably trying to perform some transcoding in the request, e.g: convert to svg
One potential way maybe to host the images in an external URL or use a host like imgix or cloudinary
https://nextjs.org/docs/api-reference/next/image#domains

Deploying an App with Code Splitting on GCP App Engine - Loading chunk * failed

We have a web application (frontend) using React created from Create React App. The app is running on Google Cloud Platform App Engine Standard. Our web application is code splitted. Each page is then loaded on user navigation.
It's working really well. The issue we have is for example user A is on the app home page. We deploy a fix that change the chunk file name. The user A then try to access another page and then got the error Loading chunk * failed. The url to get the file is now returning a 404 because the file has been replaced by some new chunk files.
It's a frequent problem as I can see during my research but I didn't find a solution that apply for Google App Engine.
Here's an article that explain the problem / solution: https://mitchgavan.com/code-splitting-react-safely/
I would like to use the solution "Solution 1: Keep old files on your server after a deployment" but I can't see how to do this using GCP ...
Here's the app.yaml file
service: frontend
runtime: nodejs14
env: standard
instance_class: F1
handlers:
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
- url: /.*
static_files: build/index.html
upload: build/index.html
We have the following dispatch file (* for masked url)
dispatch:
- url: "*"
service: frontend
- url: "www.*"
service: frontend
Haven't tried this before but see if it makes sense/works.
We have a blog article about downloading your source code from GAE. It contains an explanation of where your source is stored when you deploy (a staging bucket), how long it stays there and how you can modify how long it stays before Google automatically deletes it.
When you deploy to GAE, gcloud only deploys files that have changed (it doesn't deploy those that haven't). Since you now have 'new' files because new hashes were generated, the older files no longer exist on your local machine. I do not know if Google will automatically delete those files from the staging location in bullet 1 above.
My proposal here is that you follow the steps in the blog article (from bullet 1) and alter (change) how long the files are retained in your staging bucket. Another option is to check the retention policy tab and see if you can change the rule so the files don't get deleted. If you're able to alter how long the files remain or the retention policy, it just might solve your problem. Let me know if this works

php script for upload image not working for app engine

I have a folder called "test-my-app1" that includes my app for the google's app engine. This folder has a folder inside called img that stores all of my images for the CSS of my app, and also has a folder named profile. In the folder called profile ( test-my-app1/img/profile/ ) the user can upload a photo for his profile picture.
The php script that I use works successfully for the XAMPP that I have in my laptop. The problem is that when I run the script in app engine, image is not uploaded into my folder "profile". This is my app yaml file:
application: test-my-app1
version: 1
runtime: php
api_version: 1
handlers:
- url: /img
static_dir: img
- url: /profile/(.*\.(gif|png|jpg))
static_files: profile/\1
upload: profile/(.*\.(gif|png|jpg))
any idea how to fix it? there is a possible answer here : App Engine PHP upload file for my question but did not solved my problem
You need to upload files to Google Cloud Storage, the instructions on how to do this are here.
Once the files have been uploaded to Google Cloud Storage you can serve them in HTTP responses, follow the instructions here on using the Image serving service that allows for on the fly resizing, cropping and rotation.
You need to consider the filesystem where your application files are uploaded to as read only.

Google Apps Engine app.yaml file not correct? "This webpage has a redirect loop"

I'm getting an error "This webpage has a redirect loop" when loading my Google Apps Engine url: http://my-application-id.appspot.com (my real application ID in the url of course)
Google Apps Engine requires an app.yaml file in the root of the application directory to work correctly. Here are the contents of my file....
application: my-application-id
version: 1
runtime: php
api_version: 1
handlers:
- url: /.*
script: install.php
Is my app.yaml file setup correctly? The install.php file for my application works much the same way as a wordpress install.php file. You access it from a web browser and go through the basic setup. If my app.yaml file is correct, why am I still getting the "This webpage has a redirect loop" error displayed in my browser?
Also tried other browsers, clearing cookies, etc. The application installation screen loads perfectly in my SDK but not live on Google Apps Engine. What am I doing wrong?
I figured it out. There were 2 problems.
On app.yaml, in my case, the last line needed to say "index.php" instead of "install.php" Second, in my case, my configuration.ini file had port "80" set for MYSQL when in fact it needed to be "3306"

How to deploy images on Google App Engine?

How can I deploy images to Google App Engine?
My image is in the directory /css/images/error1.png
But on appspot.com: "The requested URL /css/images/error1.png was not found on this server."
What is wrong?
The upload-log: http://pastebin.com/VAK5hYPC
Have you mapped the directory as a static directory in your app.yaml file?
Try this and type in the url path in your browser to see if the image is found (Might even be a typo somewere)
- url: /css
static_dir: static/css/images

Resources