Question

How can I deploy multiple nuxt apps on different server blocks on same droplet

Posted on November 7, 2023
Initial Server Setup Deployment
Asked by Kinemon

I am trying to setup a website which has;

A Laravel API backend
Nuxt frontend app
Nuxt portal app

I have successfully deployed the Laravel backend and Nuxt portal app. My issue is setting up the Nuxt frontend app. I have tried following multiple tutorials on how to set a custom port for a second Nuxt app but none has worked for me.

My config is as follows :

/var/www/frontend/.env

NITRO_PORT = "8000"

/var/www/frontend/ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'Frontend',
      port: '8000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

/etc/nginx/sites-available/frontend

server{
listen 80;
listen [::]:80;
server_name frontend.mydomain.co.ke
root /var/www/frontend;
index index.php index.html index.htm;
location / {
        proxy_pass http://localhost:8000;
        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;
    }
}

The portal app has similar config to the frontend just uses port 3000 in the above config.

I use “pm2 start” to run the nuxt apps after building then. I also linked to sites-enabled and restarted nginx.

When I try to load the frontend on my browser I get the default nginx page.

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• November 9, 2023

Hi there,

To deploy multiple Nuxt.js applications on different server blocks within the same Droplet, you need to ensure that each app listens on a different port and that Nginx is configured correctly to reverse proxy to those ports.

From your configuration, it seems that you have set up a .env file and an ecosystem config for PM2 for your front-end Nuxt app to run on port 8000.

Your Nginx configuration also seems to be proxying requests to localhost:8000. However, you are still getting the default Nginx page, which implies that the Nginx server block configuration for your Nuxt frontend app might not be linked properly in the sites-enabled directory, or there’s a conflict with another Nginx configuration.

Here are the steps you should follow to troubleshoot and resolve the issue:

Ensure that the Nginx configuration for your frontend app is correctly symlinked to the sites-enabled directory:
```
sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/
```
Check for any syntax errors in your Nginx configurations:
```
sudo nginx -t
```
Make sure that no other Nginx server block is conflicting with your frontend domain or listening on the same port.
Ensure that your Nuxt app is indeed running on the specified port (8000 for frontend and 3000 for portal) by checking the output of:
```
pm2 list
```
After making any changes, always restart Nginx to apply them:
```
sudo systemctl restart nginx
```
If you’re still facing issues, check the Nginx error logs for specific error messages that can help you pinpoint the issue:
```
sudo tail -f /var/log/nginx/error.log
```
Confirm that the DNS settings for frontend.mydomain.com are correctly pointing to the IP address of your Droplet.

Let me know how it goes!

Best,

Bobby

KFSys

Site Moderator

• November 8, 2023

Heya @kinemon,

Make sure that /etc/nginx/sites-available/frontend is symlinked to /etc/nginx/sites-enabled/. You can do this with sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/.
Confirm that there are no conflicts with other server blocks and that server_name is set to the correct domain or IP address.
After making changes to Nginx configuration, always reload Nginx with sudo systemctl reload nginx or sudo service nginx reload.
The Nginx configuration seems correct, but ensure there’s no other server block listening on the same server name and conflicting with this configuration.
Also, check if there’s a default Nginx configuration file in sites-enabled that might be catching the request before it hits your server block.