I'm setting up my website which would run on an AWS Ubuntu EC2. It is a Vue.js SPA relying on a Nodejs Express app with API calls and socket.io. So far both apps are working, the backend is on my AWS EC2 free tier, behind an Elastic Load Balancer, the frontend is on my machine since I working on it. Now I would like to deploy the frontend to my AWS EC2 also but I'm confused how to do it correctly. The tutorials I've found are using nginx but I'm not sure that I need nginx as I already have AWS ELB. Any advices would be great :)
1
-
My suggesstion is, no need to use both ELB and nginx to deploy a single application.Diya Li– Diya Li2019-06-19 09:43:12 +00:00Commented Jun 19, 2019 at 9:43
Add a comment
|
1 Answer
as is says "If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app" here
I would choose s3 to host vue app because it's static and can be served using s3 and
I will choose EC2 for hosting my API (server code) and also i'd make an elastic IP to talk to my ec2 server so that on restart i don't have to handle the dynamic IP's
Steps to make your website live
- First pull yout node express server on your ec2 instance
- start your node express server use pm2 to serve it as an service
- expose the served port from security groups of the ec2 instance
- make an s3 bucket on aws and upload files to it
- Tip: just click upload button after dropping your files to s3 do not go clicking next
- after uploading select all the uploaded files and then mark as public
- after uploading go to properties of that bucket and then choose static web hosting and type index.html the asked field
** TIP: do not use a load balancer for this application use only when you distribute your system across multiple ec2's**
2 Comments
JustGreg
Ok, I've got the S3 bucket up and running with my Vue app. However, I'm confused how to expose my Express app's port. What I've tried is to create an S3 bucket as api.mydomain.com and used as redirection to my express's app port 3000. The problem is that I need POST requests to my API and (if I am correctly read) the S3 buckets won't support POST (so I received 405 errors from my Express app). Any tip would be great!
arpitansu
HTTP verbs i.e GET PUT POST DELETE can be done from your vue app and hosted on s3, you have to expose the port in the security groups of the EC2 instance so that you can access your express API outside the instance aws.amazon.com/premiumsupport/knowledge-center/… and after that just connect your vue app on the IP:port of the EC2 instance to make you HTTP requests