There are a couple of ways to do that:
- Deploy both the Vue and the Laravel components on the same Droplet and use Nginx to proxy the traffic accordingly
What I could suggest is following the steps here on how to deploy Laravel on DigitalOcean:
Then create a separate Nginx server block and add your Vue project there.
- Deploy Laravel on one Droplet and the Vue frontend on a separate one
This option is quite similar, but you need to deploy a second Droplet with Nginx installed and upload your 2 components on the two separate Droplets.
In both cases, it is better if you have a domain name so that you could run your Laravel on a separate subdomain name like api.yoursite.com.
- Use the new DigitalOcean App platform
Another option is to use the new DigitalOcean App platform so that you will not have to do any server configuration. Here is a quick demo on how to do that:
The video should help you as it shows how to deploy Laravel with a separate frontend service. In the case of the video, it is a React app but the process should be the same for Vue.
Hope that this helps!
Laravel is one of the most popular open-source web application frameworks written in PHP. It aims to help developers build both simple and complex applications by making frequently-used application tasks (like caching and authentication) easier.
In this tutorial, we will deploy a simple Laravel application with a production environment in mind.