Nuxt.js项目部署

需求

Nuxt.js项目，服务器端框架使用的是Koa。根目录下的config/目录做了多环境相关配置

package.json文件的scripts部分配置如下：

{
  // ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development env_config=dev nodemon server/index.js --watch server",
    "build:sit": "cross-env NODE_ENV=production env_config=sit nuxt build",
    "start:sit": "cross-env NODE_ENV=production env_config=sit node server/index.js",
    "generate:sit": "cross-env NODE_ENV=production env_config=sit nuxt generate",
    "build:prod": "cross-env NODE_ENV=production env_config=prod nuxt build",
    "start:prod": "cross-env NODE_ENV=production env_config=prod node server/index.js",
    "generate:prod": "cross-env NODE_ENV=production env_config=prod nuxt generate"
  },
  // ...
}

部署到CentOS服务器上面，使用Nginx做反向代理

步骤

yum安装nodejs

yum方式安装nodejs、npm

node -v
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install nodejs -y
node -v
npm -v
npm i vue-cli -g

源码安装nodejs

也可以使用源码方式安装nodejs、npm

• 到nodejs官方网站找到对应的源码包地址

• 使用wget下载

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz

• 解压包

tar -xvf node-v12.13.1-linux-x64.tar.xz

• 移动到/usr/local/目录下，并改名（不改名也可以，随意）

mv node-v12.13.1-linux-x64 /usr/local/
# 移动 node-v12.13.1-linux-x64 这个目录到 /usr/local/ 目录下
# 移动文件夹的话就不要再加 / 了
# 如果是移动文件夹下的所有文件的话就可以文件夹后面跟上 /*
cd /usr/local
mv node-v12.13.1-linux-x64/ nodejs

• 让npm和node命令全局生效

方式一：环境变量方式（这种方式似乎只对登录用户有效？）

1)、加入环境变量，在 /etc/profile 文件末尾增加配置

vim /etc/profile
export PATH=$PATH:/usr/local/nodejs/bin

2)、执行命令使配置文件生效

source /etc/profile

方式二：软链接方式（推荐）

ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
ln -s /usr/local/nodejs/bin/node /usr/local/bin/

• 查看nodejs是否安装成功

node -v
npm -v

文件上传

将项目文件上传到服务器项目目录下，比如：/data/www/culture

需要上传的目录和文件

• .nuxt/：使用npm run build:prod打包生成的
• config/：多环境配置目录，没有的话忽略
• server/：服务器端不使用默认的Nuxt框架的话，会有此目录
• static/：静态文件目录
• nuxt.config.js：nuxt的配置文件
• package.json：配置文件

Nginx配置

Nginx安装自行搜索。这里使用的是Tengine

虚拟主机配置如下：

upstream nodenuxt {
	server 127.0.0.1:3000;
	keepalive 64;
}

server {
	listen 80;
	server_name xxx.xxx.com;
	location / {
		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-Nginx-Proxy true;
		proxy_cache_bypass $http_upgrade;
		proxy_pass http://nodenuxt;
	}
}

启动项目

• 切换到项目目录下，安装所需插件npm i
• 执行命令启动：npm run start:prod
• 浏览器中输入对应的域名就可以访问了

pm2进程守护

上述方式进程不能常驻内存。
使用pm2守护进程

• 安装pm2：npm i pm2 -g
• 切换到项目目录下，执行命令：pm2 start npm --name "culture" -- run start:prod

备注

• culture：项目名称，就是package.json文件中的name值
• run start:prod：就是执行package.json文件中的scripts配置的命令start:prod

• 启动后可以用pm2 list命令查看进程列表

pm2常用命令

• pm2 list：查看当前正在运行的进程
• pm2 start all ：启动所有应用
• pm2 restart all ：重启所有应用
• pm2 stop all：停止所有的应用程序
• pm2 delete all：关闭并删除所有应用
• pm2 logs：控制台显示所有日志
• pm2 start 0 ：启动id为0的指定应用程序
• pm2 restart 0 ：重启id为0的指定应用程序
• pm2 stop 0：停止id为0的指定应用程序
• pm2 delete 0：删除id为0的指定应用程序
• pm2 logs 0：控制台显示编号为0的日志
• pm2 show 0 ：查看执行编号为0的进程
• pm2 monit jsyfShopNuxt：监控名称为jsyfShopNuxt的进程