[FIXED] how to deploy nodejs api and vuejs app in one server

Issue

I have developed node rest api and vuejs web applications, Im trying to deploy both project in to one aws server which run ubuntu. Both applications have different port, domain I try to configure api.example.com for api and example.com for vue app. I can run both applications once after running the command in SSH, but I need them to run it forever. What I did,

1. Deploy to apps separately
2. Apps can access with ports

I need them access

1. api.example.com
2. example.com

what are the step to do, Any changes host file.

Solution

This is how we are running our VueJS UI and ExpressJS REST API from the same server.

We are managing our services with PM2.

VueJS (Dev Environment, You can add the same settings to production)

In package.json add "start": "HOST='0.0.0.0' PORT=80 npm run dev",, where 80 is the port VueJS is listening on, to the "scripts": {..} array. Then, after installing PM2, (for dev) we can start VueJS with cd /location/of/vue/root; sudo pm2 start npm run dev --name Vue -- start. (Make sure that Apache is not running).

Please note that setting the HOST to 0.0.0.0 is important. Do not set it to LocalHost or your Servers IP address or you may run into issues.

ExpressJS

In the /location/of/express/app.js add this similar to the bottom of the file: app.listen(process.env.PORT || 8081), where 8081 is the port your REST API should be listening on. I can then start it with sudo pm2 start /location/of/express/app.js --name Express

At this point, the VueJS should be available at www.example.com (implied Port 80) and the REST API would be available at www.example.com:8081.

If you want to have api.example.com/ point to the API, you need to make sure that your DNS is pointing the "api" subdomain to the desired port, or you may have to add the port into the URL as above.

Additionally, you can easily follow the logs through PM2 as well with pm2 logs APPNAME --lines 100.

Answered By - Marvin WordWeaver Parsons

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)