在Nginx后面部署带有Node服务器的React应用程序

我创建了一个MERN堆栈应用程序，并成功地将该应用程序部署到AWS上。我使用server/文件夹中的pm2 start index.js，该文件夹正在侦听port 5000，然后在client/文件夹中运行pm2 start --name myapp npm -- start，该文件夹正在port 3000上运行。
这很好用，因为如果我用端口访问我的ec2示例公共URL，我的应用程序就在那里。例如，假设它是5.121.15.32:3000（实际上不是）。
然后我想使用nginx不仅删除端口，而且指向我的域，该域被设置为指向我的ec2示例。

server {
    listen 80;

    server_name mydomain.online mydomain.online;
    root /home/ubuntu/my_app/client/build;

    location /api/ {
        proxy_pass http://127.0.0.1:5000;
        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;
    }

    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

下面是我的clients/文件夹中的package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "jquery": "^3.6.4",
    "moment": "^2.29.4",
    "react": "^17.0.2",
    "react-date-picker": "^9.2.0",
    "react-dom": "^17.0.2",
    "react-google-autocomplete": "^2.7.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "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"
    ]
  },
  "devDependencies": {
    "dotenv": "^16.0.3"
  },
  "proxy": "http://127.0.0.1:5000"
}

更新日期：

server/index.js：

require("dotenv").config({ path: "./config.env" });
const express = require("express");
const app = express();
const cors = require("cors");
const connection = require("./db");
const authRoutes = require("./routes/auth");

const dashboardRoutes = require("./routes/dashboard");

// database connection
connection();

// middlewares
app.use(express.json());
app.use(cors());

// routes
app.use("/api/auth", authRoutes);
app.use("/api/dashboard", dashboardRoutes);

const port = process.env.PORT || 5000;
app.listen(port, console.log(`Listening on port ${port}...`));

client/App.js

import { Route, Routes, Navigate } from "react-router-dom";
import Main from "./components/Main";
import Login from "./components/Login";

function App() {
    const user = localStorage.getItem("token");

    return (
        <Routes>
            {user && <Route path="/dashboard/:_id" exact element={<Main />} />}

            <Route path="/login" exact element={<Login />} />

            <Route path="/" element={<Navigate replace to="/login" />} />
        </Routes>
    );
}

export default App;

x1米13英寸x1米14英寸：

drwxrwxr-x 3 ubuntu ubuntu 4096 Mar 12 02:53 .
drwxrwxr-x 6 ubuntu ubuntu 4096 Mar 11 16:51 ..
-rw-rw-r-- 1 ubuntu ubuntu  369 Mar 12 02:53 asset-manifest.json
-rw-rw-r-- 1 ubuntu ubuntu 3870 Mar 12 02:53 favicon.ico
-rw-rw-r-- 1 ubuntu ubuntu  963 Mar 12 02:53 index.html
-rw-rw-r-- 1 ubuntu ubuntu 5347 Mar 12 02:53 logo192.png
-rw-rw-r-- 1 ubuntu ubuntu 9664 Mar 12 02:53 logo512.png
-rw-rw-r-- 1 ubuntu ubuntu  492 Mar 12 02:53 manifest.json
-rw-rw-r-- 1 ubuntu ubuntu   67 Mar 12 02:53 robots.txt
drwxrwxr-x 4 ubuntu ubuntu 4096 Mar 12 02:53 static

然而，当我转到http://mydomain.online时，它显示Cannot GET /，我部署的最后一步是使用nginx将我的ec2示例指向我的域，我真的很难做到这一点，有人能帮忙吗？

编辑：请看评论和评论底部的聊天来了解更多细节。这个问题被编辑了几次，更新了一些内容，使我的回答变得无关紧要。
你的Nginx配置只有服务器（端口5000），而没有客户端。你需要代理到这两个，你需要分开的位置。这意味着你还必须调整你的客户端代码，以在生产中在不同的路径上访问服务器。这意味着你可以关闭3000和5000从公共访问，并避免硬编码的IP地址。并使用localhost/0.0.0.0根本不起作用，因为它们将引用客户端计算机。
另外（从注解中），您正在运行WebpackDevServer，它不应该在生产中使用。

server {
    listen 80;

    server_name mydomain.online www.mydomain.online;

    location /api/ {
        proxy_pass http://127.0.0.1:5000;
        # other directives here
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        # other directives here
    }
}

根据评论编辑：react-scripts start运行Webpack Dev Server，这意味着您需要一个方法来更改allowedHosts（请参阅下面的注解），或者构建应用并静态提供（推荐）。

server {
    listen 80;

    server_name mydomain.online www.mydomain.online;

    location / {
        root /home/ubuntu/my_app/client/build;
        # any other directives
    }

    location /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:5000;
        proxy_redirect off;
        # any other directives
    }
}

在Nginx后面部署带有Node服务器的React应用程序

1条答案

相关问题

热门标签

最新问答