DEV Community

Cover image for How To Deploy Next.js ECommerce On Ubuntu
Bassir Jafarzadeh (Programming Teacher)
Bassir Jafarzadeh (Programming Teacher)

Posted on

How To Deploy Next.js ECommerce On Ubuntu

#nextjs #ubuntu #howto #react

hello and welcome to my coding tutorial to build and deploy my nextjs e-commerce website on Linux Ubuntu operating system using Hostinger VPS server.

In this tutorial we will learn how to:

  • buy and configure VPS server and website domain on ubuntu
  • clone my main amazona project from GitHub
  • connect to the hostinger Linux server
  • build and deploy automatically applications on every git push
  • and at the end I teach you how to encrypt the website using let's encrypt SSL certificate

Code and Demo

👉 https://nextjs-ecommerce.com/
👉 https://github.com/basir/next-pg-shadcn-ecommerce

Watch Video Tutorial

Buy VPS Server

Buy Domain

Deploy Application

I suppose the vps ip address is 5.182.18.65 and domain name is nextjs-ecommerce.com. you need to change them based on your vps ip address and domain name.

1- connect to vps server

   ssh root@5.182.18.65
Enter fullscreen mode Exit fullscreen mode

2- install node

   apt-get update
   curl -fsSL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh
   sudo -E bash nodesource_setup.sh
   sudo apt-get install -y nodejs
   node -v
Enter fullscreen mode Exit fullscreen mode

3- create git repo

    mkdir -p ~/apps/nextjs-ecommerce/repo
    mkdir -p ~/apps/nextjs-ecommerce/dest
    cd ~/apps/nextjs-ecommerce/repo
    git --bare init
Enter fullscreen mode Exit fullscreen mode

4- automate deployment on every git push

   nano hooks/post-receive
Enter fullscreen mode Exit fullscreen mode 
    #!/bin/bash -l
    echo 'post-receive: Triggered.'
    cd ~/apps/nextjs-ecommerce/dest/
    git --git-dir=/root/apps/nextjs-ecommerce/repo --work-tree=/root/apps/nextjs-ecommerce/dest/ checkout main -f
    pnpm install
    pnpm run build
    pm2 restart nextjs-ecommerce
Enter fullscreen mode Exit fullscreen mode

5- make post-receive executable

   chmod ug+x hooks/post-receive
Enter fullscreen mode Exit fullscreen mode

6- npm install -g pnpm
7- create postgres database

   cd ../dest
   nano .env
Enter fullscreen mode Exit fullscreen mode 
    NEXT_PUBLIC_SERVER_URL=http://nextjs-ecommerce.com
    NEXT_PUBLIC_APP_NAME=Next ECommerce App
    NEXT_PUBLIC_APP_DESCRIPTION=An ECommerce App built with Next.js, Postgres, Shadcn

    # Database (vercel or neon db url)
    POSTGRES_URL=your_postgres_url

    # NextAuth ($ npx auth secret)
    AUTH_SECRET=fFLDeFDO7rzsZ/TdxINaG2VUogiPEZX/LgTl2FAoReY=
    AUTH_TRUST_HOST=true

    # API Keys
    RESEND_API_KEY=123
Enter fullscreen mode Exit fullscreen mode

8- [On Dev Machine] clone repo

    git clone https://github.com/basir/next-pg-shadcn-ecommerce
    cd next-pg-shadcn-ecommerce
    git remote add hostinger ssh://root@5.182.18.65/root/apps/nextjs-ecommerce/repo/
Enter fullscreen mode Exit fullscreen mode

9- [On Dev Machine] add dummy changes, commit and push

   git add . && git commit -m "commit message" && git push hostinger
Enter fullscreen mode Exit fullscreen mode

10- config pm2

 sudo npm install -g pm2
 cd /root/apps/nextjs-ecommerce/dest/
 npx drizzle-kit push
 npx tsx ./db/seed
 sudo pm2 start "npm run start" --name "nextjs-ecommerce"
 pm2 save
 pm2 startup
Enter fullscreen mode Exit fullscreen mode

11- [On Dev Machine] add dummy changes, commit and push

```shell
git add . && git commit -m "commit message" && git push hostinger
```
Enter fullscreen mode Exit fullscreen mode

12- open http://5.182.18.65:3000
13- config apache

```shell
sudo apt install apache2
sudo a2enmod proxy proxy_http rewrire headers expires
sudo nano /etc/apache2/sites-available/nextjs-ecommerce.com.conf
```
Enter fullscreen mode Exit fullscreen mode 
```txt
<VirtualHost *:80>
     ServerName nextjs-ecommerce.com
     ServerAlias www.nextjs-ecommerce.com

     ProxyRequests Off
     ProxyPreserveHost On
     ProxyVia Full

     <Proxy *>
         Require all granted
     </Proxy>
     ProxyPass / http://127.0.0.1:3000/
     ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>
```
Enter fullscreen mode Exit fullscreen mode 
```shell
sudo a2dissite 000-default.conf
sudo a2ensite nextjs-ecommerce.com.conf
sudo service apache2 restart
```
Enter fullscreen mode Exit fullscreen mode

14- open http://nextjs-ecommerce.com
15- secure website

```shell
sudo apt install certbot python3-certbot-apache
sudo certbot -d nextjs-ecommerce.com -d www.nextjs-ecommerce.com -m basir.jafarzadeh@gmail.com --apache --agree-tos  --no-eff-email --redirect
sudo certbot renew --dry-run
```
Enter fullscreen mode Exit fullscreen mode

16- update http to https in .env file

```shell
cd /root/apps/nextjs-ecommerce/dest/
nano .env
```
Enter fullscreen mode Exit fullscreen mode 
```txt
NEXT_PUBLIC_SERVER_URL=https://nextjs-ecommerce.com
```
Enter fullscreen mode Exit fullscreen mode

17- open https://nextjs-ecommerce.com

Conclusion

In this tutorial we deploy an ecommerce app on ubuntu server. Let me if you have any questions.

Top comments (0)

Read next

ankitakanchan profile image

Mastering Axios: A Technical Guide to Building Your Food Delivery App🍔✨

Ankita Kanchan -

harshalranjhani profile image

Next.js Middleware: Simple Guide to Control Requests

Harshal Ranjhani -

gleidsonleite profile image

Exploring Microfrontends with Vite and React: A Step-by-Step Guide

Gleidson Leite da Silva -

pawan_bisht_3aa0838e302b2 profile image

REACT FORM TOASTER.

Pawan Bisht -