Как сделать деплой приложения next js на хостигнг?

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

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


Ответы (3 шт):

Автор решения: Mark Rihter

Вот статья по теме деплоя 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.

→ Ссылка
Автор решения: Stanislav Volobuev

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

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

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 я нашел в документации хоста, можете спросить в техподдержке

→ Ссылка
Автор решения: personlab
  • Запустить проект 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 по примеру выше в этой статье
→ Ссылка