如何使用 NGINX 部署 NextJS?
Posted
技术标签:
【中文标题】如何使用 NGINX 部署 NextJS?【英文标题】:How to deploy NextJS with NGINX? 【发布时间】:2021-01-30 19:59:27 【问题描述】:所以我知道如何在服务器上部署 React 应用程序。
npm 运行构建 创建一个服务器块并将根目录指向我的 react app 文件夹构建 (root /var/www/xfolder/build;) systemctl 重启 nginx 运行我的节点服务器(nohup 节点服务器 &&)并完成。对于 NextJS 不理解这一点,我感到有点愚蠢。我运行 npm run build
我期待像构建文件夹这样的东西。我尝试将服务器块根设置为 /var/www/xfolder/.next 但页面仍然给出 403 禁止。我需要运行 npm run start 吗?我对如何正确部署应用程序感到困惑。我在 DigitalOcean 中使用 Ubuntu、NginX (1gb droplet)。
【问题讨论】:
【参考方案1】:我设法让它工作。问题出在我的 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
【讨论】:
@Wilker on your serverblock nano /etc/nginx/sites-available/[name-of-config] 您能分享一下您的经验如何部署nextjs吗?我现在卡住了……希望你能帮忙。我在 digitalOcean 有一个服务器。我把它从 Apache 改成了 Nginx。我意识到 Apache 无法运行 nodeJs App。您能否分享一下 nextjs 应用程序的 nginx conf 设置,1. 您的服务器中有 /etc/nginx/nginx.conf 吗?如果是的话,你能分享一下里面是什么吗? 2. /etc/nginx/sites-可用的服务器代码。 =) 你不需要更新你的/etc/nginx/nginx.conf,你需要做的是为特定域正确设置你的nginx虚拟环境。设置后(您的域指向您的 DigitalOcean vps 服务器),在 /etc/nginx/sites-available/[your-configuration] 上添加上面的位置指令。然后执行 systemctl restart nginx. 感谢您的宝贵时间..我会试试看..谢谢! Julio,我可以知道您在 /etc/nginx/sites-available 中指向的根文件的位置。例如:根 /var/www/projectName/html; index index.html index.htm index.ngin-d***.html;我想问的是html和索引文件.. nextjs App中应该是正确的地方【参考方案2】:我更喜欢pm2
来启动nextJs
服务和Nginx
来发布它
pm2 命令:
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;
【讨论】:
【参考方案3】:检查这个:https://gist.github.com/ZaHuPro/2ecdb934a7362e979e3aa5a92b181153
HTTP/HTTPS 参考:https://gist.github.com/ZaHuPro/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;
【讨论】:
以上是关于如何使用 NGINX 部署 NextJS?的主要内容,如果未能解决你的问题,请参考以下文章
从零搭建一个基于React+Nextjs的SSR网站:如何搭建服务器并部署Nextjs项目