我创建了一个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
(请参阅下面的注解),或者构建应用并静态提供(推荐)。