Installing Payload on a VPS for production : Deployment documentation feels unclear

default discord avatar
aliqqae
4 weeks ago
75

Hello,



I am trying to use Payload in a production server and instructions are unclear. I am simply trying to run the CMS.



# Building


Reading the documentation about the steps to accomplish it:



In order for Payload to run, it requires both the server code and the built admin panel. These will be the dist and build directories by default. If you've used create-payload-app to create your project, executing the build npm script will build both and output these directories.

Where?


- On my local machine and commit it? The

dist

and

build

folders are

.gitignore

'd


- Directly on prod server? Then fine it builds.



# How do I use Payload now?


## After the build


I guess that now, I should ask Nginx to serve a folder. Which one?

build

?

dist

?


How can use nginx now? Should I rewrite URLs? serve them as is?



## Should I run

npm run serve

?


I tried this too, on a server with Let's Encrypt and a MongoDB Atlas. But then is an SSL error:



ERROR (payload): Error: cannot connect to MongoDB. Details: C047A3D8F17F0000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1586:SSL alert number 80


I googled about it. It feels unwise to change Certbot's permissions. Running

npm run dev

feels unwise too.



---



There are DigitalOcean's tutorials and I am aware of them, I used them but they just tell to how install needed software to use Payload. But afterwards, I don't see explicit explanation on how to link stuff together.



