Как построить продакшн next.js?

Я пытаюсь получить производственную сборку в next.js, чтобы запустить ее на моем сервере, но я не могу создать производственную сборку next.js, когда пытаюсь

npm run build

Кто-нибудь знает, как заставить сборку prod в next.js работать правильно? Я сделал все в документации next.js, но всегда получаю эту ошибку ниже. Если я делаю сборку для разработчиков, она работает нормально, но попытка сборки prod приводит к ошибкам.

Я также много раз делал следующая сборка и переустанавливал все пакеты node_modules, которые все еще имели эту ошибку.

он всегда показывает мне в терминале

Error: Could not find a valid build in the '/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/.next' directory! Try building your app with 'next build' before starting the server.
    at Server.readBuildId (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:753:15)
    at new Server (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:80:25)
    at module.exports (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next.js:6:10)
    at Object.<anonymous> (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/next.config.js:6:13)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at loadConfig (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/config.js:47:28)
    at _callee2$ (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/build/index.js:52:42)
    at tryCatch (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:114:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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!     /home/kk/.npm/_logs/2018-12-10T19_58_00_588Z-debug.log

server.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.info(`> Ready on http://localhost:${port}`);
  });
});

next.config.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/projects/:page", (req, res) => {
    const page = req.params.page;
    let file = "";
    switch (page) {
      case "example1":
        file = "/projects/example1";
        break;
      case "example2":
        file = "/projects/example2";
        break;
    }
    return app.render(req, res, file, { page });
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.info(`> Ready on http://localhost:${port}`);
  });
});

package.json

 {
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "export": "next export"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "redux": "^4.0.1",
    "video-react": "^0.13.1"
  }
}

Если у кого-то есть идея, было бы так приятно! Я планирую запустить этот сайт next.js, используя узел на моем сервере AWS. Но для этого мне нужно получить производственную сборку response.js, в настоящее время я могу запустить только сборку разработки.

Надеюсь, у кого-то есть идея.

Заранее спасибо!

Добавьте эту строку в package.json: "start": "cross-env NODE_ENV=production node server.js" Используйте npm start после npm run build

Kartik Bhalala 11.12.2018 13:34
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
13
1
51 033
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы должны запускать next build из корневой папки, а не внутри .next/.

Ответ принят как подходящий

Кажется, ваша конфигурация server.js неверна. Попробуйте переместить все, что у вас есть, с вашего next.config.js на server.js, убедитесь, что файл next.config.js пуст, затем создайте новый сценарий запуска npm:

"prod_start": "NODE_ENV=production node server.js"

Ваш package.json должен выглядеть так:

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "prod_start": "NODE_ENV=production node server.js",
    "export": "next export"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "redux": "^4.0.1",
    "video-react": "^0.13.1"
  }
}

обязательно запустите: npm run build && npm run prod_start

Затем у вас должна быть производственная сборка, работающая с использованием next.js.

Дайте мне знать, если у вас возникнут вопросы.

Это так просто, теперь работает, не знаю, что сказать. Большое спасибо! Очень признателен за вашу помощь.

Cody 12.12.2018 15:26

@Karim, я использую аналогичную настройку (express + next.js), не могли бы вы рассказать мне, как создать и развернуть приложение next.js. При запуске следующей команды сборки создается папка .next. Я не понимаю, нужно ли мне переместить весь источник моего приложения (server.js и т. д.) На рабочий сервер и запустить npm start, так как файлы моего сервера express.js не перемещаются / не связываются в папку .next.

Rakesh Rawat 28.05.2019 16:06

@RakeshRawat ты нашел решение своей проблемы, у меня такие же сомнения :(

ratnabh rai 04.09.2021 23:27

next build, за которым следует next start, должны быть правильными командами для подготовки сборки к производству и ее запуска.

Вот пример для package.json. если вы хотите экспортировать приложение для работы как статический контент, например, разместить его в s3 как статический веб-сайт, вам необходимо запустить next export

...
"scripts": {
    "build": "next build",
    "start": "next start",
    "export": "next export"
}
...

Убедитесь, что в вашем package.json есть указанные выше сценарии, затем выполните следующие действия в указанном порядке.

$ npm run build 
$ npm run start

Если вы хотите запустить приложение с определенным портом, вы можете указать порт -p в качестве аргумента для команды npm run.

npm run start -- -p 3232

Если вы хотите включить это в конвейер CI / CD, вам понадобится Dockerfile, вот простой пример

FROM node:alpine

#copy source 
COPY . /app

# Install deps 
RUN cd /app &&  npm install 

# Build 
RUN npm run build

ENTRYPOINT [ "npm", "run", "start" ]

Все еще нужно больше объяснений или помощи, не стесняйтесь оставлять комментарии, и я буду более чем счастлив помочь.

Почему COPY . /app и cd /app? Используйте WORKDIR /app, а затем . вместо каталога /app.

ErikE 11.09.2021 05:38

@Muhammad Soliman: Я новичок в NEXT.JS, не могли бы вы сообщить мне, в чем причина npm run start? обычно в реакции мы не выполняем эту команду, мы напрямую указываем каталог сборки на домен.

Tejas Patel 17.11.2021 11:04

@TejasPatel npm run start должен запустить указанный скрипт с именем start в package.json - хотя вы можете назвать скрипт start как хотите. в таком случае это будет npm run <script_name>

Muhammad Soliman 17.11.2021 19:53

@ErikE это было просто для пояснения цели команд простым способом, чтобы облегчить понимание начинающими читателями.

Muhammad Soliman 17.11.2021 19:54

@MuhammadSoliman Понятно, но нам также нужно научить новичков, как писать свои Docker-файлы «докерским способом», а не писать их индивидуально. Понимание WORKDIR настолько важно для Dockerfiles, что предоставление новичкам ответа, который не включает его, с большей вероятностью ограничит их, чем действительно поможет им, если вы не дадите им БОЛЬШОЙ намек в своем ответе: «Не используйте этот файл как ... есть. Вам следует использовать WORKDIR для правильного написания файлов Docker ". со ссылкой на правильные документы или ответом stackoverflow о том, как правильно использовать WORKDIR.

ErikE 17.11.2021 20:32

Я использую Passenger / nginx в качестве обратного прокси для моих приложений next.js.

Я собираю приложение с помощью yarn run build.

Это точка входа в Passenger (index.js)

/* eslint-disable */
// An optimised entry-point for Passenger/nginx Server
const path = require('path');

const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');

// strips away all arguments until it's at `node`
process.argv.length = 1;

// redefining the arguments so it's like we are running `next start`
process.argv.push(nextPath, 'start');

// start the script/bin
require(nextPath);

Другие вопросы по теме