Xiaochao : 最近、パッケージ化して展開する必要があるプロジェクトを書きましたが、最初に動作環境を構成する必要があるため、このプロセスは非常に面倒です。pm2 を使用してプロジェクトの運用を管理するには、サーバーに pm2 をインストールする必要があり、npm コマンドを使用して pm2 をインストールするのが最も便利であるため、ノード環境をダウンロードする必要があります。それでは、Nuxt3 プロジェクトを段階的にアップロードする完全なプロセスを完了させましょう。実機運用成功のデモンストレーションでもありますので、ぜひご一読ください。開発環境は Windows、展開環境は Linux です。開発ツールは VSCode、デプロイ サーバーは Alibaba Cloud です。
- 1.サーバーのインストールnodejs環境
- 2.Nuxt3の運用管理ツールpm2をインストール
- 3. Nuxt3 プロジェクトをパッケージ化し、サーバーにアップロードする
- 4. ecosystem.config.js ファイルを構成する
- 5. pm2 を使用して Nuxt3 プロジェクトを開始します
- 6.よく使うpm2コマンド
- エッセイ
1.サーバーのインストールnodejs環境
1. インストール パッケージをダウンロードする
# 随便找个地方（注意：源地址只会保存最新稳定的小版本，可以访问https://nodejs.org/dist/这个地址选择源）
wget https://nodejs.org/dist/latest-v18.x/node-v18.12.0-linux-x64.tar.gz
2. nodejs フォルダーを作成し、解凍して現在のディレクトリに配置します。
# 解压到当前文件夹
tar -zxvf node-v18.12.0-linux-x64.tar.gz
# 将解压文件夹里面的内容移动到指定文件路径，便于自己识别管理
mv node-v18.12.0-linux-x64 /usr/local/node
3. 環境変数を構成する
vim /etc/profile
# 末尾添加如下几行
# nodejs环境
export NODEJS=/usr/local/node
export PATH=$NODEJS/bin:$PATH
# 重新加载配置
source /etc/profile
# 进入/usr/local/node/bin查看版本
cd /usr/local/node/bin
node -v
18.12.0
4. ソフト リンクを確立します（グローバルに使用可能なノード コマンドを設定します）。
cd /usr/bin
ln -s /usr/local/node/bin/node node
ln -s /usr/local/node/bin/npm npm
5. タオバオ ミラーの設定
npm config set registry=https://registry.npmmirror.com/
6. 切り替えが成功したかどうかを確認する
npm config get registry
2.Nuxt3の運用管理ツールpm2をインストール
pm2 をグローバルにインストールする
npm install pm2 -g
3. Nuxt3 プロジェクトをパッケージ化し、サーバーにアップロードする
1.パック
yarn build
// or
npm run build
2.アップロードサーバー
フォルダ、フォルダ、および を含むフォルダ.oupputを生成します。以下は主にいくつかの静的リソース ファイルを置きます。次はスタートアップ エントリ ファイルです。私たちがしなければならないことは、内部の、デモ用に新しいフォルダーを作成したことです。（もちろん直接入れる）publicservernitro.jsonpublicserverindex.js.outputnuxt3-app.output
ファイルを Alibaba Cloud サーバーにアップロードする公式の方法: WinSCP を使用して Linux クラウド サーバーにファイルをアップロードします(もちろん、他の方法も使用できます)。
4. ecosystem.config.js ファイルを構成する
公式のプロンプトによると、
pm2管理、ecosystem.config.jsルート ディレクトリにファイルを構成する必要があります (公式の手順)。
新しい ecosystem.config.js を作成し、プロジェクトのルート ディレクトリに配置します。
module.exports = {
apps: [
{
name: 'NuxtAppName', // 设置启动项目名称
exec_mode: 'cluster',
instances: 'max',
// 注意这里的相对路径。要访问到index.mjs就行了，如果你是整个.output一起放在服务器的话就和官方一样路写成./.output/server/index.mjs就好了
script: './server/index.mjs'
}
]
}
プロジェクトの構造:
[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# ll
total 16
-rw-r--r-- 1 root root 175 Nov 1 23:24 ecosystem.config.js
-rw-r--r-- 1 root root 129 Nov 1 23:24 nitro.json
drwxr-xr-x 3 root root 4096 Nov 1 23:23 public
drwxr-xr-x 4 root root 4096 Nov 1 23:24 server
5. pm2 を使用して Nuxt3 プロジェクトを開始します
1. ルートディレクトリ直下でコマンドを実行
pm2 start ecosystem.config.js
# 然后使用下边的命令看一下启动的服务列表
pm2 list
[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# pm2 start ecosystem.config.js
[PM2] Applying action restartProcessId on app [NuxtAppName](ids: [ 0 ])
[PM2] [NuxtAppName](0) ✓
┌─────┬────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │
├─────┼────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0 │ NuxtAppName │ default │ 0.0.0 │ cluster │ 1300 │ 0s │ 0 │ online │ 0% │ 21.3mb │ root │ disabled │
└─────┴────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
[root@iZwz9d9v06uh0jnrexcuk9Z sunnybook-nuxt3]# pm2 list
┌─────┬────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │
├─────┼────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0 │ NuxtAppName │ default │ 0.0.0 │ cluster │ 1300 │ 10s │ 0 │ online │ 0% │ 30.9mb │ root │ disabled │
└─────┴────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
Online は起動が成功したことを示します.このとき、ブラウザでプロジェクトを見れば、正常にアクセスできます.
2. 自動再起動の設定
pm2 startup
[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# pm2 startup
[PM2] Init System found: systemd
Platform systemd
Template
[Unit]
Description=PM2 process manager
Documentation=https://pm2.keymetrics.io/
After=network.target
[Service]
Type=forking
User=root
LimitNOFILE=infinity
LimitNPROC=infinity
LimitCORE=infinity
Environment=PATH=/usr/local/node/bin:/usr/java/jdk1.8.0_281/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin
Environment=PM2_HOME=/root/.pm2
PIDFile=/root/.pm2/pm2.pid
Restart=on-failure
ExecStart=/usr/local/node/lib/node_modules/pm2/bin/pm2 resurrect
ExecReload=/usr/local/node/lib/node_modules/pm2/bin/pm2 reload all
ExecStop=/usr/local/node/lib/node_modules/pm2/bin/pm2 kill
[Install]
WantedBy=multi-user.target
Target path
/etc/systemd/system/pm2-root.service
Command list
[ 'systemctl enable pm2-root' ]
[PM2] Writing init configuration in /etc/systemd/system/pm2-root.service
[PM2] Making script booting at startup...
[PM2] [-] Executing: systemctl enable pm2-root...
[PM2] [v] Command successfully executed.
+---------------------------------------+
[PM2] Freeze a process list on reboot via:
$ pm2 save
[PM2] Remove init script via:
$ pm2 unstartup systemd
[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]#
サーバーに障害が発生したり再起動したりすると、pm2 サービスはステータスを記録して自動的に再起動できます。手動で pm2 サービスを再起動する必要はありません。
3. サービス ステータスを表示する
pm2 list
6.よく使うpm2コマンド
| 注文 | 使用 |
|---|---|
| pm2リスト | 開始されたサービスのリストを表示する |
| pm2ショーID番号 | ID番号に対応する詳細なサービス状況を確認 |
| pm2起動名(サービス名) | サービス開始 |
| pm2ストップ名（サービス名） | サービスを終了する |
| pm2 再起動名 (サービス名) | サービスを再開する |
| pm2 削除名 (サービス名) | サービスを削除 |
| pm2 kill name (サービス名) | キルサービス |
| pm2 ログ名 (サービス名) | サービス実行ログを表示 |
| pm2 ログ名 (サービス名) | サービスログを表示 |
エッセイ
