Question
How can I deploy multiple nuxt apps on different server blocks on same droplet
- Posted on November 7, 2023
- DeploymentInitial Server Setup
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.
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.
Featured on Community
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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
.envfile 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 thesites-enableddirectory, 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-enableddirectory:Check for any syntax errors in your Nginx configurations:
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:
After making any changes, always restart Nginx to apply them:
If you’re still facing issues, check the Nginx error logs for specific error messages that can help you pinpoint the issue:
Confirm that the DNS settings for
frontend.mydomain.comare correctly pointing to the IP address of your Droplet.Let me know how it goes!
Best,
Bobby
Heya @kinemon,
/etc/nginx/sites-available/frontendis symlinked to/etc/nginx/sites-enabled/. You can do this withsudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/.server_nameis set to the correct domain or IP address.sudo systemctl reload nginxorsudo service nginx reload.sites-enabledthat might be catching the request before it hits your server block.