1

Как сделать деплой? У менять есть различные файлы, я так поняла, мне нужно всё это загрузить на хостинг, и там уже с помощью node js, попытаться собрать?

введите сюда описание изображения

1

3 ответа 3

4

У меня то же возник такой вопрос и я нашел два способа:

связанно это с тем, что на виртуальном хосте ограничены права и запускать скрипты из консоли не выходит, а аренда выделенного сервера стоит на порядок дороже. Как выяснилось хоста вполне достаточно.

1) Первый - генерация статических страниц next js.

Это подойдет, если страницы сайта можно представить без генерации на сервере.(в принципе, node для этого не нужен) для этого необходимо выполнить npm run build, npm run export. убедитесь сперва, что ваш package.json содержит следующий код:


"scripts": { "dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "next lint"
}


после выполнения next export появится папка out в корне проекта - это и есть статический сайт - содержимое папки просто нужно перенести в паблик хоста и провести настройки создав файл .htaccess с содержанием:


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html


в момент создания статических страниц next не отдает изображения компонента Image, т.к. по умолчанию сервер node должен отправлять оптимизированные изображения(но в данном случае node не используется)

Решение проблемы с экспортом картинок next js:

установка и включение в проект next-image-export-optimizer подробнее в документации https://www.npmjs.com/package/next-image-export-optimizer

2) Второй вариант - перенос готового приложения next js на хостинг.

сперва я установил node по документации хостинга, на вашем хосте такая то же должна быть. после подготовить экспорт серверного приложения - все детали описаны в доке: https://nextjs.org/docs/advanced-features/output-file-tracing просто копируете папку standalone на хостинг и настраиваете .htaccess у меня этот файл выглядел примерно так:


PassengerNodejs /home/v/valkeru/.local/bin/node # место нахождение node
PassengerAppRoot /home/v/valkeru/node/HelloWorld # адрес проекта, до файла server.js
PassengerAppType node
PassengerStartupFile server.js


пример содержания файла .htaccess и порядок установки node я нашел в документации хоста, можете спросить в техподдержке

2

Вот статья по теме деплоя next.js приложения - https://nextjs.org/docs/deployment. Самый лучший способ разобраться - начать с этой статьи.

Вы можете задеплоить статические файлы, сгенерировав их с помощь. next build && next export и задеплоить на любую машину с помощью nginx.

Бзовая конфигурация nginx для статических файлов будет выглядеть так:

 server {
        listen 80;
        server_name your_server_name.com;
        location / {
            root /www/data;
            index index.html index.htm;
        }
    }

В этом случае nginx сервер будет отвечать на запрос на 80 порт (стандартный порт для http) файлом index.html находящимся в директории /www/data

Вторым вариантом будет деплой непосредственно node.js приложения. В этом случае сгенерируйте билд и запустите его на машине хосте с помощью команды next build && next start. На этом этапе вы имеете рабочий проект на порте 3000. После этого потребуется настроить nginx в качестве прокси сервера, вот ссылка на документацию - https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/. Базовая конфигурация для таких задач будет выглядеть так:

server {
    listen 80;
    server_name your_server_name.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Теперь nginx будет перенаправлять все http запросы на ваше next.js приложение.

Стоит понимать, что существует много способов и соответствующих инструментов, чтобы задеплоить приложение. В качестве альтренативы nginx существует Apache web server (https://httpd.apache.org/).

Для запуска node.js приложений в продакшн есть проект pm2, думаю, он подойдет лучше, чем стандартный next.js. Официальный сайт pm2 - https://pm2.keymetrics.io/ и его npm пакет - https://www.npmjs.com/package/pm2.

В качестве альтернативы pm2 вариант запуска next.js приложения в докер контейнере, пример есть на гитхабе - https://github.com/vercel/next.js/tree/canary/examples/with-docker. Этот вариант можно использовать вместе с docker-compose для того, чтобы в случае возникновения ошибок контейнер перезагрузился самостоятельно и ваше приложения работало без перебоев и необходимости ручного перезапуска.

Для конфигурации docker-compose добавьте в пример с гитхаба файл docker-compose.yml с содержимым:

services:
  web:
    build: .
    ports:
      - 3000:3000
    restart: unless-stopped

И запустите docker-compose командой docker-compose up. Конечно для этого необходимо установить на машину-хост docker (инструкция установки https://docs.docker.com/engine/install/) и docker-compose (и еще инструкция - https://docs.docker.com/compose/install/)

В завершении хочу добавить, что я не являюсь специалистом ни в одной из перечисленных технологий и самый лучший вариант что-то изучить - это попробовать сделать это самостоятельно. Вы можете попробовать задеплоить ваш проект на собственном компьютере с помощью любого описанного выше способа, а потом арендовать виртуальную машину, например, на yandex.cloud и задеплоить там уже в продакшн, подключившись к машине с помощью ssh.

0
  • Запустить проект npm run dev

  • В папке проекта создать файл server.js Добавить этот код:

     const { createServer } = require('http')
     const { parse } = require('url')
     const next = require('next')
    
     const dev = process.env.NODE_ENV !== 'production'
     const hostname = 'localhost'
     const port = 3000
     // when using middleware `hostname` and `port` must be provided below
     const app = next({ dev, hostname, port })
     const handle = app.getRequestHandler()
    
     app.prepare().then(() => {
       createServer(async (req, res) => {
         try {
           // Be sure to pass `true` as the second argument to `url.parse`.
           // This tells it to parse the query portion of the URL.
           const parsedUrl = parse(req.url, true)
           const { pathname, query } = parsedUrl
    
           if (pathname === '/a') {
             await app.render(req, res, '/a', query)
           } else if (pathname === '/b') {
             await app.render(req, res, '/b', query)
           } else {
             await handle(req, res, parsedUrl)
           }
         } catch (err) {
           console.error('Error occurred handling', req.url, err)
           res.statusCode = 500
           res.end('internal server error')
         }
       })
         .once('error', (err) => {
           console.error(err)
           process.exit(1)
         })
         .listen(port, () => {
           console.log(`> Ready on http://${hostname}:${port}`)
         })
     })
    
    • в файле package.json изменить

    "scripts": { "dev": "next dev", "build": "next build", "start": "NODE_ENV=production node server.js", "prod": "next export", "lint": "next lint" },

сохраняем все изменения в файлах

  • выполнить команду npm run build
  • выполнить команду npm run prod
  • загрузить все файлы из папки /out на хостинг, предварительно изменив файл .htaccess по примеру выше в этой статье
3
  • в какой статье? 3 окт в 20:59
  • В этой, точнее не в статье, а в примере выше. Но этот вариант подходит для статических сайтов. Если будут API маршруты, тогда нужно выполнить команду npm run prod или export у кого что и все файлы в папке. next загрузить на виртуальный сервер и запустить файл server.js
    – personlab
    4 окт в 21:13
  • Поправка, нужно папку .next загрузить вместе со всеми файлами которые есть в рабочей директории и запустить командой npm run server.js
    – personlab
    12 окт в 15:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.