Best practise/way to deploy Laravel + Vue SPA application to AWS

Question

I have 2 repositories residing in Bitbucket - Backend (Laravel app as the API and entry point) and Frontend (Main application front-end - VueJs app). My goal is to set up continuous deployment so whenever something is pushed in either of the repos in master (or other branch selected by me) branch it triggers something so that the whole app builds and reaches the AWS EC2 server.

I have considered/tried the following:

• AWS CodePipeline and/or CodeDeploy. This looked like a great option since the servers are in AWS as well. However, there is no support for Bitbucket out of the box, so it would have to go to Bitbucket Pipeline -> AWS Lambda -> AWS S3 -> AWS CodePipeline/CodeDeploy -> AWS EC2. This seems like a very lengthy journey and I am not sure if that's a good practice whatsoever.
• Using Laravel Forge to deploy the Laravel app, and add additional steps to build the VueJS app. This seemed like a very basic solution, however, the build process seems to fail there as it just takes long time and crashes with no errors (whereas I can run exact same process on my local machine or a different server hosted elsewhere). I am not sure if this is issue with the way server is provisioned, the way Forge runs deployment script or the server is too weak to handle it.

The main question of mine would be what are the best pracises for deploying the app of such components? I have read many tutorials/articles about deploying a NodeJS app, or a Laravel app, but haven't gotten good information about a scenario like this.

Would it be better to build the front-end app locally and version control the built JS file? Or should I create a Pipeline in Bitbucket that would build the app and then deploy it? Or is it the best to just version control and deploy the source files and leave the whole build process as the last step in the deployment process that will be done by the server that is hosting the app itself? There are also some articles suggesting hosting the whole front-end app in S3 bucket - would that be bad practise as well?

Appreciate any help and resources that would help!

Ashjian

What solution did you pick for hosting your application? – Ivan

Answer 1

From the sounds of things it sounds like you have two types of deployments you might want to run.

Laravel API: If you're using Laravel Forge already then this is a great way to go about deploying your Laravel App, takes care of most of the process and easy server management.

Vue.js App: Few things you can do here, I personally prefer using a provider like Vercel or Netlify who let you deploy your static sites/frontends for free-low costs. You can write custom build steps but they have great presets that should work out the box.

If you really want to keep everything on AWS then look into how to host static sites on AWS

Allembracing

Answer 2

I believe deploying both on AWS is more efficient.

I had the same scenario where I had separate frontend and backend (Reactjs and Laravel) where the projects were on GitHub. Here is how we managed:

For Laravel, Elastic Beanstalk and CodePipeline.

• Go to Elastic Beanstalk, create an application and setup the environment. Choose sample applications for application code
• Go to Codepipeline and create pipeline. Remember to choose Bitbucket as a source and Elastic Beanstalk for deploy option.
• Then setup ec2

For Frontend use Amplify.

Here's a link https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/integrate-a-bitbucket-repository-with-aws-amplify-using-aws-cloudformation.html for integrating a bitbucket with Aws amplify.

Release