如何在 Ubuntu 22.04 上安装 Next.js
Next.js 是一个免费、开源和生产级的 React 应用程序，它为您提供构建块来创建超快且极其用户友好的 Web 应用程序。 它由 Vercel 创建，支持基于 React 的 Web 应用程序进行服务器端渲染并生成静态网站。 Next.js 可以处理 React 所需的所有配置，并为您的应用程序提供附加功能和优化。
本教程将向您展示如何在 Ubuntu 22.04 上使用 Nginx 作为反向代理安装 Next.js。
先决条件
- 运行 Ubuntu 22.04 的服务器。
- 有效域名指向您的服务器 IP。
- 服务器上配置了 root 密码。
安装 Node.js
在开始之前，必须在您的服务器上安装 Node.js。 首先，使用以下命令安装所有必需的依赖项：
apt install curl gnupg2 wget -y
接下来，使用以下命令添加 Node.js 存储库：
curl -sL https://deb.nodesource.com/setup_18.x | bash -
添加存储库后，您可以使用以下命令安装 Node.js：
apt install nodejs -y
安装后，使用以下命令验证 Node.js 版本：
node -v
您应该看到以下输出：
v18.12.1
您还可以使用以下命令验证 NPM 版本：
npm -v
您应该看到以下输出：
8.19.2
创建 Next.js 应用程序
您可以使用 npx 工具创建 Next.js 应用程序。 npx 是一个 CLI 工具，可以轻松安装和管理 npm 注册表中托管的依赖项。
运行以下命令创建名为 nextapp 的 Next.js 应用程序：
npx create-next-app nextapp
您应该得到以下输出：
Need to install the following packages: [email protected] Ok to proceed? (y) y ? Would you like to use TypeScript with this project? … No / Yes ? Would you like to use ESLint with this project? … No / Yes Creating a new Next.js app in /root/nextapp. Using npm. Installing dependencies: - react - react-dom - next - typescript - @types/react - @types/node - @types/react-dom - eslint - eslint-config-next added 237 packages, and audited 238 packages in 20s 78 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initializing project with template: default Success! Created nextapp at /root/nextapp
完成后，您可以继续下一步。
运行 Next.js 应用程序
创建 Next.js 应用程序后，将目录更改为 nextapp 并使用以下命令运行它：
cd nextapp
npm run dev
您将得到以下输出：
> [email protected] dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 event - compiled client and server successfully in 3.2s (154 modules) Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry
按 CTRL+C 停止应用程序。 然后，使用以下命令构建应用程序：
npm run build
您将得到以下输出：
> [email protected] build > next build info - Linting and checking validity of types info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Generating static pages (3/3) info - Finalizing page optimization Route (pages) Size First Load JS ? ? / 4.83 kB 83.7 kB ? ? css/ae0e3e027412e072.css 707 B ? /_app 0 B 78.9 kB ? ? /404 212 B 79.1 kB ? λ /api/hello 0 B 78.9 kB + First Load JS shared by all 79.2 kB ? chunks/framework-0f397528c01bc177.js 45.7 kB ? chunks/main-5cebf592faf0463a.js 31.8 kB ? chunks/pages/_app-05f53d08443c56f6.js 402 B ? chunks/webpack-2369ea09e775031e.js 1.02 kB ? css/ab44ce7add5c3d11.css 247 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ? (Static) automatically rendered as static HTML (uses no initial props)
接下来，使用以下命令启动 Next.js 应用程序：
npm start
您应该看到以下输出：
> [email protected] start > next start ready - started server on 0.0.0.0:3000, url: http://localhost:3000
按 CTRL+C 停止应用程序。
使用 PM2 管理 Next.js 应用程序
PM2 是用于生产 Node.js 应用程序的高级流程管理器。 它允许您使应用程序永远保持活力。
要安装 PM2，请运行以下命令：
npm install pm2@latest -g
接下来，通过运行以下命令使用 PM2 启动 Next.js 应用程序：
pm2 start "npm start"
您将得到以下输出：
[PM2] Starting /usr/bin/bash in fork_mode (1 instance) [PM2] Done. ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? id ? name ? namespace ? version ? mode ? pid ? uptime ? ? ? status ? cpu ? mem ? user ? watching ? ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? 0 ? npm start ? default ? N/A ? fork ? 1321 ? 0s ? 0 ? online ? 0% ? 24.5mb ? root ? disabled ? ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
此时，Next.js应用程序已启动并监听端口3000。您可以使用以下命令进行检查：
ss -antpl | grep 3000
您将看到以下输出：
LISTEN 0 511 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=1337,fd=18))
您还可以使用以下命令检查 Next.js 应用程序的状态：
pm2 show "npm start"
您将得到以下输出：
Describing process with id 0 - name npm start ??????????????????????????????????????????????????????????? ? status ? online ? ? name ? npm start ? ? namespace ? default ? ? version ? N/A ? ? restarts ? 0 ? ? uptime ? 59s ? ? script path ? /usr/bin/bash ? ? script args ? -c npm start ? ? error log path ? /root/.pm2/logs/npm-start-error.log ? ? out log path ? /root/.pm2/logs/npm-start-out.log ? ? pid path ? /root/.pm2/pids/npm-start-0.pid ? ? interpreter ? none ? ? interpreter args ? N/A ? ? script id ? 0 ? ? exec cwd ? /root/nextapp ? ? exec mode ? fork_mode ? ? node.js version ? N/A ? ? node env ? N/A ? ? watch & reload ? ? ? ? unstable restarts ? 0 ? ? created at ? 2022-11-12T13:30:39.734Z ? ??????????????????????????????????????????????????????????? Divergent env variables from local env Add your own code metrics: http://bit.ly/code-metrics Use `pm2 logs npm start [--lines 1000]` to display logs Use `pm2 env 0` to display environment variables Use `pm2 monit` to monitor CPU and Memory usage npm start
完成后，您可以继续安装和配置 Nginx。
将 Nginx 配置为 Next.js 应用程序的反向代理
最好安装并配置 Nginx 作为反向代理来访问 Next.js 应用程序。
首先，使用以下命令安装 Nginx 软件包：
apt install nginx -y
安装 Nginx 后，创建 Nginx 虚拟主机配置文件：
nano /etc/nginx/conf.d/next.conf
添加以下配置：
server {
server_name next.example.com;
location / {
# Reverse proxy for Next server
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_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;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
保存并关闭文件。 然后，验证 Nginx 是否有任何语法配置错误：
nginx -t
您应该看到以下输出：
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
接下来，重新启动 Nginx 服务以应用更改：
systemctl restart nginx
您还可以使用以下命令检查 Nginx 的状态：
systemctl status nginx
您应该看到以下输出：
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2022-11-12 13:35:46 UTC; 6s ago
Docs: man:nginx(8)
Process: 2023 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 2024 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 2025 (nginx)
Tasks: 3 (limit: 464122)
Memory: 3.3M
CGroup: /system.slice/nginx.service
??2025 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
??2026 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
??2027 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Nov 12 13:35:46 ubuntu22041 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 12 13:35:46 ubuntu22041 systemd[1]: Started A high performance web server and a reverse proxy server.
完成后，您可以继续下一步。
访问 Next.js Web 应用程序
至此，Next.js 应用程序已安装并使用 Nginx 配置。 您现在可以使用 URL http://next.example.com 访问它。 您应该在以下屏幕上看到 Next.js 网页：
结论
恭喜 您已在 Ubuntu 22.04 上成功安装了带有 Nginx 的 Next.js 应用程序。 您现在可以使用 Next.js 框架加快您的开发过程。 如果您有任何疑问，请随时问我。
资讯来源：由0x资讯编译自HOWTOFORGE，版权归作者所有，未经许可，不得转载
资讯来源：由a0资讯编译自THECOINREPUBLIC。版权归作者A0资讯所有，未经许可，不得转载
