我有一个API路由，根据请求获取我在加载项目页面（组件）时所需的数据，如下所示。
http://localhost:3000/api/projects
当我在getInitialProps()中加载我在pages/projects.js内请求数据的页面时，它显示了我想要的数据，如下所示，到目前为止一切都很好。
console logs data coming through from custom express API route I have made
代码在这里：
页/ projects.js
import React, { Component } from "react";
import Layout from "../components/Layout";
import Siema from "siema";
import Head from "next/head";
import fetch from "isomorphic-unfetch";
export default class extends React.Component {
componentDidMount() {
this.siema = new Siema({
loop: false
});
}
prev = () => {
this.siema.prev();
};
next = () => {
this.siema.next();
};
render() {
return (
<Layout>
<Head>
<title>Jesal Patel ｜ Projects</title>
</Head>
<div className="container">
<section>
<div className="projects">
<div className="siema">
<div>
<img src="(ignore this the img is showing on stackoverflow post.)" />
<div className="overlay">
<div id="overlay_title">Dextero</div>
<div id="overlay_description">
I developed a multi-touch mobile game for stroke patients
to rehabilitate their finger coordination and dexterity.
</div>
<div id="overlay_tech">Java, Android, LibGDX, SQLite</div>
</div>
</div>
</div>
<div />
<button onClick={this.prev}>Prev</button>
<button onClick={this.next}>Next</button>
</div>
</section>
</div>
</Layout>
);
}
static async getInitialProps({ req }) {
//This fetch is the reason why my project won't build
const result = await fetch("http://localhost:3000/api/projects");
const projects = await result.json();
console.log(projects);
return { projects };
}
}
问题：
现在问题开始时我运行next-build并在其中抛出以下错误：编辑：我没有正确粘贴错误。注意：我运行导出项目的now-buildscript，这是我的问题，这是导致我出现问题的原因
I:\Next.js\website>npm run now-build
> [email protected] now-build I:\Next.js\website
> next build && next export -o dist
Creating an optimized production build ...
Compiled successfully.
┌ /
├ /_app
├ /_document
├ /_error
├ /contact
└ /projects
> using build directory: I:\Next.js\website\.next
copying "static" directory
copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
launching 11 threads with concurrency of 10 per thread
[====-] 4/5 80% 160/s 0.0s { FetchError: request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000
at ClientRequest.<anonymous> (I:\Next.js\website\node_modules\node-fetch\lib\index.js:1444:11)
at ClientRequest.emit (events.js:189:13)
at Socket.socketErrorListener (_http_client.js:392:9)
at Socket.emit (events.js:189:13)
at emitErrorNT (internal/streams/destroy.js:82:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
at process._tickCallback (internal/process/next_tick.js:63:19)
message:
'request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000',
type: 'system',
errno: 'ECONNREFUSED',
code: 'ECONNREFUSED' }
{ message:
'request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000',
type: 'system',
errno: 'ECONNREFUSED',
code: 'ECONNREFUSED' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] now-build: `next build && next export -o dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] now-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Jesal\AppData\Roaming\npm-cache\_logs\2019-03-19T04_10_45_930Z-debug.log
我知道这是由于这行const result = await fetch("http://localhost:3000/api/projects");，但我不知道该怎么做才能使它构建。我是MEAN堆栈的新手。我不确定我是否必须在全球某处创建该路线以使其正常工作？我不知道是否会解决这个问题，或者是否还有其他问题。
我在这个应用程序中使用了Express和Mongoose，下面的代码可以在package.json和next.config.js文件中找到。
服务器/ index.js
const express = require("express");
const next = require("next");
const bodyParser = require("body-parser");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const routes = require("./routes/index.js");
var mongoose = require("mongoose");
const PORT = process.env.PORT || 3000;
const dbName = "MySite";
const MONGO_URL =
"mongodb+srv://admin:<hidden for privacy>@cluster0-5cjs1.mongodb.net/MySite?retryWrites=true";
app
.prepare()
.then(() => {
mongoose.connect(MONGO_URL, { useNewUrlParser: true });
mongoose.Promise = global.Promise;
mongoose.connection.on("open", function() {
console.log("mongodb is connected!!");
});
const db = mongoose.connection;
model = db.modelNames();
db.on("error", console.error.bind(console, "MongoDB connection error:"));
const server = express();
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: true }));
server.use("/api", routes);
server.use((req, res, next) => {
// Also expose the MongoDB database handle so Next.js can access it.
req.db = db;
next();
});
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(PORT, () => {
console.log("Server is up and running on port number " + PORT);
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
服务器/路由/ index.js
const express = require("express");
const router = express.Router();
const project_controller = require("../controllers/project_controller");
router.get("/projects", project_controller.projects_list);
module.exports = router;
服务器/模型/ project_schema.js
var mongoose = require("mongoose");
var Schema = mongoose.Schema;
var ProjectSchema = new Schema(
{
name: String,
description: String,
tech: String
},
{ collection: "project" }
);
module.exports = mongoose.model("Project", ProjectSchema);
服务器/控制器/ project_controller.js
const Project = require("../models/project_schema");
exports.test = function(req, res) {
res.send("Greetings from the Test controller!");
};
exports.projects_list = function(req, res) {
var documents = Project.find({}, function(err, docs) {
if (err) throw err;
res.send(docs);
return docs;
});
};
exports.project_create = function(req, res) {
let project = new Project({
name: req.body.name,
description: req.body.description,
tech: req.body.tech
});
project.save(function(err, project) {
if (err) {
console.log("Unsuccessful");
}
console.log("Saved!");
});
};
的package.json
{
"name": "website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon server/index.js",
"now-build": "next build && next export -o dist",
"build": "next build",
"start": "next start -p 8000"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@engineerapart/nextscript": "^1.0.2",
"@zeit/next-css": "^1.0.1",
"@zeit/next-typescript": "^1.1.1",
"body-parser": "^1.18.3",
"bootstrap": "^4.3.1",
"co": "^4.6.0",
"cross-env": "^5.2.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"isomorphic-unfetch": "^3.0.0",
"jquery": "^3.3.1",
"mongodb": "^3.1.13",
"mongoose": "^5.4.19",
"next": "^8.0.4-canary.10",
"next-compose-plugins": "^2.1.1",
"next-images": "^1.0.4",
"nodemon": "^1.18.10",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-slick": "^0.23.2",
"siema": "^1.5.1",
"superagent": "^4.1.0",
"url-loader": "^1.1.2"
}
}
next.config.js
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");
module.exports = {
crossOrigin: "anonymous"
};
module.exports = withPlugins([withImages, withCSS]);
module.exports = withImages();
// module.exports = withCSS();
module.exports = {
target: "serverless"
};
module.exports = withCSS({
webpack: function(config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: "url-loader",
options: {
limit: 100000,
name: "[name].[ext]"
}
}
});
return config;
}
});
更新：这是对Prabhakar Pandey的回复的更新，让你们知道，我总是在运行now-buildcommand时杀死服务器，另外，如我之前提到的那样，在我第一次编辑这篇文章时，它是第二部分该命令失败的错误，这是next export -o distnot next build，工作正常！另外，我在Windows操作系统上而不是Mac OS。
发生这种情况是因为您希望在已经使用的端口上运行应用程序。
您可以使用以下命令检查端口上运行的应用程序：
For macOS El Capitan and newer (or if your netstat doesn't support -p), use lsof
sudo lsof -i tcp:3000
For Centos 7 use
netstat -vanp --tcp | grep 3000
Also if wnat to kill any process you can use
kill -9 `PID`
when port is empty you try your application by rebuilding it should work