Theo's Typesafe Culthaitam

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

Finn•364d 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.

haitam•364d ago

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

pajaro•364d 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•364d ago

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

Coolify

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

haitam•364d ago

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

Finn•364d ago

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

haitam•364d ago

i already have ssh/git setup soo yeah

Finn•364d ago

still not recomened lol but it works

barry•364d 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•364d 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

haitam•364d ago

.nextjs folder doesn't have a server.js

haitam•364d ago

barry•364d ago

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

haitam•364d ago

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

haitam•364d ago

do i need to copy just the standalone folder?

haitam•364d ago

thank you soo much for your help

haitam•364d 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•364d 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•364d ago

Huh til

pajaro•364d ago

do you like.. && all the things?

Finn•361d ago

nah the source on files like .env 😅

haitam•360d ago

interesting.. thanks for the tips

pajaro•360d ago

pretty sure* bash is mostly tips and tricks

haitam•360d ago

terminal on steroids