This content originally appeared on DEV Community and was authored by Bassir Jafarzadeh (Programming Teacher)
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
- open https://www.hostinger.com/
- select VPS KVM 2
- apply coupon code: CODINGWITHBASIR
- make payment
Buy Domain
- login to https://hpanel.hostinger.com/
- buy a domain
- add A, AA record for vps ip address
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
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
3- create git repo
mkdir -p ~/apps/nextjs-ecommerce/repo
mkdir -p ~/apps/nextjs-ecommerce/dest
cd ~/apps/nextjs-ecommerce/repo
git --bare init
4- automate deployment on every git push
nano hooks/post-receive
#!/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
5- make post-receive executable
chmod ug+x hooks/post-receive
6- npm install -g pnpm
7- create postgres database
- create database at https://vercel.com/docs/storage/vercel-postgres
- copy POSTGRES_URL
cd ../dest
nano .env
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
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/
9- [On Dev Machine] add dummy changes, commit and push
git add . && git commit -m "commit message" && git push hostinger
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
11- [On Dev Machine] add dummy changes, commit and push
```shell
git add . && git commit -m "commit message" && git push hostinger
```
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
```
```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>
```
```shell
sudo a2dissite 000-default.conf
sudo a2ensite nextjs-ecommerce.com.conf
sudo service apache2 restart
```
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
```
16- update http to https in .env file
```shell
cd /root/apps/nextjs-ecommerce/dest/
nano .env
```
```txt
NEXT_PUBLIC_SERVER_URL=https://nextjs-ecommerce.com
```
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.
This content originally appeared on DEV Community and was authored by Bassir Jafarzadeh (Programming Teacher)
Bassir Jafarzadeh (Programming Teacher) | Sciencx (2024-08-07T04:57:20+00:00) How To Deploy Next.js ECommerce On Ubuntu. Retrieved from https://www.scien.cx/2024/08/07/how-to-deploy-next-js-ecommerce-on-ubuntu/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.