Deploy Nuxt 3 app with forge

Level 58

Deploying a Nuxt 3 application using Laravel Forge involves several steps. Below is a step-by-step guide to help you deploy your Nuxt 3 app successfully.

Step 1: Set Up Your Server on Laravel Forge

Create a New Server: Log in to your Laravel Forge account and create a new server.
Provision the Server: Follow the prompts to provision the server. Make sure to select the appropriate server size and region.

Step 2: Configure Your Server

SSH into Your Server: Once the server is provisioned, SSH into your server using the credentials provided by Forge.
Install Node.js: Ensure that Node.js is installed on your server. You can install it using the following commands:
```
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
```
Install PM2: PM2 is a process manager for Node.js applications. Install it globally:
```
sudo npm install -g pm2
```

Step 3: Set Up Your Nuxt 3 Application

Clone Your Repository: Clone your Nuxt 3 project repository to the server.

git clone https://github.com/yourusername/your-nuxt3-app.git
cd your-nuxt3-app

Install Dependencies: Navigate to your project directory and install the dependencies.
```
npm install
```

Step 4: Configure Environment Variables

Create a .env File: Create a .env file in the root of your project directory and add your environment variables.
```
touch .env
nano .env
```
Add Environment Variables: Add the necessary environment variables for your Nuxt 3 application.

Step 5: Build and Start Your Application

Build the Application: Build your Nuxt 3 application for production.
```
npm run build
```
Start the Application with PM2: Start your application using PM2.
```
pm2 start npm --name "nuxt3-app" -- run start
```

Step 6: Configure Nginx

Edit Nginx Configuration: Edit the Nginx configuration file for your site. You can find this file in /etc/nginx/sites-available/your-site.
```
sudo nano /etc/nginx/sites-available/your-site
```

Update the Configuration: Update the configuration to proxy requests to your Nuxt 3 application. Here is an example configuration:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

Restart Nginx: Restart Nginx to apply the changes.
```
sudo systemctl restart nginx
```

Step 7: Set Up SSL (Optional but Recommended)

Install Certbot: Install Certbot to manage SSL certificates.
```
sudo apt-get install certbot python3-certbot-nginx
```
Obtain an SSL Certificate: Obtain an SSL certificate for your domain.
```
sudo certbot --nginx -d your-domain.com
```

Step 8: Verify Your Deployment

Check the Application: Open your browser and navigate to your domain to verify that your Nuxt 3 application is running correctly.

By following these steps, you should be able to deploy your Nuxt 3 application using Laravel Forge. If you encounter any issues, make sure to check the server logs and the Nuxt documentation for additional troubleshooting tips.

1 like