Настройка и развертывание веб-приложения Next.js на Ubuntu 25.04

Дата публикации: 2025-05-13T17:06:51

Теги: ["nodejs", "nextjs", "ubuntu"]

Этот пост предоставляет пошаговое руководство для настройки `next-hello-world` проект с использованием Next.js с TypeScript, создание репозитория Git и загрузку кода в первый раз.

Предварительные условия

• Сервер под управлением Ubuntu 25.04 или любой другой ОС Linux.
• Привилегии пользователя: пользователь root или не root с привилегиями sudo.

Конвенции

# - данные команды должны выполняться с правами root либо непосредственно от имени пользователя root, либо с помощью команды sudo.
$ - данные команды должны выполняться от имени обычного пользователя

Обновите систему

Свежая установка Ubuntu 25.04 требует обновления пакетов до последних доступных версий.

$ sudo apt update -y && sudo apt upgrade -y

Затем мы должны установить узел js и npm

$ sudo apt install nodejs npm

Если у вас нет последней версии, вы можете обновиться через

$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable

Или, если вы хотите установить последнюю версию, вы можете запустить `sudo n latest` вместо того, чтобы `sudo n stable`

Создание нового проекта Next.js

Запустите следующую команду в вашем терминале:

$ npx create-next-app@latest next-hello-world

Вам предложат несколько вариантов. Вот рекомендуемый вариант для нашего проекта:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (recommended for UI development)
Would you like to use `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to customize the default import alias (@/*)? › No

Эти опции создают современный проект Next.js с:

• TypeScript для безопасности типа
• ESLint для качества кода
• Попутный CSS для укладки
• App Router (новая, рекомендуемая система маршрутизации)

Перейти к вашему проекту

$ cd next-hello-world

Установить дополнительные зависимости (опционально)

Вы можете добавить некоторые общие зависимости:

$ npm install axios react-hook-form zod @hookform/resolvers

Запустите сервер разработки

$ npm run dev

Посетите `http://localhost:3000` Чтобы увидеть, как работает ваше приложение.

Создание нового частного репозитория Git на Forgejo

1. Зайдите в Forgejo и войдите в систему

2. Нажмите кнопку "+" в правом верхнем углу и выберите "Новое хранилище"

3. Имя репозитория: next-hello-world

4. Описание: Добавить краткое описание вашего проекта

5. Выберите «Частный»

6. Не инициализуйте с README, .gitignore или лицензией (мы будем продвигать наш существующий код)

7. Нажмите "Создать репозиторий"

После создания репозитория вы увидите инструкции по нажатию существующего хранилища. Держите эту страницу открытой, так как нам понадобится URL-адрес хранилища в следующих шагах.

Настройте Git конфигурацию для этого проекта

Инициализируйте Git в вашем проекте

Во-первых, убедитесь, что вы находитесь в каталоге проекта:

$ cd path/to/next-hello-world

Инициализируйте Git:

$ git init

Настройка информации о пользователе только для данного проекта

Установите свое имя и адрес электронной почты для этого конкретного репозитория:

$ git config user.name "Your Name"
$ git config user.email "your.email@example.com"

Примечание: Это устанавливает конфигурацию только для этого репозитория. Если вам нужно использовать разные учетные записи для разных проектов, такой подход гарантирует правильную идентичность.

Проверьте свою конфигурацию

Убедитесь, что ваши настройки были применены правильно:

$ git config user.name
$ git config user.email

Добавить удаленный репозиторий

Подключите свой локальный репозиторий к удаленному, который вы создали:

$ git remote add origin https://git.example.com/username/next-hello-world.git

Заменить `username` с вашим именем пользователя или именем организации Forgejo.

Проверить удаленность

Убедитесь, что путь был добавлен правильно:

$ git remote -v

Вы должны увидеть URL-адрес хранилища, перечисленный как для получения, так и для push.

Загрузите свой местный код в Git в первый раз

Создате файл `.gitignore`

Next.js создает `.gitignore` файл автоматически, но проверьте, что он существует и содержит соответствующие записи:

$ cat .gitignore

При необходимости создайте или обновите его сами:

# Dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# Testing
/coverage

# Next.js
/.next/
/out/
/.swc/
next-env.d.ts

