Как развернуть приложение Next.js в cPanel (руководство)

Опубликовано: 2023-07-17
Оглавление
  • Что такое Next.js
  • Что такое cPanel
  • Разверните приложение Next.js в cPanel
  • Плюсы и минусы развертывания NextJs в cPanel
  • Часто задаваемые вопросы
  • Другие источники
  • Заключение

Обучение беспроблемному и эффективному развертыванию приложения Next.js в cPanel. Я проведу вас шаг за шагом в этом процессе.

Прежде чем углубляться, давайте раскроем, что такое Next.js и cPanel, на случай, если вы не знакомы с этими терминами.

Что такое Next.js

Next.js — это аккуратный фреймворк, основанный на React.js. Это мастер, когда дело доходит до создания приложений для рендеринга на стороне сервера (SSR). React.js по умолчанию поддерживает только создание одностраничных приложений (SPA). Тем не менее, Next.js предлагает привлекательную функцию SSR. Что еще? Помимо прочего, Next.js обладает системой маршрутизации на основе файлов.

Что такое cPanel

Переход на cPanel. Думайте об этом как о программном обеспечении, упрощающем управление сервером. Он приносит на ваш стол множество инструментов. Диспетчер файлов, диспетчер баз данных и диспетчер доменных имен — это лишь несколько примеров.

Теперь, когда мы подружились с Next.js и cPanel, давайте приступим к нашей основной миссии: развертыванию приложения Next.js на cPanel. Предполагая, что у вас есть приложение Next.js, веб-хостинг с cPanel и связанное доменное имя, давайте двигаться вперед.

Разверните приложение Next.js в cPanel

Шаг 1. Начните с настройки собственного сервера Next.js. Вам нужен файл server.js в корневом каталоге вашего проекта, заполненный необходимым кодом. Обратитесь за помощью к официальному руководству Next.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}`) }) })

Шаг 2 : Настройте файл package.json. Этот шаг делает среду «готовой к работе» и активирует файл server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

Шаг 3 : Пришло время создать приложение Next.js. Вы можете сделать это с помощью команды npm run build или yarn run build в терминале.

Шаг 4. После сборки найдите файлы проекта Next.js в файловом менеджере. Если вы не видите скрытые файлы, включите видимость. Избегайте папок node_modules и .git, файлов README.md и .gitignore. Выберите все остальные файлы и папки и создайте ZIP-файл.

Шаг 5 : Теперь войдите в свой веб-хостинг cPanel. Загрузите и распакуйте ZIP-файл в корневую папку вашего доменного имени.

Шаг 6 : Файлы вашего проекта готовы. Перейдите в раздел «Программное обеспечение» в вашей cPanel. Нажмите «Настройка приложения Node.js», а затем кнопку + «Создать приложение». Настройте приложение Node.js, учитывая версию Node.js, рабочий режим приложения, корень приложения, URL-адрес и файл запуска (server.js).

Завершите, нажав СОЗДАТЬ. После создания остановите его на некоторое время. Прокрутите вниз до раздела «Обнаруженные файлы конфигурации». Запустите NPM Install, чтобы получить все пакеты Node.js. Наконец, нажмите ЗАПУСТИТЬ ПРИЛОЖЕНИЕ.

Ну вот! Откройте свое доменное имя в браузере. Ваше приложение Next.js запущено. Отличная работа по успешному развертыванию!

Было очень приятно поделиться этим методом развертывания приложений Next.js на cPanel. Удачи и счастливого кодирования!

Плюсы и минусы развертывания NextJs в cPanel

Развертывание приложения Next.js в cPanel дает множество преимуществ. Вот некоторые плюсы и минусы, которые следует учитывать.

Плюсы :

  1. Удобный для пользователя : cPanel предоставляет простой в использовании графический интерфейс, который упрощает процесс развертывания.
  2. Автоматизация : cPanel включает в себя множество автоматизированных инструментов, которые могут выполнять такие задачи, как создание баз данных, управление файлами веб-сайта, настройка электронной почты и многое другое.
  3. Универсальность : cPanel поддерживает широкий спектр приложений, включая приложения Node.js, например созданные с помощью Next.js.

Минусы :

  1. Ограниченная гибкость : хотя cPanel прост в использовании, иногда он может ограничивать гибкость и контроль над вашей серверной средой из-за упрощенного интерфейса.
  2. Потенциальные проблемы совместимости . Некоторые пользователи сообщают о проблемах при развертывании приложений Next.js на платформах общего хостинга, например об ошибках в процессе сборки.

Часто задаваемые вопросы

Каковы преимущества и ограничения размещения веб-сайта Next.js в cPanel?

Размещение веб-сайта Next.js в cPanel может иметь несколько преимуществ, таких как экономия средств и сохранение возможностей Next.js. Тем не менее, есть некоторые ограничения, о которых следует знать. Например, cPanel не поддерживает бессерверные функции и автоматическую статическую оптимизацию. Решение о размещении в cPanel должно основываться на индивидуальных предпочтениях и потребностях бизнеса.

Что делает конфигурация файла .htaccess при развертывании приложения Next.js на cPanel?

Конфигурация файла .htaccess является важной частью развертывания приложения Next.js в cPanel. Этот файл управляет поведением сервера при возникновении определенных условий. Конкретная конфигурация, представленная в примере, помогает правильно обрабатывать запросы и перенаправления.

Что произойдет, если я столкнусь со сбоями или проблемами перенаправления при развертывании приложения Next.js в cPanel?

Если у вас возникают сбои или проблемы с перенаправлением при развертывании приложения Next.js в cPanel, одним из решений может быть создание файла запуска с именем app.js в корневой папке. В этом сценарии вам нужно запустить приложение как приложение Node.js.

Как отключить оптимизацию изображения при развертывании приложения Next.js на cPanel?

Отключить оптимизацию изображения при развертывании приложения Next.js на cPanel можно, но точные инструкции не были включены в предоставленную информацию. Для конкретных шагов вы должны обратиться к официальной документации Next.js или соответствующим руководствам.

Другие источники

Лучшие хостинг-провайдеры Next.JS

Лучшие хостинг-провайдеры Node.js

Заключение

Хотя развертывание приложения Next.js в cPanel может быть связано с некоторыми проблемами, преимущества часто перевешивают недостатки. Простота и автоматизация, предлагаемые cPanel, делают процесс развертывания простым и управляемым даже для разработчиков, которые плохо знакомы с этим процессом. Благодаря этому руководству вы теперь должны быть лучше подготовлены для развертывания приложений Next.js в cPanel.