I am currently developing a simple portfolio app and my app structure is like this.
Nextjs/client,
Nodejs/server,
Mongodb/db
Nextjs is hosted locally on port 3001, Nodejs app on 5000. Whenever nextjs needs to fetch any api it calls nodejs application. All the things are configured inside docker. I am very new to deploying nextjs application and have recently used caddy server which has automatic https.
I am able to deploy the nextjs application statically using commands
next build
next export
The statically exported file called index.html inside out directory of nextjs application is pointed to caddy server on port 80 and 443. Statically exported app doesn't support api routes which I recently came to know. I tried next build and next start command to generate a dynamic production build inside .next directory. The main problem is How do I point my dynamically generated nextjs application in caddy configuration inside docker container. My present caddy configuration looks like
www.example.com:443 {
tls xyz#email.com
root * /srv
route {
reverse_proxy /api* api-server:5000
try_files {path} {path}/ /index.html
file_server
}
}
I am looking for hints especially related to proxy server.
Thank you in advance
I'm assuming the api url in your frontend looks like this http://localhost:5000 (based on your youtube comment here) which won't work if you're accessing your dockerized app from a remote computer (in this case your computer, since I'm assuming your app is hosted). Try changing it to https://www.example.com:5000 and rebuild your image.
I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s
Locally, I use ExpressJS on port 3001 and then start my react app with npm start which runs the development server on port 3000. This allows me to route requests as a proxy from 3000 to 3001.
For production, I installed Ubuntu NodeJS 6.12.13 on 16.04 on a DigitalOcean Droplet and then installed Nginx and PM2.
In my Nginx default file I have set the following:
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
I've moved over my Express and React setup and added the Express server to the PM2 startup. Nginx is being used as a reverse proxy server to use Express on port 3001. Here is the PM2 startup (www is the name of the server file which runs Express).
When I load my domain, I receive the Express default page:
Now I'm not sure how to start the react app, because it doesn't seem logical to start it using npm start and keep the terminal open for a production server. I need to see my React app when I visit the domain instead of the Express message.
I've found articles which mention to use npm run build but they don't explain how to then run the React app. Sorry I'm new to this, but any help would be appreciated. Thank you.
You won't run the React app because there is no such a thing :) After building your app all your files bundled in a single Javascript file. You are using start for your React app in development for development purposes.
After doing:
npm run build
you will have a build directory in your app directory. Just copy all the files and directories from this build directory to your server where your Nginx's default directory points.
If you don't want to open your regular app codes in developer tools of browsers, delete build/static/js/some_file.js.map and build/static/css/some_file.css.map before uploading your files to server. Those are source map files which are for debugging purposes. If you include them, in developer tools everyone can see you files directly. Your code actually open to world, to anybody right now but with a bundled, uglified and minified way. If you include source map files, they will be opened as they are.
This is how you run a static app. Without a backend, means here without Express, just using a web server.
But, since your question involves Express I assume you are using a backend server. So, one method is copying all your project to your server again with all backend and frontend code as you are using in development. Build your React app. But this time instead of starting both an Express server and React development server, on your server you will only run Express. Express will be the one serving your frontend. You should have already configured this in your development and done some production tests.
So, if you don't use a backend server you don't need Express or any other thing apart from a single web server. If you use a backend server then you need something like Express to serve both your backend requests (like to API's) and your React app. In addition you will need something like PM2 to run Express and optionally Express to use proxies for different apps.
It is a simple node.js code.
var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, { 'Content-Type' : 'text/plain'});
res.end('Hello World!');
}).listen(8080);
I uploaded it on cpanel hosting server and installed node.js and run it.
If a server is normal server I can check script result by accessing 'http://{serverip}:8080'. But on cpanel is hosting domain and sub domain and every domain is matched by every sites. Even http://{serverip} is not valid url.
How can I access my node.js result?
Kindly teach me.
Thanks.
bingbing.
Install/Setup NodeJS with CPanel
1. Log in to your account using SSH (if it is not enabled for your account, contact the support team).
2. Download Node.js
wget https://nodejs.org/dist/latest/node-v10.0.0-linux-arm64.tar.xz
3. Extract the Node.js files
tar xvf node-v10.0.0-linux-arm64.tar.xz
4.Now rename the folder to "nodejs". To do this, type the following command
mv node-v10.0.0-linux nodejs
5. Now to install the node and npm binaries, type the following commands:
mkdir ~/bin <br> cp nodejs/bin/node ~/bin
cd ~/bin
ln -s
../nodejs/lib/node_modules/npm/bin/npm-cli.js npm
6. Node.js and npm are installed on your account. To verify this, type the following commands
node --version
npm --version
The ~/bin directory is in your path by default, which means you can run node and npm from any directory in your account.
7. Start Node.js Application
nohup node my_app.js &
8. Stop the Application
pkill node
9. Integrating a Node.js application with the web server(optional)
Depending on the type of Node.js application you are running, you may want to be able to access it using a web browser. To do this, you need to select an unused port for the Node.js application to listen on, and then define server rewrite rules that redirect visitors to the application.
In a text editor, add the following lines to the .htaccess file in the/home/username/public_html directory, where username represents your account username:
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:XXXXX/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:XXXXX/$1 [P,L]
In both RewriteRule lines, replace XXXXX with the port on which your Node.js application listens.
To run a Node.js application on a managed server, you must select an unused port, and the port number must be between 49152 and 65535(inclusive).
Save the changes to the .htaccess file, and then exit the text editor. Visitors to your website are redirected to the Node.js application listening on the specified port.
If your application fails to start, the port you chose may already be in use. Check the application log for error codes like EADDRINUSE that indicate the port is in use. If it is, select a different port number, update your application’s configuration and the .htaccess file, and then try again.
cPanel typically runs Apache or another web server that is shared among all the cPanel/unix accounts. The web server listens on port 80. Depending on the domain name in the requested URL, the web server uses "Virtual Hosting" to figure out which cPanel/unix account should process the request, i.e. in which home directory to find the files to serve and scripts to run. If the URL only contains an IP address, cPanel has to default to one of cPanel accounts.
Ordinarily, without root access, a job run by a cPanel account cannot listen on port 80. Indeed, the available ports might be quite restrictive. If 8080 doesn't work, you might try 60000. To access a running node.js server, you'll need to have the port number it's listening on. Since that is the only job listening on that port on that server, you should be able to point your browser to the domain name of any of the cPanel accounts or even the IP address of the server, adding the port number to the URL. But, it's typical to use the domain name for the cPanel account running the node.js job, e.g. http://cPanelDomainName.com:60000/ .
Of course port 80 is the default for web services, and relatively few users are familiar with optional port numbers in URLs. To make things easier for users, you can use Apache to "reverse proxy" requests on port 80 to the port that the node.js process is listening on. This can be done using Apache's RewriteRule directive in a configuration or .htaccess file. This reverse proxying of requests arguably has other benefits as well, e.g. Apache may be a more secure, reliable and manageable front-end for facing the public Internet.
Unfortunately, this setup for node.js is not endorsed by all web hosting companies. One hosting company that supports it, even on its inexpensive shared hosting offerings, is A2Hosting.com. They also have a clearly written description of the setup process in their Knowledge Base.
Finally, it's worth noting that the developers of cPanel are working on built-in node.js support. "If all of the stars align we might see this land as soon as version 68," i.e. perhaps early 2018.
References
Apache Virtual Hosting -
http://httpd.apache.org/docs/2.4/vhosts/
Apache RewriteRule Directive - http://httpd.apache.org/docs/2.4/mod/mod_rewrite.html
A2Hosting.com Knowledge Base Article on Configuring Node.js - https://www.a2hosting.com/kb/installable-applications/manual-installations/installing-node-js-on-managed-hosting-accounts
cPanel Feature Request Thread for node.js Support - https://features.cpanel.net/topic/nodejs-hosting
Related StackOverflow Questions
How to host a Node.Js application in shared hosting
Why node.js can't run on shared hosting?
Yes it's possible, but it has few dependencies which may or may not be supported by either your cpanel hosting provider or the plan you opt in for.
Below steps that I'm mentioning is just for a demo purpose. If you are a student or just want to play with it you can try it out. I'm not a security expert so from security point of view how good it is I really don't know.
So with that being said let's see how I configured it. I have hostinger cpanel hosting subscription and following are the steps:
Enable SSH ACCESS
Connect to shared machine via ssh
Check your linux distro and download & setup node js
In my case following are the commands for that:
Downloading node & extracting it using curl
curl https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.gz |tar xz
This will download & extract node & create a directory. You can confirm that using ls command as shown in the image below.
At this point you can check the versions as shown below
as you can see for the node command it's okay but for the npm command we have modify it as follows
./node-v12.18.3-linux-x64/bin/node ./node-v12.18.3-linux-x64/lib/node_modules/npm/bin/npm-cli.js --version
Further we can create alias to make life little easier
check the below images for that:
I tried using bashrc/bash_profile but somehow it didn't work .
And that's all node server running on a shared cpanel machine.
Now I wanted to have an express js based rest api support in this case. The problem with that is it will be locally hosted on the port I'll give. Check the below example:
var express=require('express')
var app=express()
app.get('/', function (req, res) {
res.send('hosting node js base express api using php & shared hosting a great way to start yjtools')
})
console.log("listening yjtools node server on port 49876...")
app.listen(49876)
The problem here is even though it will execute I'll not be able to access it over the network. This is because we only get fixed predefined ports (like 80,21,3306 etc.) which are allowed/open on the shared cpanel machine. Due to this the express app I hosted will only available locally on 49876 port.
Let's see what do we have:
An express js based app hosted locally on cpanel machine.
Php based hosted Apache server available over http/https.
So we can make use of php with redirect rule set and curl to bridge the gap.
Following are the changes I did to make it work:
In .htaccess file add a redirect rule, say domain/api is what I want my rest api path to be.
RewriteRule api/(.*)$ api/api.php?request=$1 [QSA,NC,L]
In the api/api.php file (this is the path I choose you can choose any path)
<?php
echo "Hello ".$_REQUEST['username'];
echo '<hr>';
$curl = curl_init('http://127.0.0.1:49976/');
curl_setopt($curl, CURLOPT_HEADER, 1);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
//Get the full response
$resp = curl_exec($curl);
if($resp === false) {
//If couldn't connect, try increasing usleep
echo 'Error: ' . curl_error($curl);
} else {
//Split response headers and body
list($head, $body) = explode("\r\n\r\n", $resp, 2);
$headarr = explode("\n", $head);
//Print headers
foreach($headarr as $headval) {
header($headval);
}
//Print body
echo $body;
}
//Close connection
curl_close($curl);
?>
And on the ssh prompt just run the app.js file
node api/app.js
Below are the images for this working in action:
Here is the similar thing which I referred for my program, so we can also make this node call via php itself.
Now I have express based rest api support , angular app hosted and mysql for database everything on cpanel.
You can use any domain pointed to that cPanel server and instead of accessing http://server-ip:8080 try accessing http://domain.tld:8080. By default cPanel does not bind on port 8080. Be sure to check if there is any firewall on the server. If it is, then allow incoming connections on tcp port 8080. Depending on your WHM server configuration, it should also work with http://server-ip:8080
cPanel Version 80 has nodejs 10.x support: https://documentation.cpanel.net/display/80Docs/80+Release+Notes#id-80ReleaseNotes-InstallanduseNode.jsapplications
Install and use Node.js applications
You can now install and use Node.js applications on your server. To
use Node.js, install the ea-nodejs10 module in the Additional Packages
section of WHM's EasyApache 4 interface (WHM >> Home >> Software >>
EasyApache 4).
You can register Node.js applications in cPanel's Application Manager
interface (cPanel >> Home >> Software >> Application Manager). For
more information, read our Guide to Node.js Installations
documentation.
For Application Manager to be enabled: https://documentation.cpanel.net/display/80Docs/Application+Manager
Your hosting provider must enable the Application Manager feature in
WHM's Feature Manager interface (WHM >> Home >> Packages >> Feature
Manager).
Your hosting provider must install the following Apache modules:
The ea-ruby24-mod_passengermodule. Note: This module disables Apache's
mod_userdir module.
The ea-apache24-mod_env module. Note: This module allows you to add
environment variables when you register your application. For more
information about environment variables, read the Environment
Variables section below.
The ea-nodejs10 module if you want to register a Node.js™ application.
You can see how application manager looks like in this Youtube video:
https://www.youtube.com/watch?v=ATxMYzLbRco
anyone who wants to know how to deploy node js app to Cpanel this is a good source for him, this explains thoroughly how to deploy node js app to Cpanel please check this
I have been spending days figuring out how to install the viral Ghost platform, and experienced numerous errors. Luckily, I have managed to install it - Ghost gives me a positive Ghost is running... message in SSH after I've done npm start --production. However, when I browse to my website - http://nick-s.se - Apache displays its default page and when I go to the ghost login area - /ghost, the site returns a 403 Forbidden.
P.S. I have specifically installed Ghost on a different port than the one Apache is running on. I don't know what's going on...
Update - I have found out that I can access my Ghost installation by adding the port number 2368 which I've configured in the config.js. Now, however my problem is - how can I run Ghost without using such ports?...
tell your browser you want to connect to the port Ghost is running on: http://nick-s.se:2368
So a few things, based on visiting:
1) It seems Apache isn't proxying the request onward to Ghost. Are you sure that you've configured it properly?
2) It also looks like Apache doesn't have access to the directory that you set as root. This shouldn't be necessary anyway if proxying is set up correctly, but could become an issue later if you wanted to use apache to serve things like the static assets.
If you are open to nginx instead of Apache, I have written a how to on this: link. You can skip the section on configuring Nginx. Otherwise, still might be useful if you figure out the conversion of rules from Nginx to Apache.
If you don't have any other sites running on your VPS you can just turn apache off and not have to deal with apache proxying the request to port 2368 and have Ghost run on port 80. If your VPS is running CentOS you can check out this how to on disabling apache and running Ghost on port 80.