# Production
/build
/dist

# Misc
.DS_Store
*.pem

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Local env files
.env*.local
.env
.env.development
.env.test
.env.production

# Vercel
.vercel

# TypeScript
*.tsbuildinfo

# IDE specific files
/.idea
# VSCode (ignore all except for recommended extensions and settings)
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
*.sublime-*
*.code-workspace

# Cache
.eslintcache
.stylelintcache

# Optional: if using Storybook
/storybook-static

# Optional: for SASS
.sass-cache/

# PWA
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js.map

Постановка Ваших Файлов

Добавьте все свои файлы проекта в промежуточную область:

$ git add .

Создать первоначальный коммит

Совершайте свои файлы с помощью описательного сообщения:

$ git commit -m "Initial commit: Next.js TypeScript project setup"

Нажмите на удаленный репозиторий

Нажмите свой код на удаленный репозиторий:

$ git push -u origin main

Примечание: Если названа ваша ветка по умолчанию `master` вместо того, чтобы `main`, использование `git push -u origin master` вместо этого.

Если Push провалится

Если ваш push отклонен, потому что в удаленном хранилище есть контент, которого у вас нет на месте, вы можете использовать:

$ git config pull.rebase false
$ git pull origin main --allow-unrelated-histories

Разрешить любые конфликты, совершить изменения, а затем снова нажать:

$ git push -u origin main

Следующие шаги

Теперь, когда ваш проект настроен и подключен к Git, вот несколько следующих шагов:

Создать отрасль развития для текущей работы:

$ git checkout -b development
$ git push -u origin development

Теперь мы должны установить Nginx

$ sudo apt install nginx

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

$ sudo nano /etc/nginx/sites-available/your-domain-name.com

В этом файле поместите следующий контент (не забудьте изменить фразу `your-domain-name.com` на ваше настоящее доменное имя)

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name your-domain-name.com www.your-domain-name.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # Add these lines
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Add timeout settings
        proxy_read_timeout 60s;
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
    }

    # Add error log for this specific site
    error_log /var/log/nginx/your-domain-name.com.error.log;
    access_log /var/log/nginx/your-domain-name.com.access.log;
}

Теперь весь входящий трафик на `your-domain.com` по умолчанию `http 80` порт будет перенаправлен на `localhost:3000`.

И привязать наш новый файл конфигурации к сайтам доступного каталога:

$ sudo ln -sf /etc/nginx/sites-available/your-domain-name.com /etc/nginx/sites-enabled/your-domain-name.com

Наконец, мы можем проверить, не имеет ли наш файл nginx никакой ошибки:

$ sudo nginx -t
$ sudo systemctl restart nginx

И, наконец, теперь мы можем увидеть наше приложение Next.js в нашей области желаний. Но это небезопасно. Давайте защитим его, позволим зашифровать.

Получите сертификат TLS от Let's Encrypt

Мы будем использовать Let's Encrypt для получения SSL-сертификата бесплатно. Пожалуйста, убедитесь, что вы указали свой поддомен на IP-адрес сервера. Шаги, приведенные ниже, будут работать только в том случае, если вы обслуживаете интерфейс управления с помощью Nginx.

$ sudo apt install python3-certbot-nginx

Запрос на Let’s Encrypt SSL.

$ sudo certbot certonly --nginx -d your-domain-name.com -d www.your-domain-name.com

Проверьте SSL

Откройте следующую ссылку в вашем веб-браузере для проверки.

https://your-domain-name.com

Следующая команда гарантирует, что Certbot может проверить ваш поддомен с помощью вашей конфигурации.

$ sudo certbot renew --dry-run

Если пробный запуск прошел без ошибок, все готово. Теперь процесс продления будет автоматизирован.

Он автоматически настраивает `/etc/nginx/sites-available/your-domain-name.com` для включения SSL.

Завершение

Мы завершили наше руководство по установке `next-hello-world` проекта с использованием Next.js с TypeScript, на системах Ubuntu 25.04. Мы начали с подготовки сервера с необходимыми зависимостями, а затем приступили к установке и настройке.

Если вам понравился этот пост пожалуйста, поделитесь им со своими друзьями в социальных сетях, которым может быть интересна эта статья или оставьте комментарий ниже.