So, you’ve built a fantastic Nuxt.js application and now you’re ready to take it live? That’s great! Deploying a Nuxt.js app might seem complex at first, but with the right approach, it becomes a straightforward process. Whether you’re deploying on a VPS, shared hosting, or cloud services like AWS or DigitalOcean, this guide will walk you through the necessary steps to get your Nuxt.js project up and running on a server.
Understanding Nuxt.js Deployment
Before diving into the deployment steps, it’s important to know that Nuxt.js can be deployed in multiple ways:
- Static Site Generation (SSG) – Ideal for fast, SEO-friendly websites.
- Server-Side Rendering (SSR) – Best for dynamic applications needing backend rendering.
- Single Page Application (SPA) – Great for client-side rendering but not SEO-friendly.
For this guide, we’ll focus on deploying a Nuxt.js SSR app on a server.
Step 1: Prepare Your Nuxt.js App for Deployment
Before deploying, ensure your application is production-ready by running:
npm run build
or
yarn build
This command compiles your Nuxt app into an optimized production build.
Step 2: Choose a Hosting Server
Nuxt.js applications require a Node.js environment. Some popular options for hosting include:
- VPS (e.g., DigitalOcean, Linode, Vultr)
- Cloud Services (AWS, Google Cloud, Azure)
- Dedicated Nuxt.js Hosting (Vercel, Netlify for static sites)
For this guide, we’ll deploy on a VPS with Ubuntu and Nginx.
Step 3: Set Up Your Server
Install Node.js and npm
First, connect to your server via SSH:
ssh user@your-server-ip
Then, update packages and install Node.js:
sudo apt update && sudo apt upgrade -y
sudo apt install nodejs npm -y
Verify the installation:
node -v
npm -v
Step 4: Upload Your Nuxt.js Project
Use Git or FTP to transfer your Nuxt project to the server. If using Git, clone your repository:
git clone https://github.com/your-repo/your-project.git
cd your-project
Install dependencies:
npm install
Step 5: Start the Nuxt.js Application
Run the following command to start the Nuxt app in production mode:
npm run start
or
yarn start
Your app should now be running, but it’s only accessible via your server’s IP and port. Let’s configure Nginx for a domain setup.
Step 6: Configure Nginx as a Reverse Proxy
Install Nginx
sudo apt install nginx -y
Configure Nginx
Create a new configuration file:
sudo nano /etc/nginx/sites-available/nuxt
Add the following configuration:
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Save and exit, then enable the configuration:
sudo ln -s /etc/nginx/sites-available/nuxt /etc/nginx/sites-enabled/
sudo systemctl restart nginx
Step 7: Use PM2 to Keep the Nuxt App Running
To ensure your Nuxt app keeps running in the background, install PM2:
npm install -g pm2
Run the application using PM2:
pm2 start npm --name "nuxt-app" -- run start
pm2 save
pm2 startup
This will keep your app running even after a server reboot.
Step 8: Secure Your Site with SSL
To enable HTTPS, install Certbot and get an SSL certificate:
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
Follow the prompts, and Certbot will automatically configure SSL for you.
Deploying a Nuxt.js application might seem daunting at first, but with the right setup, it becomes a seamless process. By using a VPS, configuring Nginx, and setting up PM2, you ensure your Nuxt app runs efficiently and remains secure.
For professional web development and deployment solutions, CodeHunder offers expert guidance and support tailored to your needs.
