Sunmoon

Ultimate Self-Hosting Guide for NextJS + Supabase (2024)

Welcome back to the channel! In this guide, we’re diving deep into self-hosting a Next.js and Supabase setup using Coolify on a VPS. By the end of this, you’ll have your app running on a VPS, saving you costs, and giving you full control over your hosting. Let's get started!

Why Self-Host?

After using services like Vercel and Supabase, I decided to switch to self-hosting on my own VPS. Self-hosting can significantly reduce costs and offers greater flexibility. In this post, I’ll walk you through everything from setting up Coolify, deploying Next.js, and setting up Supabase.

What is Coolify?

Coolify is a CI/CD pipeline tool for deploying apps, managing servers, and much more. It allows you to host not only Next.js and Supabase but also other types of applications on your VPS. This guide will focus on Next.js and Supabase.

Setting Up Coolify

  1. Install Coolify: First, log into your VPS and install Coolify. Run the following command to get started: 
    curl -sL <coolify-installation-url> | bash
  2. Access Coolify Dashboard: Once installed, copy your VPS’s public IP and access the dashboard via port 8000. You’ll be prompted to create an account.
  3. Create a Project: In the dashboard, create a new project, which we’ll call MyBookQuest. You can add multiple environments here, like production and development. We’ll proceed with just production in this guide.

Deploying Next.js

  1. Add a New Resource: In your project, click “Add Resource” and connect your GitHub repository for Next.js.
  2. Set Up the Build: Choose your branch (like main) and set the build settings. I recommend using npx for building. You can also set the internal port, typically 3000 for Next.js apps.
  3. Configure Build and Environment Variables: Add your environment variables (e.g., NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY) directly in Coolify.
  4. Deploy: Click “Deploy” to start the build. If you encounter issues with build tools like Bun, switch to npm install, npm run build, and npm start.

Setting Up Supabase

  1. Add Supabase Resource: Add a new resource in Coolify, search for “Supabase,” and choose the service.
  2. Configure Supabase: For each container in Supabase (such as Minio and Postgres), adjust any settings as needed. If you’re getting CPU architecture errors with Minio, replace it with a v1 compatible version.
  3. Access Supabase Dashboard: Once Supabase is running, access the dashboard and configure your database and tables as needed.

Configuring DNS with Cloudflare

  1. Set A Records: In Cloudflare, set up an A record pointing to your VPS’s IP for both the root domain (e.g., mybookquest.com) and any subdomains (e.g., supabase.mybookquest.com for Supabase).
  2. HTTPS and Domains: Enable HTTPS in Coolify settings and point the subdomains correctly in your Supabase and Next.js configurations.

Additional Tips and Troubleshooting

  • Add Swap Space: If you’re running low on memory, add a swap file to your VPS: 
    sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
  • Configure Authentication: To set up Google OAuth in a self-hosted Supabase, add environment variables for OAuth and SMTP email settings.
  • Database Access: To connect to your Postgres database externally, expose the necessary port in your Docker Compose file and ensure your firewall settings are configured.

Conclusion

With this setup, you’re ready to self-host Next.js and Supabase, managing both through Coolify on your VPS. I hope this guide has helped you take the first steps toward a more cost-effective, flexible hosting solution for your projects.

Please subscribe to the channel if you found this guide useful, and let me know in the comments what projects you’re planning to host on Coolify!

Note: Some errors may appear depending on your VPS’s CPU architecture, Docker version, or missing configurations. Always refer to the official documentation for updated commands and troubleshooting steps.

Video Tutorial: Watch the full guide here

On this page