无法通过 vultr 主 IP 地址访问 React 应用程序

Question

在运行

http://[Vultr_main_ip_address]:3000

命令然后从

npm start

文件夹位置运行

node server.js

后，无法通过

src/

事件访问 React 应用程序。

Vultr name servers

已添加到域提供商的 DNS 设置下。 有人可以告诉我为什么我无法通过 vultr ip 地址访问该应用程序

以下是版本：

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

通过以下运行从终端在 Vultr 服务器根位置安装 nginx：

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

然后我通过运行以下命令修改了 Nginx 配置文件：

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

并在

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;
#       }
#}

稍后再次运行以下命令：

$ sudo nginx -t
$ sudo systemctl restart nginx

下面是我的 package.json 文件：

{
  "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"
    ]
  }
}

Answer 1

通过运行以下命令更正 nginx 配置，然后添加服务器块：

$ 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;
}

运行以下命令：

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

然后通过运行以下命令重新启动 nginx，问题解决了

$ sudo systemctl restart nginx