Как развернуть NextJS с помощью NGINX?

ProgramBox

Как развернуть NextJS с помощью NGINX?

Post author:admin
Запись опубликована:3 марта, 2023
Post category:Вопросы по программированию

#reactjs #nginx #next.js

Вопрос:

Итак, я знаю, как развернуть приложение React на сервере.

npm запуск сборки
создайте серверный блок и укажите корень на сборку папки моего приложения react (root /var/www/xfolder/build;)
systemctl перезапустить nginx
запустите мой сервер узлов (nohup node server amp;amp;) и все готово.

Я чувствую себя глупо из-за того, что не понимаю этого с NextJS. Я запускаю npm run build

Я ожидаю что-то вроде папки сборки. Я попытался установить корень серверного блока в /var/www/xfolder/.next, но страница по-прежнему выдает 403 forbidden . И нужно ли мне запускать npm run start? Я не понимаю, как правильно развернуть приложение. Я использую Ubuntu, NginX (1gb droplet) в DigitalOcean.

Ответ №1:

Проверьте это: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153

Ссылка на HTTP / HTTPS: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153

Запустите службу PM2 NextJS на порту 8080:

cd PROJECT_DIRECTORY
pm2 start "npm run start -- -p 8080" --name contractverifier

Настройка Nginx:

Замените этот файл приведенным ниже кодом /etc/nginx/sites-available/default

     server {
        server_name www.DOMAINNAME.com DOMAINNAME.com;

        index index.html index.htm;
        root /home/ubuntu/PROJECT_FOLDER; #Make sure your using the full path

        # Serve any static assets with NGINX
        location /_next/static {
            alias /home/ubuntu/PROJECT_FOLDER/.next/static;
            add_header Cache-Control "public, max-age=3600, immutable";
        }

        location / {
            try_files $uri.html $uri/index.html # only serve html files from this dir
            @public
            @nextjs;
            add_header Cache-Control "public, max-age=3600";
        }

        location @public {
            add_header Cache-Control "public, max-age=3600";
        }

        location @nextjs {
            # reverse proxy for next server
            proxy_pass http://localhost:8080; #Don't forget to update your port number
            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;
        }

        listen 80 default_server;
        listen [::]:80;
}

1. В @public компоненте try_files $uri.html $uri/index.html @public @nextjs; директивы нет смысла. Только последний параметр можно использовать для указания резервного варианта (используя либо новый URI, либо именованное имя местоположения). Это @public имя будет обрабатываться как простое имя файла относительно корня вашего веб-сервера; эта проверка никогда не будет успешной, что приведет лишь к дополнительному снижению производительности из-за дополнительного и бесполезного системного stat вызова; location @public { ... } никогда не будет выбрано для обработки любого запроса вообще.

Ответ №2:

Мне удалось заставить его работать. Проблема в моем блоке сервера Nginx. Я просто добавляю этот блок

 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;
    }

затем запустите

 npm start

1. @Wilker на вашем серверном блоке nano /etc/nginx/sites-доступно/[имя конфигурации]

2. не могли бы вы поделиться своим опытом развертывания nextjs? я все еще застрял … надеюсь, вы сможете помочь. у меня есть сервер в DigitalOcean. Я изменил его на Nginx из Apache. Я понял, что Apache не может запустить приложение NodeJS. Не могли бы вы поделиться настройкой nginx conf для приложения nextjs, 1. есть ли у вас /etc/nginx/nginx.conf на вашем сервере? если да, не могли бы вы поделиться со мной, что это внутри. 2. /etc/nginx/sites-доступный серверный код. =)

3. вам не нужно обновлять файл /etc/nginx/nginx.conf, все, что вам нужно сделать, это правильно настроить виртуальную среду nginx для определенного домена. После настройки (ваш домен указан на вашем vps-сервере DigitalOcean) добавьте директиву location выше в /etc/nginx/sites-available/[your-configuration] . Затем выполните systemctl перезапуск nginx.

4. Спасибо за ваше время.. я бы попробовал .. спасибо!

5. Хулио, могу я узнать, где доступен корневой файл, который вы указываете в /etc/nginx/sites. например: root /var/www/ProjectName/html; индекс index.html index.htm index.ngin-dabian.html ; я хочу спросить, это html и индексный файл.. где должно быть правильно в приложении nextjs

Ответ №3:

Я предпочитаю pm2 запускать nextJs сервис и Nginx публиковать его

pm2 cmd:

 pm2 start yarn --name nextjs --interpreter bash -- start
pm2 show nextjs

Вы можете вставить эту конфигурацию в /etc/nginx/conf.d/your-file.config
/etc/nginx/nginx.config

 server {
    listen 80; # you can use 443 and letsencrypt to get SSL for free
    server_name dicom-interactive.com; # domain name
    access_log /var/log/dicom-interactive/access.log; # mkdir dir first
    error_log /var/log/dicom-interactive/error.log error;

    # for public asset into _next directory
    location _next/ {
        alias /srv/udemii-fe/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        # reverse proxy for next server
        proxy_pass http://localhost:8000; # your nextJs service and port
        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;

        # we need to remove this 404 handling
        # because next's _next folder and own handling
        # try_files $uri $uri/ =404;
    }
}