deploy to GCP
The benefits of using a cloud storage container are numerous. You can share your bucket across multiple instances of your Cloud Run service, you can setup a load balancer and cache your images via a CDN for faster delivery, and you can easily view and manage your media directly from GCloud's Cloud Bucket Object Explorer
so i want the images to be publicly viewable as its a experience booking web platform
I would also highlight that you're now in a very grey zone in terms of how you wish to execute the use of your Cloud Storage solution. The two examples I mentioned will require a bit of research into how GCloud handles permissions, as well as potential issues surrounding CORS and proxying. You'll be best learning about how to best use the Google Cloud Plugin and then identifying a way to proxy your connection
They will be publically visible, but you'll need to either make the whole bucket public (which I don't recommend) or proxy the image URL
You could proxy with an afterRead hook. Request the resource using the cloud storage api url, then take the response in payload and attach it to a new request
https://stackoverflow.com/questions/20351637/how-to-create-a-simple-http-proxy-in-node-jsthank you and i noticed a small bug , maybe its due to cold starts but when i go to my payload url sometimes it shows "Cannot get /admin/" then i refresh then it works or sometimes i have to refresh my page twice
what is the usual cost of having atleast 1 instance running ?
There's a free limit up to about 1 million invocations. You wont need to run payload 100% of the time, so you don't require any minimum instances. You'll likely never pay for it
As long as your nextjs revalidation time is more than 1 second, you'll struggle to trigger 1 million payload requests a month š
wait what ?š so you suggest i should keep the minimum instance at 0 ?
Yeah
in the frontend i using React cause my client brought me a template and asked i connect it to a backend cms
If possible, see about adding Nextjs to it because it will work a lot better in the long run if they wish to make changes and new content
You don't have to. But it's a recommendation if you're already using React
With Nextjs, you won't need to run Payload 24/7 because Nextjs will statically regenerate content whenever the cache is invalidated after say 60 seconds. So in the background the page will be recompiled and then displayed without any delay for the user. It will bring down your costs and massively improve page loading times
yeah im a Nextjs fanatic but with this project it runs on so many legacy dependenciesš¢ it would take a huge amount of effort to convert it
Damn that sucks, in that case you'll have to run Payload 24/7 with 1 dedicated instance. But don't worry. It'll cost you about $3 a month
Looks like Google just upped it to 2 million requests per month, so you'll be fine š
yeah it sucks honestly
atleast
Free use, then they'll charge you per million requests
i doubt it's even reached 100k or 10k requests
man you made me fall inlove with cloud run im going to switch over my other 6 project over from app engine to cloud run
Its definetly the best way to host on Google Cloud, much cheaper and more efficient than dedicated servers
so ive only added this in plugins: [
cloudStorage({
collections: {
media: {
adapter: gcsAdapter({
options: {},
bucket: process.env.bucketUrl,
}),
},
},
}),
],
as soon as i upload i only asee a broken link
@Mark | Omniux am i suppose to append my storage bucket link to the filename ?
No the plugin will handle that for you, it will create a url where the file is held. I notice you are missing your service account details as well, you'll need to provide authentication
my service account details are in another location on my pc
and in cloud storage i gave "allUsers" "Storage Legacy Bucket Reader" permission but in the thumbnail and media collections it show broken image link
when i look for the image url via url it starts with
http://localhost:3000/media/rather than my bucket url
should i change anything in my media collection ? slug: "media",
access: {
read: () => true,
delete: isAdmin,
},
fields: [],
upload: {
staticURL: "/media",
imageSizes: [
{
name: "thumbnail",
width: 400,
height: 300,
position: "centre",
},
],
adminThumbnail: "thumbnail",
mimeTypes: ["image/*"],
},
I changed the āall usersā permission To cloud storage view from storage legacy viewer
for your thumb nail, try this;
adminThumbnail: ({ doc }: { doc: { sizes: { thumbnail: { url: string } } } }) => doc.sizes.thumbnail.urlThat is if you choose to use a thumbnail size. This is what I do for my collection;
upload: { formatOptions: { format: 'webp', options: { quality: 80, force: true, alphaQuality: 100, }, }, adminThumbnail: ({ doc }: { doc: { sizes: { thumbnail: { url: string } } } }) => doc.sizes.thumbnail.url, imageSizes: [ { formatOptions: { format: 'webp', options: { quality: 80, force: true, alphaQuality: 100, }, }, name: 'thumbnail', width: 175, height: 125 }, { formatOptions: { format: 'webp', options: { quality: 80, force: true, alphaQuality: 100, }, }, name: 'square', width: 600, height: 400 }, { formatOptions: { format: 'webp', options: { quality: 80, force: true, alphaQuality: 100, }, }, name: 'wide', width: 1280, height: 500 }, ] },@Mark | Omniux did you deploy your nextjs on cloud run ?
and does it have environmental variables ?, mine cant seem to read the env's even with a cloudbuild yaml and specifying in the cloudbuild UI and cloudrun ui and dockerfile
whats the difference between your payload dockerfile and nextjs dockerfile and if they have seperate cloudbuild files
I did, but ive recently moved to vercel
Are you specifying NEXT_PUBLIC with your env variables?
yup all env's start with NEXT_PUBLIC
You haven't tried to install dotenv in the project have you?
yup ive tried and still it fails
I'm trying to build my container image on gcloud using cloud run but I am getting 'missing secret error' even when I have included my .env file . Can someone please suggest a workaround?
you can add your env variables through cloud build if Iām not mistaken. In cloud build you can edit the version of the build and add the env vars.
When in cloud build there should be a button āedit versionā or something similar and thatās where you add/edit env vars. Usually you donāt include the .env file and donāt include the vars in the dockerfile for security reasons (it should never be pushed to git)
Itās in the ātriggersā
Sorry, correction, it's inside the cloud run service details:
Cloud run -> YOUR SERVICE -> Edit & deploy new revision -> Environment variables
Hey folks. i decided to write an article on this full process. you can check it out here -
https://www.omniux.io/blog/deploying-a-payload-cms-instance-with-docker-and-google-cloud-run
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.