reactjsnginxnginx-configvultr

Not able to access the react app via vultr main ip address


Not able to access the react app via http://[Vultr_main_ip_address]:3000 event after running npm start command and then running node server.js from src/ folder location. Vultr name servers are already added under DNS settings of the domain provider. Could someone please advise why I am not able to access the app via vultr ip address

Below are the Versions:

node v18.13.0
nginx/1.22.0 (Ubuntu)
Ubuntu 23.04 x64

Installed nginx in the Vultr server root location from terminal by running below:

$ sudo apt-get update
$ sudo apt-get install nginx 

Then I have modified the Nginx configuration file by running the below command:

$ sudo nano /etc/nginx/sites-available/default

And added following entries under location/ {

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:3000;
                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;
                try_files $uri /index.html;
        }
}

#server {
#       listen 80;
#       listen [::]:80;
#
#       server_name example.com;
#
#       root /var/www/example.com;
#       index index.html;
#
#       location / {
#               try_files $uri $uri/ =404;
#       }
#}

Later ran below command again:

$ sudo nginx -t
$ sudo systemctl restart nginx

Below is my package.json file:

{
  "name": "matblogs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-tailwind/react": "^1.2.5",
    "@tanstack/react-query": "^4.26.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@uiw/react-md-editor": "^3.20.2",
    "axios": "^1.3.3",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.1",
    "bootstrap": "^5.2.3",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "pg": "^8.9.0",
    "react": "^18.2.0",
    "react-animated-text": "^0.1.4",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-markdown": "^8.0.5",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "sequelize": "^6.28.0",
    "web-vitals": "^2.1.4"
  },
  "proxy": "http://localhost:8000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution

  • After correcting the nginx configuration by running below command and then added the server block:

    $ sudo nano /etc/nginx/sites-available/default
    
    server {
    
        listen 80;
        server_name somedomain-test.com www.somedomain-test.com;
        root /var/www/somedomain-test.com/build;
        index index.html;
    }
    

    Ran below commands:

    $ sudo ufw allow 'Nginx Full'
    $ sudo ufw delete allow 'Nginx HTTP'
    

    and then restarted nginx by running below command, solved the issue

    $ sudo systemctl restart nginx