deploy to GCP

default discord avatar
Mark | Omniux
7 months ago
103

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

  • default discord avatar
    eloahsam
    7 months ago

    so i want the images to be publicly viewable as its a experience booking web platform

  • default discord avatar
    Mark | Omniux
    7 months ago

    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-js
  • default discord avatar
    eloahsam
    7 months ago

    thank 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 ?

  • default discord avatar
    Mark | Omniux
    7 months ago

    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 😄

  • default discord avatar
    eloahsam
    7 months ago

    wait what ?😂 so you suggest i should keep the minimum instance at 0 ?

  • default discord avatar
    Mark | Omniux
    7 months ago

    Yeah

  • default discord avatar
    eloahsam
    7 months ago

    in the frontend i using React cause my client brought me a template and asked i connect it to a backend cms

  • default discord avatar
    Mark | Omniux
    7 months ago

    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

  • default discord avatar
    eloahsam
    7 months ago

    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

  • default discord avatar
    Mark | Omniux
    7 months ago

    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 😄

  • default discord avatar
    eloahsam
    7 months ago

    yeah it sucks honestly



    atleast

  • default discord avatar
    Mark | Omniux
    7 months ago

    Free use, then they'll charge you per million requests

  • default discord avatar
    eloahsam
    7 months ago

    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

  • default discord avatar
    Mark | Omniux
    7 months ago

    Its definetly the best way to host on Google Cloud, much cheaper and more efficient than dedicated servers

  • default discord avatar
    eloahsam
    7 months ago

    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 ?

  • default discord avatar
    Mark | Omniux
    7 months ago

    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

  • default discord avatar
    eloahsam
    7 months ago

    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

  • default discord avatar
    Mark | Omniux
    7 months ago

    for your thumb nail, try this;



    adminThumbnail: ({ doc }: { doc: { sizes: { thumbnail: { url: string } } } }) => doc.sizes.thumbnail.url


    That 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
                },
            ]
        },
  • default discord avatar
    eloahsam
    7 months ago

    @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

  • default discord avatar
    Mark | Omniux
    7 months ago

    I did, but ive recently moved to vercel



    Are you specifying NEXT_PUBLIC with your env variables?

  • default discord avatar
    eloahsam
    7 months ago

    yup all env's start with NEXT_PUBLIC

  • default discord avatar
    Mark | Omniux
    7 months ago

    You haven't tried to install dotenv in the project have you?

  • default discord avatar
    eloahsam
    7 months ago

    yup ive tried and still it fails

  • default discord avatar
    meghabagri
    5 months ago

    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?

  • default discord avatar
    iamlinkus
    5 months ago

    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

  • default discord avatar
    Mark | Omniux
    5 months ago

    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
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.