React app on digitalocean droplet axios requests not working on other machines

Viewed 246

Hey all I'm having an issue pulling up my website on my desktop. On my laptop where I created the app and did all the code my React app works fine and updates however on other machines only my components/elements load while my axios requests are returning (404 connection refused error). Any tips or fixes? P.S This is my first time trying to deploy an app build to a webserver (digitalocean/NGINX).

NGINX config file

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/epenn92reactapp.space/html/among-us-reactapp3/client/buil>
        index index.html index.htm index.nginx-debian.html;

        server_name epenn92reactapp.space www.epenn92reactapp.space;

        error_page 405 =200 $uri;
        error_page 404 /index.html;

        location ^~ /assets/ {
                gzip_static on;
                expires 12h;
                add_header Cache-Control public;
  }

        location /v1/api {
                proxy_http_version 1.1;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_pass http://64.227.5.159:8080;
                try_files $uri /index.html;
}

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/epenn92reactapp.space/fullchain.pem; >
    ssl_certificate_key /etc/letsencrypt/live/epenn92reactapp.space/privkey.pem>
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

    server {
        if ($host = www.epenn92reactapp.space) {
        return 301 https://$host$request_uri;
        } # managed by Certbot

        if ($host = epenn92reactapp.space) {
        return 301 https://$host$request_uri;
        } # managed by Certbot
        listen 80;
        listen [::]:80;

        server_name epenn92reactapp.space www.epenn92reactapp.space;
        return 404; # managed by Certbot
}

Example axios Route

    const [chars, setChars] = useState([]);
    useEffect(() => {

    const fetchData = async () => {
      try {
        let res = await axios.get('http://localhost:8080/api/v1/character', {
        });
        setChars(res.data)
      }
      catch (err) {
        console.log('error', err)
      }
    };
    fetchData();

  }, [chars.length]);

Server.js file

    const PORT = process.env.PORT || 8080

package.json

    "proxy": "http://localhost:8080/"

I've been reading around for about a day now and I'm just not sure what to do any help would be great thanks!

0 Answers
Related