Search code examples
reactjsdeploymentweb-deploymentforeverserve

Build, npm serve, npm forever: how to keep alive a deployed site ( react + nodejs)


I deployed a website (React + node.js) using a VDS (hostvds). I installed apache 2, npm serve and npm forever.

The problem: I can't keep alive frontend and backend at same time when i quit puTTy..

What i did to deploy the application:

-To run the backend, I use: forever server.js (using VDS console)

-To run the frontend, in /var/www/html folder, where i moved my front build folder, I use serve build (using puTTy)

Everything works perfectly, but when i quit puTTy the frontend stop to work.

Could someone tell me how to run and keep alive frontend? Thanks


Solution

  • The problem you're facing is that the command you run in the front is attached to the tty and when you close the connection the command dies as well. This is not happening on the back because the forever tool detach it so it can effectively run forever. Your question can be summarized as "How to run multiple commands in detached mode?" A quick search give some results that can achieve what you are looking for, for example using screen. Yo have multiple approaches:

    Op1: Using Screen

    # run backend command
    screen -dm "npm start"
    # run frontend command
    screen -dm "npm start"
    

    Note that the screen command is used to create new sessions and detach them from the tty. So nohup could handle your issue. and

    Op2: Using systemd service

    Another, and more robust way is using services of systemd and handling the lifecycle using systemctl command. In this way you can define restart policies (autorestart when failed) and also autostart when the machine reboots. You would have to create two different units, one for back and one for front.

    Create the files

    /etc/systemd/system/backend.service

    [Unit]
    Description=My backend
    
    [Service]
    Type=simple
    Restart=always
    User=nobody
    Group=nobody
    WorkingDirectory=/your/back/dir
    ExecStart=/usr/bin/npm start
    
    [Install]
    WantedBy=multi-user.target
    

    /etc/systemd/system/frontennd.service

    [Unit]
    Description=My frontennd
    
    [Service]
    Type=simple
    Restart=always
    User=nobody
    Group=nobody
    WorkingDirectory=/your/front/dir
    ExecStart=/usr/bin/npm start
    
    [Install]
    WantedBy=multi-user.target
    

    Once the files are created you can handle the service lifecycling with systemctl:

    Run the apps:

    systemctl start [backend|frontend]
    

    Stop the apps:

    systemctl stop [backend|frontend]
    

    Check status:

    systemctl status [backend|frontend]
    

    To enable the autostart on boot just enable the service(s) using systemctl enable [backend|frontend]. You can disable it using `systemctl disable [backend|frontend].

    Op3: Static frontend

    Doing the options 1 and 2 will solve your issue, but have in mind you are serving a frontend using npm when it could be build to static files and served using apache2 directly, which will reduce cpu/memory consumption and it would be much faster. This is just regarding the frontend, the backend is dynamic and it needs the option 1 or 2.

    As you mention it I assume you know how apache2 works, so just build the frontend application to generate plain html, css and js files, then move them to the apache2 folder and it will serve the files to the users for you.

    cd /your/front/folder
    npm run build
    cp -r build/ /var/www/html
    

    More info on how to build the statics here

    Summary

    Running commands in a shell will attach them and if you close the shell they will die unless you detach them. You can use detaching tools like screen or nohup, or you can change the approach for this specific scenario and use services to handle the lifecycle (apache2 is also a service).