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

mrsupercraft profile image

Interactive Code Editor Tutorial: Managing Dynamic Content with react-codemirror

MrSuperCraft -

tomasdevs profile image

⚡ React Pure Loading: Lightweight CSS Loaders for React

Tomas Stveracek -

preethi_sri_e4b0ecd15ee19 profile image

🚀 In-App Surveys in React Native with Formbricks: The Ultimate Guide ❤️‍🔥

preethi sri -

ajmal_hasan profile image

Promises in JavaScript and React Native: Creation, Usage, and Common Scenarios

Ajmal Hasan -