在 Ubuntu 18.04 上使用 PM2、Nginx 和 Yarn 设置 Next.js 项目 安装 Nginx 在 Ubuntu 上安装 Yarn

2025-06-07

在 Ubuntu 18.04 上使用 PM2、Nginx 和 Yarn 设置 Next.js 项目

安装 Nginx

在 Ubuntu 上安装 Yarn

最近，我得把一个 Next.js 项目部署到 Ubuntu 服务器。操作很简单，但你可能会遇到一些小问题。

我们倾向于在 Now 上部署项目，因为它非常方便，但有时您可能需要将项目部署到您自己的服务器上。这是一个简短的教程，教您如何快速轻松地搭建工作环境。

我们倾向于在 Now 上部署项目，因为它非常方便，但有时您可能需要将项目部署到您自己的服务器上。这是一个简短的教程，教您如何快速轻松地搭建工作环境。

  1. 安装 Nginx
  2. 安装 Yarn
  3. 安装 PM2
  4. 使用 Git 从 Github 获取我们的 Next.js 项目
  5. 使用 PM2 运行我们的项目，并使用 Nginx 提供可浏览的版本
  6. 每当我们启动/重启机器时自动运行 PM2

安装 Nginx

sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

在 Ubuntu 上安装 Yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
Enter fullscreen mode Exit fullscreen mode

在您的机器上全局安装 PM2

yarn global add pm2
Enter fullscreen mode Exit fullscreen mode

从 Github 获取项目仓库并安装所有依赖项

git clone github:<YOUR_ORGANIZATION>/<YOUR_PROJECT> project
cd project
yarn install
Enter fullscreen mode Exit fullscreen mode

注意：如果您的最新代码位于不同的分支中，则需要检出该分支，因此如果您的代码位于名为的分支中，development则需要运行git checkout development

注意：yarn install你必须运行后yarn build才能获得可运行的 Next.js 应用程序版本

使用 Yarn 和 PM2 启动 Next.js 项目

我们的package.json样子是这样的

{
  "name": "nextjs-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start -p 8000",
    "test": "NODE_ENV=test jest",
    "test:watch": "NODE_ENV=test jest --watch",
    "test:coverage": "NODE_ENV=test jest --coverage",
    "test:cypress": "NODE_ENV=test cypress open",
    "lint": "eslint .",
    "lint:watch": "esw . --watch --cache",
    "lint:watchAll": "esw . --watch",
    "circleci:run": "circleci local execute --job $JOB"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/willandskill/nextjs-example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/willandskill/nextjs-example/issues"
  },
  "homepage": "https://github.com/willandskill/nextjs-example#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

我们还有一些额外的内容，您现在可以忽略它们package.json。对我们来说重要的一行"start": "next start -p 8000"在下面scripts，为了从命令行运行它，我们会运行，yarn start但如果我们希望 PM2 为我们运行它，我们需要运行pm2 start yarn --name "nextjs" --interpreter bash -- start

要运行我们的 Next.js 项目并查看进程是否启动，我们需要运行以下命令

pm2 start yarn --name "nextjs" --interpreter bash -- start
pm2 show nextjs
Enter fullscreen mode Exit fullscreen mode

输出应该是这样的

root@willandskill-example:# pm2 show nextjs
 Describing process with id 0 - name nextjs
┌───────────────────┬──────────────────────────────────┐
│ status            │ online                           │
│ name              │ nextjs                           │
│ version           │ N/A                              │
│ restarts          │ 2                                │
│ uptime            │ 93m                              │
│ script path       │ /usr/bin/yarn                    │
│ script args       │ start                            │
│ error log path    │ /root/.pm2/logs/nextjs-error.log │
│ out log path      │ /root/.pm2/logs/nextjs-out.log   │
│ pid path          │ /root/.pm2/pids/nextjs-0.pid     │
│ interpreter       │ bash                             │
│ interpreter args  │ N/A                              │
│ script id         │ 0                                │
│ exec cwd          │ /root/project                    │
│ exec mode         │ fork_mode                        │
│ node.js version   │ N/A                              │
│ node env          │ N/A                              │
│ watch & reload    │ ✘                                │
│ unstable restarts │ 0                                │
│ created at        │ 2019-03-13T15:02:40.278Z         │
└───────────────────┴──────────────────────────────────┘
 Add your own code metrics: http://bit.ly/code-metrics
 Use `pm2 logs next [--lines 1000]` to display logs
 Use `pm2 env 0` to display environement variables
 Use `pm2 monit` to monitor CPU and Memory usage next
Enter fullscreen mode Exit fullscreen mode

如果您想实时监控正在发生的事情，可以运行该命令。如果您想查看 实时生成的pm2 monit日志，或者查看您的硬件资源在正常/繁忙流量下的利用情况，这个命令非常方便。

pm2 monit
Enter fullscreen mode Exit fullscreen mode

如何部署新版本

git pull
yarn install
yarn build
pm2 restart nextjs
Enter fullscreen mode Exit fullscreen mode

设置基本的 Nginx 配置文件

# /etc/nginx/sites-available/nextjs-example.willandskill.eu

server {
    server_name nextjs-example.willandskill.eu;
    access_log /opt/nextjs/logs/access.log;
    error_log /opt/nextjs/logs/error.log error;

    location /_next/ {
        alias /opt/nextjs/project/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        # reverse proxy for next server
        proxy_pass http://localhost:8000;
        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;
    }
}
Enter fullscreen mode Exit fullscreen mode

这个 Nginx 配置文件中最重要的一行是将流量映射到块下的http://localhost:8000行。proxy_pass http://localhost:8000;location /

如果你希望 PM2 在启动时启动

pm2 startup
Enter fullscreen mode Exit fullscreen mode

您还可以运行以下命令来冻结您想要在启动时运行的进程

pm2 save
Enter fullscreen mode Exit fullscreen mode

本文最初发表于Will & Skill 博客 - 在 Ubuntu 18.04 上使用 PM2、Nginx 和 Yarn 设置 Next.js 项目

文章来源：https://dev.to/reactstockholm/setup-a-next-js-project-with-pm2-nginx-and-yarn-on-ubuntu-18-04-22c9
Devto 翻译
PREV
像我五岁一样解释 CI/CD。
NEXT
你应该关注的 21 个 React YouTube 频道