MLR
By:
MLR

Deploy my Node App served from my Droplet

June 18, 2017 528 views
Applications Deployment Node.js Nginx DigitalOcean Ubuntu 16.04

Hello, I followed DigitalOcean's (DO) instructions to deploy a simple "Hello World" app.
Please keep in mind:
1) I got it to work in my DO droplet (I see the rendered content: mydomain.com/my-app/).
2) I understand it's server.js code.
3) I understand it's sites_available >default code.
4) I see another DO Community member asked this question, but there's not solution.
5) I want my node app to be served from my droplet.
Not another service like: http://my-app.dokku.me, or Hreoku
The DO "Hello World" app (server.js) only renders text content.
I want to use this script (server.js) to start my index.html of my Node app.
Side note: my index.html contains links to app.bundle.js, app.css & an image folder.
What code do I change/use (in the code, below) to start my Node (Webpack) app ?
const http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World on port 3001');
}).listen(3001, '999.999.99.999');

Note: I've spent over 25 hours on this one aspect.
I've exhausted all resources I can think of. YouTube, DO, Google, ...
Thank-you, Michael Rooney

3 comments
  • Hi @MLR! Does your webpack app simply generate a static website? Or does it also have a server backend written in Nodejs?

  • Hi kamaln7, It will be dynamic.
    For experimental purposes I created a (simple single) webpage using: ...
    Webpack2 + Bootstrap4 + ReactJS.
    At this time, I'm just trying to get the DO (Hello World .js) script to render a static index.html file ...
    instead of just text ("Hello World"). Then I will work on dynamic.
    I'm also studying using require('express'); instead of require('http'); .
    I'm using StackOverflow, YouTube, DO & Google for resources. So far it's not working for me.
    I appreciate your help.
    Thank-you, Michael Rooney

  • Hi kamaln7, I just figured out how to serve static web pages using express (Node) ...
    on my droplet >Nginx (reverse proxy) >localhost port.
    Now I will see if I can get my Webpack2+Bootstrap4+ReactJS app to properly display.
    I will let you know. MLR

5 Answers

@MLR Okay, but the title of your question is "Deploy my Node App served from my Droplet" - that was why I thought this was a Node problem. My bad.
Supply your Nginx server block and let's have a look at that. It should look like this:

server {
  listen 80;
  server_name example.com;
  root /var/www/html;
  index index.html index.htm;
  location / {
    try_files $uri $uri/ =404;
  }
  location /myNodeApp {
    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;
  }
}
  • Hi Hansen, Yes mine is similar to yours.

    root /home/mlr;
    

    I also use the following so I can use my app name in my url.

    rewrite ^/do-server-js-test(.*) $1 break;
    

    Please keep in mind, I previously stated my apps work to & including ...
    to the end of the DO Hello World app article.
    Meaning, my apps render the text, just as the DO Hello World app does.
    Thank-you, Michael Rooney
    P.S. - Node/Webpack is my final goal.
    Due to our conversations, (for now) I'm narrowing my problem area.

  • Hi Hansen, Thank-you, I still learned a few things from you.
    I'll keep working on it. MLR :)

Hi @MLR

If you want to use Nginx as the reverse proxy (which is recommended), then you should set it to listen to localhost instead of having Node.js listening to the public.

Have you followed the tutorial for setting up a production environment?
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04

