How to Set up Nuxt Applications on Runcloud Nginx Servers (and Deploy Them with Envoyer)

Runcloud is a great tool for managing servers and deploying WordPress, Laravel and custom PHP applications. It might be a bit less suited for running node applications like Nuxt.js and such. The same goes for deploying Laravel projects with Envoyer. But if you have a lot of servers, having them in one place becomes really important if you want to keep your sanity. Luckily Runcloud is flexible enough to set them up relatively effortlessly.

Let’s go step by step

1. When you create a New Web Application on your server it’s very important to choose “Native NGINX + Custom config (For power user. Manual Nginx implementation)”
2. After creating a web application, you should go to “NGINX Config” and click “Add a New Config”
3. In the Predefined Config dropdown don’t choose anything and choose “location.root” in the Type dropdown. In the Config content, you can paste:

   location / {
           expires 1m;
   
           proxy_redirect                      off;
           proxy_set_header Host               $host;
           proxy_set_header X-Real-IP          $remote_addr;
           proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto  $scheme;
           proxy_read_timeout          1m;
           proxy_connect_timeout       1m;
           proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
   }

4. That’s for the NGINX part. If you have the ssh console open – go to the project folder, run npm run build and then npm run start as long as you have NUXT running on the 3000 port – this will already work. But obviously, we need it running in the background and update with every deployment. We use Envoyer for continuous deployment of the code, but the commands will be more or less regardless of what you use.
5.  First you need to install pm2 project manager with npm install -g pm2
6. Set up your deployment hooks smth like this:
   
7. The deployment hook for running the Nuxt will look like

cd {{ release }} && (pm2 delete -s npm || exit 0) && pm2 start npm -- start

That’s it. That way, building and restarting your Nuxt application will be a part of your deployment process.

Gregory Shein

Entrepreneur and full-stack web developer capable of multitasking and completing large-scale projects in a short period of time. Founder of moy-razmer.ru and nomadicsoft.io, large experience in e-commerce and various SaaS projects