如何使用NGINX部署NextJS？

Question

所以我知道如何在服务器上部署一个React应用程序。

/var/www/xfolder/build;)

• systemctl
• 创建服务器块，并将根指向my react应用程序文件夹构建(root、重新启动nginx
• 、运行我的节点服务器(nohup节点服务器&)及其done.

)。

我觉得不理解NextJS的这一点有点愚蠢。我运行npm运行构建

​

我在期待类似于构建文件夹的东西。我尝试过将服务器块根目录设置为/var/www/xfolder/.next，但是页面仍然禁止使用403。我需要运行npm运行启动吗？我对如何正确部署应用程序感到困惑。我在DigitalOcean中使用Ubuntu，DigitalOcean (1gb液滴)。

Answer 1

检查这个：https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153

HTTP/HTTPS：https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153参考

在端口8080上启动PM2 nextJS服务：

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

Answer 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

​

​

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