Node.js is an open source JavaScript runtime environment for easily building server-side and networking applications. Node.js applications can be run at the command line but this guide focuses on running them as a service using PM2, so that they will automatically restart on reboot or failure, and can safely be used in a production environment.
  • Hello Hansen (and anyone that can help),
    1) Yes, I'm using reverse proxy. Below: The 999s represent my IP.

             location /do-server-js-test {
             rewrite ^/do-server-js-test(.*) $1 break;
             proxy_pass http://999.999.99.999: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;
        }
    

    2) Concerning your link: Yes, that is the article I used.
    As I stated, it fully worked (for me).
    The problem is, the article stopped too soon.
    Instead of response.end('Hello World on port 3001'); ... (just rendering text).
    I want response.end(RUN OR RENDER MY INDEX.HTML CONTENT);
    Above: Whatever the correct code or process is, to do this.
    My app's index.html contains a link to app.bundle.js, ... + the standard HTML tags.
    P.S. I would rename the DO example hello.js to server.js.


    3) A side question: I also tried proxy_pass "http://127.0.0.1:3001";
    This also worked.
    QUESTION: Is one better than the other, in this situation.
    Meaning proxy_pass "http://127.0.0.1:3001"; or http://999.999.99.999:3001;
    The 999s represent my IP.
    Also, please let me know if some of my concepts are incorrect.
    I've spent so much time getting this far, I'm getting comfortable with the basics.
    Thank-you, Michael Rooney

    • @MLR

      1) Yeah, I guessed that wasn't your IP :-) From a security stand and functionality point, I would recommend only having Node listening on the localhost and have Nginx as the only web server for you visitors.

      2) I would probably recommend you find a tutorial on how to create a Node app - the tutorial is only for setting up the server, it doesn't cover how to create an app, since that would be way too big.
      I'm not sure where to point you, but you could just search for "node.js create app" on Google - or simply find a small app for you to get started on, which I would actually recommend, since it's usually the best way to learn how to code (copying from people who are better than you).

      3) This is more or less same as point 1. I run everything behind Nginx, since I find it much easier to tweak and add extra security.

      • Hi Hansen,
        1) Please see #3 below.
        2) I already know how to create Node apps :) ...
        I have a few simple Node apps working on my DO server.
        One Node app uses express. ...
        Since it works, this tells my node-modules are properly being accessed.
        BUT, it has the same problem. This Node app (using express) only renders a line of text.
        So (at least), I know my server setup works, but ...
        I still have not figured out how to have this server.js (originally hello.js) file ...
        serve my index.html.
        I want to accomplish this before I move on. ... Maybe I have misguided concepts ?
        Furthermore, Once I get the concept, then I will have my server.js file run my ...
        (Node) Webpack2 + Bootstrap4 + React combo-app. ...
        It only renders simple content for experimental purposes.
        My Webpack combo-app has an index.html that contains links to ...
        app.bundle.js, app.css & an image folder.
        3) Concerning proxy_pass "http://127.0.0.1:3001"; ... or ...
        http://999.999.99.999:3001; :
        3a) I'm under the impression they are both localhost (?) Is this correct ?
        3b) If I am wrong, which is localhost ?
        3c) If I am correct, is one better than the other ? (for my situation).
        Thank-you, Michael Rooney

@MLR Starting a new thread, since it got too narrow.

2) Find a small app and use that as your template. You need to have routes, and usually a folder called public where you place those things.
But again, this goes into waaayyy too much coding, so I would probably recommend that you ask in a Node forum like StackOverflow:
https://stackoverflow.com/questions/tagged/node.js

3) localhost is an alias of the IP 127.0.0.1. The 999-IP, well I'm guessing that's your masked public IP, is still "owned" by the server, but that means Node is publicly available on port 3001 (if the firewall is open).
Using 127.0.0.1 means that it's only services on the server that can see those - and that's what we want, because we want Nginx to see Node and serve the data to visitors.

  • Hi Hansen,
    1) My goal for my original question is to get the server.js (originally hello.js) file ...
    to run my index.html file.
    Even if that index.html (for now) only renders text, image, ...
    2) Continued from #1 ... Then I will be concerned about folder routes (I will keep your note in mind).
    3) Thanks. Now I understand.
    4) If you are familiar with Webpack, ...
    Once the app is optimized by me: npm run prod, "prod": "webpack -p". ...
    Do I only need to upload the content in the content in the dist folder ?
    Meaning, I don't need (?): ...
    webpack.config.js, package.json, node_modules, .bootstraprc, .babelrc
    I'm uploading to my DO server, not Heroku, Git, ...
    I know Heroku, Git, ... do the prod processing (not me), when they serve Webpack.
    Thank-you, Michael Rooney

    • @MLR
      4) No, haven't used Webpack. Not sure what you should do - this is very depending on your specific app, so go to StackOverflow and ask your question - there are many, very good programmers willing to help.

      • Hi Hansen, I appreciate the information you gave.
        Concerning my original question ...
        As far as I can tell, it does NOT involve Node (at this point).
        At this point, I want to know, what do I alter in the 5 line script to run a standard ...
        index.html file, instead of just rendering text.
        According to the DO Hello World article, this can be done. An actual quote ...
        "This reverse proxy setup is flexible enough to provide your users access ...
        to other applications or static web content that you want to share.".

        const http = require('http');
        http.createServer(function(request, response) {
        response.writeHead(200, {'Content-Type': 'text/plain'});
        response.end('DigitalOcean Server script on port 3001');
        }).listen(3001, '104.131.10.188');
        

        Hopefully someone will (soon) see my question.
        Thank-you again. By for now, Michael Rooney

Have another answer? Share your knowledge.