我创建了一个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示例指向我的域，我真的很难做到这一点，有人能帮忙吗？
1条答案
按热度按时间nbysray51#
编辑：请看评论和评论底部的聊天来了解更多细节。这个问题被编辑了几次，更新了一些内容，使我的回答变得无关紧要。
你的Nginx配置只有服务器（端口5000），而没有客户端。你需要代理到这两个，你需要分开的位置。这意味着你还必须调整你的客户端代码，以在生产中在不同的路径上访问服务器。这意味着你可以关闭3000和5000从公共访问，并避免硬编码的IP地址。并使用localhost/0.0.0.0根本不起作用，因为它们将引用客户端计算机。
另外（从注解中），您正在运行WebpackDevServer，它不应该在生产中使用。
根据评论编辑：
react-scripts start运行Webpack Dev Server，这意味着您需要一个方法来更改allowedHosts（请参阅下面的注解），或者构建应用并静态提供（推荐）。