Host Nodejs Express and Vuejs Application in Apache WebServer in Ubuntu
I am working on an Oracle Content Management Headless website with Vuejs. I am using Docker for the development environment but our server is on Oracle Cloud Service. The client send me the cred for the Ubuntu server which has an apache2 web server installed. I deployed the code and faced issues when build and start the project because it starts to port 8080 but the apache server is configured to port 80. So I follow the below steps to fix the issues and configure and run the project successfully.
Target: We will host our node express and Vuejs application on the Apache web server. We already have the Apache2, node installed on Ubuntu Server. I am hoping you are already connected to Ubuntu Server through SSH.
- Install PM2
- Add PM2 to the startup script
- Start the express application
- Start the app with PM2
- Check the application on the browser
- Enable the Proxy modules with Apache
- Create/Update Apache Configuration/Host file for the node application
- Restart the Apache2 server
Install PM2:
PM2 is a daemon process manager that will help us to manage and keep the application live 24/7.
npm install -g pm2
Add PM2 to the startup script:
When the ubuntu server restart then PM2 should start automatically. For that, we are adding pm2 in our system startup script.
sudo pm2 startup systemd
Start the express application:
We can start our node express application as below
cd /var/www/html/app
npm run build // build the application
node dist/server/serverBundle.js // Oracle CMS Headless vuejs app
or
node dist/index.js // for other application
Bu this running the app and waiting for the watch, we want to run the app/process in the background to continue our other tasks. That’s why we will follow the next step.
Start the app with PM2
pm2 start dist/server/serverBundle.js // Oracle CMS Headless vuejs app
or
pm2 start dist/index.js // for other application
Check the application on the browser:
http://your-domain.com:8080
Enable the Proxy modules with Apache:
Now our application is running on the port 8080, but we have to show it on 80. So, now we are going to enable the proxy modules on Apache2
sudo a2enmod proxy
sudo a2enmod proxy_http
We will restart the server at the end..
Create/Update Apache Configuration/Host file for the node application:
Navigate the configuration file and update according to the following file
sudo vi /etc/apache2/sites-available/default.conf
Press “i” to start editing.
<VirtualHost *:80>
ServerName your-domain.com
ServerAlias www.your-domain.com
ServerAdmin webmaster@your-domain.comProxyPreserveHost On
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/<Directory “/var/www/html/app”>
AllowOverride All
</Directory>
</VirtualHost>
Press the “ESC” and “:wq” keys to save the changes and close the file.
ProxyPreserveHost: This makes Apache pass the original Host header to the backend server. This makes the backend server aware of the address used to access the application.
ProxyPass: this directive specifies the mapping of the incoming requests to the backend server. In our case, it specifies that everything under the root (/) should be mapped to the backend server at the given address http://localhsot:8080/.
ProxyPassReverse: same as the ProxyPass configuration. It tells the Apache to modify the response headers from the backend server. This makes sure that if the backend server returns a location redirect header, the client’s browser will be redirected to the proxy address and not the backend server address, which would not work as intended.
Restart the Apache2 server:
sudo systemctl restart apache2
Now check the http://your-domain.com on any browser, your app is available and working.
Hope this information is helpful and saves your time. You can share this article because sharing is caring 🙂
#DevOps #HappyCoding #SharingIsCaring