Also I'd like to add that about deploying to a VPS does not always mean to a DigitalOcean droplet, and have a section directly mentionning DO won't tell people that's it's about doing it on a VPS

  • default discord avatar
    .janxy
    4 weeks ago

    Have you whitelisted the ip inside mongo atlas?



    also, I think docker is prefered for production, it is pretty easy.

  • default discord avatar
    derosul
    4 weeks ago

    Hi!



    Can't quite answer your question about the MongoDB / LetsEncrypt issue you're having but I can try to answer your question on the build part :).



    Building payload consumes quite a lot of memory and might crash your server when it runs out of memory. And yes! I don't think you'd want to commit your dist folder to your repoistory. What I would recommend to do is: Use a Github action to build Payload and finally deploy your

    dist

    code to your server and run it.



    Yes, depending on your familiarity with Docker, it's probably the best way to deploy your Payload server šŸ™‚

  • default discord avatar
    .janxy
    4 weeks ago

    You can use Render.com which handles docker, gitops and other stuff for you

  • default discord avatar
    aliqqae
    4 weeks ago

    I wasn't aware we should do that actually. it's written nowhere šŸ˜­

  • default discord avatar
    derosul
    4 weeks ago

    Ah yes! that might make it really easy if you want to Render.com ofcourse šŸ™‚

  • default discord avatar
    .janxy
    4 weeks ago

    It is expensive though, but I use it for development



    so free tier is enough for me

  • default discord avatar
    aliqqae
    4 weeks ago

    So far I pulled the repo into the prod server because it's the way i know



    But again, is it about a VPS server or deployment in Vercel and stuff ?



    I can migrate to Docker overtime, but even there, it could lack explanation on how to proceed :


    https://payloadcms.com/docs/production/deployment#docker-compose
  • default discord avatar
    derosul
    4 weeks ago

    Yeah, I agree. The docs assume you already know your way around Docker. So it's like "Here is a Dockerfile, goodluck!"

  • default discord avatar
    aliqqae
    4 weeks ago

    yes



    I can only think ;



    :AMThumbsUp:
  • default discord avatar
    derosul
    4 weeks ago

    What I wrote was about deploying it on a VPS yeah, deploying it on Vercel would also be possible, but comes with pretty slow cold boot responses. If you need help with the Github action and/or setting it up with Docker, I can provide an example / try to explain how if you want? šŸ™‚

  • default discord avatar
    aliqqae
    4 weeks ago

    it's about Github Actions and and deploy it on a VPS



    it could be an article on Payload's blog

  • default discord avatar
    derosul
    4 weeks ago

    Well, according to the Payload team, the easiest way (and probably is) to host Payload, is through Payload cloud :p



    But that'd cost you 35$ a month

  • default discord avatar
    aliqqae
    4 weeks ago

    It costs money and i can't afford that :p

  • default discord avatar
    derosul
    4 weeks ago

    Yeah, for small size projects and/or just getting started, 35$ is quite the money

  • default discord avatar
    .janxy
    4 weeks ago

    There is almost no difference between deploying payload and any other expressjs app with mongodb database.

  • default discord avatar
    derosul
    4 weeks ago

    True, but you can't expect users to know how to do something like that right? :p

  • default discord avatar
    aliqqae
    4 weeks ago

    I can deploy PHP Apps, not that much when it comes to nodejs

  • default discord avatar
    derosul
    4 weeks ago

    Oh, and perhaps something to try @aliqqae fly.io. Pretty easy to setup for Payload as well!



    Pretty much comes down to running a couple of commands.



    flyctl launch

    -> follow the setup


    flyctl secrets import < .env

    -> Imports your .env variables to your fly.io instance


    flyctl deploy


    When it comes to pricing, I have 2 servers with 512mb ram running there, for 0$ a month šŸ˜†

  • default discord avatar
    aliqqae
    4 weeks ago

    i thought about it too



    but the idea is to stay on my registrar's servers

  • default discord avatar
    derosul
    4 weeks ago

    They sort you out with Docker and all that



    If you have a Dockerfile in the root of your project, it recognizes that and uses it

  • default discord avatar
    aliqqae
    4 weeks ago

    oh yes

  • default discord avatar
    derosul
    4 weeks ago

    Meaning Digitalocean? Or just some other VPS?

  • default discord avatar
    aliqqae
    4 weeks ago

    some other VPS



    an OpenStack VPS

  • default discord avatar
    derosul
    4 weeks ago

    Alright, in that case it's a bit more work

  • default discord avatar
    aliqqae
    4 weeks ago

    I found that I should use PM2 to run dist/server.js



    and daemonize it

  • default discord avatar
    derosul
    4 weeks ago

    Yeah, pm2 is a pretty neat tool to do that!

  • default discord avatar
    .janxy
    4 weeks ago

    can't you just use docker?



    You already have docker compose file. Shouldn't

    docker-compose up -d

    do the trick?

  • default discord avatar
    derosul
    4 weeks ago

    The default docker-compose.yml is for development, runs Payload in dev mode.

  • default discord avatar
    .janxy
    4 weeks ago

    ah it is yeah

  • default discord avatar
    aliqqae
    4 weeks ago

    I can. But I don't wan't to yet, because it has to be PROD ready



    HOWEVER



    I only have a nginx issue

  • default discord avatar
    derosul
    4 weeks ago

    If you insist on using Docker, you can pretty easily setup a github action where it builds the container and publishes it on your Repository it's container registry šŸ™‚



    From there you can pull the container on your VPS and run it.



    Or even beter, extend the github action pipeline and make it do that for you šŸ˜›

    Screenshot_2023-11-05_at_01.49.18.png
  • default discord avatar
    aliqqae
    4 weeks ago

    that's for later



    :noted:


    now the problem is :


    502 bad gateway



    on nginx

  • default discord avatar
    derosul
    4 weeks ago

    How are you setting up nginx for Payload?

  • default discord avatar
    aliqqae
    4 weeks ago
    location / {
        proxy_pass https://127.0.0.1:3333/admin;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


    so far

  • default discord avatar
    derosul
    4 weeks ago

    Payload serves your ssl certificate?



    since you're using

    https://127.0.0.1:3333
  • default discord avatar
    aliqqae
    4 weeks ago

    no ?



    I mean



    I use let's encrypt



    Payload is just there, in its lil' folder

  • default discord avatar
    derosul
    4 weeks ago

    How have you setup lets encrypt?

  • default discord avatar
    .janxy
    4 weeks ago

    Do you need nginx?

  • default discord avatar
    aliqqae
    4 weeks ago

    I'd rather have nginx yes



    because I want other apps on that server

  • default discord avatar
    derosul
    4 weeks ago

    The 502 bad gateway you have that already works with ssl and all enabled? @aliqqae

  • default discord avatar
    aliqqae
    4 weeks ago

    yes



    the website is https



    it's a subdomain of mine

  • default discord avatar
    derosul
    4 weeks ago

    Nice!

  • default discord avatar
    aliqqae
    4 weeks ago

    on a vps of mine

  • default discord avatar
    derosul
    4 weeks ago

    But, I think you shouldn't proxy pass using https://

  • default discord avatar
    aliqqae
    4 weeks ago

    i may be wrong in some config that does not make a bug



    you're right, i removed it

  • default discord avatar
    derosul
    4 weeks ago

    Still a 502?

  • default discord avatar
    aliqqae
    4 weeks ago

    still a 502



    probs not an nginx problem actually

  • default discord avatar
    derosul
    4 weeks ago

    Why's that?



    Payload not running?

  • default discord avatar
    aliqqae
    4 weeks ago

    PM2 says Payload is running



    when I curl

    localhost:3333

    it says "Connection refused"



    knowing that I updated Payload's port



    good news: no more 502



    bad news: white page



    good news: no more white page


    bad news: perpetual loading



    I am tired and frustrated. I will try the Vercel way with building in GH Actions



    and while it's up that way, I'll build a prod ready docker-compose



    that issue is blocking my website new version to prod and then, a refactor to React

    image.png
  • default discord avatar
    tyteen4a03
    4 weeks ago

    If you are using a single VPS, you might want to use something like Dokku or coolLabs so that you're not managing your own nginx + LE

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    Most of the things listed in the post are really

    devops

    concerns. None of the things listed in the second section are specific to Payload. They are applicable to deploying any ole node.js app.



    It would be a huge ask for us to document every possible way to deploy Payload (just a node app) on any platform. We've called out things specific to Payload in the docs while also pointing to other resources to deploying node apps.



    Open for discussion how we can improve within reason here.

  • default discord avatar
    paulpopus
    3 weeks ago

    I agree totally with this sentiment, but at the same time having step by step guides on deploying to various popular platforms is only gonna help with adoption



    I do believe these kinds of guides have aided other open source projects like strapi in many ways including SEO (as people search how to deploy X on Y)



    But I do agree its fundamentally not unique to payload...the same way DB management and backup/restore isnt, still super useful to have guidance on it

  • default discord avatar
    aliqqae
    3 weeks ago

    It's more about "what do to with built Payload" and how to use it on a VPS instance, removing the specifications about Digital Ocean



    It's been more than a week for me to figure out what do do with the project



    it also seems to be possible to push it on a Vercel instance, but it's so unclear on how to proceed knowing be have to build it first to avoind the cold boot

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    Agreed here that additional resources are always helpful. I believe we linked the DO deployment guides because that was what we were using at the time and the guides were helpful.



    Open to writing our own, especially because half the questions appear to be how to deploy an app in general.

  • default discord avatar
    aliqqae
    3 weeks ago

    DO guides are helpful to have a VPS started, because well it's to run Payload on a VPS after all



    Also yes, this



    But after that, we still tend to don't know what to do with Payload itself



    It is solved, I have payload on, serving



    @denolfe @jacobsfletch I think I am starting to grasp what is going on with explanations in documentations and guides about how to use Payload. For instance, I am starting a NextJS project, and I'll use Payload with it. A whole new project. There will also be Storybook.


    Previously I saw this blog article, which I kept in favourites:


    https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload

    But now that I need it, I notice that you are writing a nice story and what there is around in Next and Payload, but again, it rose questions:



    - "

    Do I need to do something in particular to integrate Payload IN Next? Launch the "create" inside or outside?

    "


    - "

    Is there a specific command to run?

    "


    - "

    Is package.json shared between Payload and Next or they each have their own?

    "


    - "

    Where should be Payload?

    "



    As a refresher for context :


    .
    ā”œā”€ā”€ assets # Mine, shall be moved
    ā”‚   ā””ā”€ā”€ images
    ā”œā”€ā”€ next.config.js
    ā”œā”€ā”€ next-env.d.ts
    ā”œā”€ā”€ node_modules
    ā”‚   ā””ā”€ // ...
    ā”œā”€ā”€ package.json
    ā”œā”€ā”€ package-lock.json
    ā”œā”€ā”€ public
    ā”‚   ā”œā”€ā”€ next.svg
    ā”‚   ā””ā”€ā”€ vercel.svg
    ā”œā”€ā”€ README.md
    ā”œā”€ā”€ src
    ā”‚   ā”œā”€ā”€ app
    ā”‚   ā””ā”€ā”€ stories
    ā””ā”€ā”€ tsconfig.json


    Like, where would stand Payload in Next's project?



    And as I mentioned, i will use Storybook to learn to use it and this kind of guide is just what I needed. Storybook team wrote that and it's all clear:


    https://storybook.js.org/recipes/next/

    Sometimes, Junior devs and newcomers wouldn't need anything more than that

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    @aliqqae You can look at how this is done in our templates. Here is the website template that configures payload and next:

    https://github.com/payloadcms/payload/tree/main/templates/website
  • default discord avatar
    aliqqae
    3 weeks ago

    Yes



    But do you know that it is not easy to comprehend for some ? :/

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    Your question is how to structure your code?

  • default discord avatar
    aliqqae
    3 weeks ago

    it's also how to install it, and which commands to run



    and where



    just what Storybook did



    https://storybook.js.org/recipes/next/

    This

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    The template shows how this can be done, you just want a walkthrough from scratch?

  • default discord avatar
    aliqqae
    3 weeks ago

    Yes, a simple guide



    that does not make people dive into the code



    it's not easy to comprehend for everyone

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    I hear you I suppose on walkthroughs.



    Unfortunately, being a developer-first tool, there is some expectation for exploration and drive to implement different tools together. The template with it already done for you feels like a good middle ground, people just need to be curious and poke around the code.

  • default discord avatar
    aliqqae
    3 weeks ago
    "Unfortunately, being a developer-first tool, there is some expectation for exploration and drive to implement different tools together. The template with it already done for you feels like a good middle ground, people just need to be curious and poke around the code."

    yes but also no



    having to poke around just to have a product able to run ASAP is not always what would help adopting Payload



    We know the Front-End and Back-End can be separated and how to do so



    but in an "The Ultimate Guide To Using Next.js with Payload > Combined serverless", we would expect a little walkthrought



    Some commands



    Now having to poke around and read code



    Code is not documentation



    That makes the required entry level to Payload frankly steep in contrast to use it, which is actually a breeze



    And can make its adoption so much slower



    Also, that makes me think of an old mentor that also think that way. We never clicked together and is now seen as elitist

  • discord user avatar
    denolfe
    Payload Team
    3 weeks ago

    In a perfect world, we'd have a guide and walkthrough for everything - not viable currently. Thank you for all of this feedback. I will bring it to the team šŸ‘

  • default discord avatar
    aliqqae
    3 weeks ago

    šŸ‘šŸ¼



    Just being explicit on how to install it in a way that won't make issues later on into a front-end, and a mode extensive explanation with what to do with

    build/

    and

    dist/

    is a good start

  • discord user avatar
    jacobsfletch
    Payload Team
    3 weeks ago

    I completely agree RE guides



    We have docs, templates, our blog, and videos, but no real text-based "guides"

  • default discord avatar
    aliqqae
    3 weeks ago
    :AMLoveSlap:
  • default discord avatar
    paulpopus
    3 weeks ago

    Somewhat related to this, im gonna experiment into turning video guides into blog post tutorials with AI

  • discord user avatar
    jacobsfletch
    Payload Team
    3 weeks ago

    I have low expectations of AI generated docs and guides, tbh



    Just feels like a human should be on the other end, who can do a better job

  • default discord avatar
    paulpopus
    3 weeks ago

    same BUT if you base it off the transcript from youtube, i thought it might have enough info?

  • discord user avatar
    jacobsfletch
    Payload Team
    3 weeks ago

    yea in theory

  • default discord avatar
    paulpopus
    3 weeks ago

    otherwise yes, the AI is idiot



    you spend more time fixing the prompt than you wouldve writing it yourself

  • discord user avatar
    jacobsfletch
    Payload Team
    3 weeks ago

    I'm not opposed to it but quality is way more important than anything

  • default discord avatar
    aliqqae
    3 weeks ago

    Yeah well, I can contribute in this, even translate that in French if needed

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.