Mastering Next.js Deployment on EC2: Direct vs Apache Setup 🚀

After deploying my Anime Vault project, I wanted to share my experience using two different approaches. While I initially went with the direct EC2 deployment, I later upgraded to Apache for better security. Let me break down both methods and share what I learned!

Direct EC2 Deployment (The Quick Way) 🔨

This is pretty straightforward. After launching your EC2:

1. Install Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts

2. Clone and start your app

git clone your-repo
cd your-project
npm install
npm run build
npm start

3. Access Your App

Open port 3000 in EC2 security group and boom! Access via http://your-ec2-ip:3000

Apache Setup (The Pro Way) 🛡️

This took me some time to figure out but it's worth it! Here's my step-by-step guide:

1. Install Apache

sudo apt update
sudo apt install apache2 -y

2. Install Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts

3. Install PM2

npm install -g pm2

What's PM2? It's like a guardian angel for your Node.js app - keeps it running and restarts it if it crashes!

4. Deploy your Next.js app

cd /var/www/html
git clone your-repo
cd your-project
npm install
npm run build

5. Configure Apache as Reverse Proxy

Create a new configuration file:

sudo nano /etc/apache2/sites-available/nextjs.conf

Add this configuration:

<VirtualHost *:80>
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Configuration breakdown:

• ProxyPreserveHost On: Keeps the original hostname from the request
• ProxyPass: Forwards incoming requests to our Next.js app
• ProxyPassReverse: Handles the response headers properly
• Error and Custom logs: Helps us debug when things go wrong

6. Enable Apache Modules

sudo a2enmod proxy
sudo a2enmod proxy_http

7. Configure Sites

sudo a2dissite 000-default.conf
sudo a2ensite nextjs.conf

8. Start with PM2 (Process Manager 2)

pm2 start npm --name "nextjs" -- start
pm2 startup
pm2 save

9. Restart Apache

sudo systemctl restart apache2

Note : Dont forget to add the the http port 80 or https 443 (which one you using) in EC2 security group

Now you can access your site via http://your-ec2-ip - no port number needed! 🎉

Why Apache Setup is Better 🤔

I learned this the hard way, but here's why Apache setup is superior:

1. Security: Apache acts as a shield for your Node.js app. It's like having a bouncer at your club!
2. Professional URLs: No more :3000 in your URL. Looks much cleaner!
3. Process Management: PM2 keeps your app running 24/7. If it crashes, PM2 brings it back up automatically.
4. Better Logging: Apache provides detailed logs which are super helpful for debugging.

Common Issues I Faced 🔧

Default Apache Page Shows Up

If you see the default Apache page, check if:

• Your Next.js app is running (pm2 list)
• Apache modules are enabled
• Configuration is correct and enabled

Connection Refused

Usually means your Next.js app isn't running. Check with:

pm2 list
curl http://localhost:3000

website not enable

By default the EC2 ip address will open in https but i enable the http port 80 in my security group if the website not working use http otherwise add the https port 443 in security group

Conclusion 🌟

While the direct EC2 setup is great for quick testing, I highly recommend the Apache approach for any serious deployment. Yes, it's a bit more work initially, but the benefits in terms of security and reliability are totally worth it!

Found this helpful? Feel free to share and reach out if you have questions! Happy deploying! 🚀