Я создаю приложение Next JS и хочу скопировать ТОЛЬКО производственные файлы на мой сервер и развернуть приложение. Это прекрасно работает, когда я НЕ использую Express, однако, когда я использую Express, приложение больше не работает на сервере, так как говорит, что не может найти каталог "pages".
Структура проекта
|- .next
|- client
|- polyfills.js
|- components
|- CompA.js
|- CompB.js
|- etc
|- node-modules
|- ...
|- pages
|- index.js
|- page1.js
|- page2.js
|- etc
|- public
|- appIcon.png
|- scripts
|- utils.js
|- stylesheets
|- main.css
|- next.config.js
|- package-lock.json
|- package.json
Мои шаги
Я разрабатываю приложение локально и тестирую его, запустив "npm run dev". Когда приложение готово к развертыванию на сервере, я просто копирую производственные файлы на сервер и внедряю приложение. Насколько я понимаю, встроенное приложение ВСЕ содержится в каталоге «.next», поэтому это единственный каталог, который я копирую на свой сервер.
Вот мои полные шаги, чтобы получить приложение на сервер
- Локальная разработка приложения
- Локальное тестирование с использованием "npm run dev"
- Локальное тестирование с использованием "npm run build" и затем "npm run start "
- Приложение отлично работает
- Переместите файлы в расположение сервера и разверните
- cp .next ~ / myTestFolder
- cp package . json ~ / myTestFolder
- cp package-lock. json ~ / myTestFolder
- cp next.config. js ~ / myTestFolder
- cd ~ / myTestFolder
- npm установка
- npm запуск сборки
- npm запуск запуска
- Приложение работает отлично
Процесс завершается неудачно, когда я использую Express
Как только я использую Express, этот процесс больше не работает. Мне нужно использовать express и dotenv, чтобы я мог иметь настраиваемый basePath для своего приложения, который может отличаться на разных серверах, на которых я развертываю свое приложение (см. Мой другой вопрос переполнения стека: Далее JS развертывание в указанном c URL-путь )
Я сделал следующее:
Установите новые зависимости
npm install --save express dotenv
Создайте файл ".env"
BASE_PATH=/my-test-application/path-for-my-app
Обновите "next.config. js", чтобы прочитать переменные из ".env" и перейти к WebPack, чтобы его можно было использовать в файлах ". js"
// support getting variables from the server environment
const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')
module.exports = {
// Stop being being able to access pages without using proper URL
useFileSystemPublicRoutes: false,
webpack: function(cfg) {
// pass the environment variables to webpack so JS files can access them
cfg.plugins.push(new webpack.EnvironmentPlugin(localEnv))
....
}
....
}
Обновите сценарии в "package. json"
"scripts": {
"dev": "node ssr-server.js",
"build": "next build",
"start": "node ssr-server.js"
},
Создайте файл "ssr-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('/my-test-application/path-for-my-app', (req, res) => {
return app.render(req, res, '/index', req.query)
})
server.get('/my-test-application/path-for-my-app/page1', (req, res) => {
return app.render(req, res, '/page1', req.query)
})
server.get('/posts/:id', (req, res) => {
return app.render(req, res, '/posts', { id: req.params.id })
})
server.all('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
Обновите любую "Link" s, чтобы использовать этот путь
render(){
let basePath = process.env.BASE_PATH? process.env.BASE_PATH: "";
...
<Link href={`${basePath}/page1`}>
...
Я могу запустить приложение локально, используя "npm run dev" и "npm run build" / "npm run start".
Однако, когда я копирую файлы в папку на сервере, теперь это не удается. Я копирую все те же файлы, что и выше, с добавлением 2 новых файлов
- cp ssr-server. js ~ / myTestFolder
- cp .env ~ / myTestFolder
Я запускаю "npm build" ОК, но когда я запускаю "npm run start", происходит сбой со следующим
$ npm run start
> React_SSR@1.0.0 start /home/myTestFolder
> node ssr-server.js
/home/myTestFolder/node_modules/next/dist/lib/find-pages-dir.js:3
if(existsSync(_path.default.join(dir,'..','pages'))){throw new Error('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?');}throw new Error("> Couldn't find a `pages` directory. Please create one under the project root");}
^
Error: > Couldn't find a `pages` directory. Please create one under the project root
at findPagesDir (/home/myTestFolder/node_modules/next/dist/lib/find-pages-dir.js:3:170)
at new DevServer (/home/myTestFolder/node_modules/next/dist/server/next-dev-server.js:1:3830)
at createServer (/home/myTestFolder/node_modules/next/dist/server/next.js:2:105)
at Object.<anonymous> (/home/myTestFolder/ssr-server.js:5:13)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! React_SSR@1.0.0 start: `node ssr-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the React_SSR@1.0.0 start 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/myTestFolder/.npm/_logs/2020-03-06T10_24_04_105Z-debug.log
Любая идея, что я пропускаю / делаю неправильно?