Theo's Typesafe Cult•2y ago

How do you self host your projects in a vps

without relying on any cpanel or vercel, i have a vps and i usually move the project using git and run yarn build then yarn start i also sat up a systemd service that handles keeping that website running so my process of upgrading the site would be to ssh into it and then run yarn build but after some testing, i found out that while the build is running, i can't access the website, and or if the build fails the website breaks. i saw something in the vercel cli where it builds it then if the build is successful it outputs it into "out" folder then it runs it from there. is there a way to do that without involving needing vercel

24 Replies

Finn•2y ago

have ci that builds a docker image and pushes that to a docker repository ( docker hub / github docker repo or somthing ) then when you want to deploy you restart the docker image on your vps with the new version.

haitamOP•2y ago

i haven't pushed to a docker repo before, is it public?

pajaro•2y ago

doesn't have to be, pretty sure you have to pay for private ones on dockerhub but private ones are free on gitlab (not sure about github though)

Matvey•2y ago

Haven't tried this personally, but it looks promising - https://coolify.io/

Coolify

An open-source & self-hostable Heroku / Netlify alternative.

haitamOP•2y ago

or i can just upload the docerfile in github and build it in the server

Finn•2y ago

you could just put a docker file in your repo yeah and then clone on your server, but that is more manual

haitamOP•2y ago

i already have ssh/git setup soo yeah

Finn•2y ago

still not recomened lol but it works

barry•2y ago

@hhk Regarding the "run from a custom build folder", you can build a standalone folder which doesn't depend on a node modules folder or .next if that helps Basically just gives you a folder with all the stuff and a server.js or something like that you can just run with node

PotatisMannen•2y ago

This sounds promising. Depending your restart time of your main server you could have a max downtime of a couple secs if your cluster is fast enough

haitamOP•2y ago

.nextjs folder doesn't have a server.js

haitamOP•2y ago

barry•2y ago

Didn't say it did You have to tell nextjs to be in standalone mode

haitamOP•2y ago

a meeting came up. i will be active in few minutes

haitamOP•2y ago

do i need to copy just the standalone folder?

haitamOP•2y ago

thank you soo much for your help

haitamOP•2y ago

for anyone intrested i made these two scripts

# ./scripts/run-production.sh
source .env

node ./out/s1/server.js

# ./scripts/run-production.sh
source .env

node ./out/s1/server.js

# ./scripts/run-build.sh
set -e
git stash
git pull
pnpm i
yarn build

rm -rf out/s2
mkdir -p "out/s1"
cp -rf out/s1 out/s2
cp -rf .next/standalone/* out/s1/
cp -rf .next/standalone/.next out/s1/
cp -rf .next/static out/s1/.next

# ./scripts/run-build.sh
set -e
git stash
git pull
pnpm i
yarn build

rm -rf out/s2
mkdir -p "out/s1"
cp -rf out/s1 out/s2
cp -rf .next/standalone/* out/s1/
cp -rf .next/standalone/.next out/s1/
cp -rf .next/static out/s1/.next

NOTES: - add output: "standalone" in the next.config,js - make sure all your images are imported and not just in the public folder and being referenced if you are referencing them to get the background image working in a div you can actually import it and instead of padding it directly, it has a property called src, which is what you need. ex:

import bg from "../../../../public/images/bg.png";
// make sure paths are relative and doesn't use the fancy ts path like @/public.. etc
import bgLight from "../../../../public/images/bg-light.png";

export default function Hero() {
  const { theme } = useGlobal();
  return (
    <div
      className="hero min-h-screen"
      style={{
        backgroundImage:
          theme === "dark"
            ? `url(${bg.src})`
            : `url(${bgLight.src})`,
      }}
    />
}

import bg from "../../../../public/images/bg.png";
// make sure paths are relative and doesn't use the fancy ts path like @/public.. etc
import bgLight from "../../../../public/images/bg-light.png";

export default function Hero() {
  const { theme } = useGlobal();
  return (
    <div
      className="hero min-h-screen"
      style={{
        backgroundImage:
          theme === "dark"
            ? `url(${bg.src})`
            : `url(${bgLight.src})`,
      }}
    />
}

- make sure you ignore the out file. - if at any point your build fails and somehow lost s1 (in the out folder). you can copy what's on s2 into s1 s2 represents the last successful build.

pajaro•2y ago

re: script #1, pretty much you can just source .env wrt script 2, you can use set -e at the top to avoid having to use && on everything (the script will exit if something fails, if something can fail safely, you can use || true to prevent this) does the "renaming things into place" strategy work well?

Finn•2y ago

Huh til

pajaro•2y ago

do you like.. && all the things?

Finn•2y ago

nah the source on files like .env 😅

haitamOP•2y ago

interesting.. thanks for the tips

pajaro•2y ago

pretty sure* bash is mostly tips and tricks

haitamOP•2y ago

terminal on steroids

Gaming

Programming

How do you self host your projects in a vps