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)