最近这几年前端三大框架横行,包括本人也一直在用Vue这个框架,但因为spa的原因,如果只是单单做系统之类的还好,但是在做门户类等需要SEO的站点时候,往往不尽人意,这时候就该上nuxt.js了。
这篇教程是基于ubuntu 18.04 系统下的nuxt部署方法。
搭建nginx+node+npm+pm2环境
nginx版本1.14.0
pm2版本3.5.1
node版本v10.11.0
npm版本6.4.1
1、安装nginx
更新源
sudo apt-get update
安装
sudo apt-get install nginx
如果忘记了nginx程序目录,可以执行:
whereis nginx
Nginx如果指定默认加载/etc/nginx/nginx.conf
的配置文件。如果要查看加载的是哪个配置文件,可以用这个命令sudo nginx -t
或者ps -ef | grep nginx
nginx的使用方法
sudo service nginx {start | stop | restart | reload | force-reload | status | configtest | rotate | upgrade }
2、安装node+npm
下载node
cd /usr/local/src/
wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz
解压
xz -d node-v10.11.0-linux-x64.tar.xz
tar -xvf node-v10.11.0-linux-x64.tar
重命名
mv node-v10.11.0-linux-x64 node
环境变量
打开文件后键盘输入 i 即可开始编辑
vim ~/.bash_profile
PATH=$PATH:$HOME/bin:/usr/local/src/node/bin
改完按键盘左上角Esc键并输入 :wq (冒号+w+q,不要掉了冒号)
最后编译刚刚修改的文件
source ~/.bash_profile
安装完成测试
node -v
npm -v
第二种安装方法
apt-get 安装 nodejs
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
node -v
安装最新的 node v10.x
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm镜像替换为淘宝镜像 #得到原本的镜像地址
npm get registry
#设成淘宝的
npm config set registry http://registry.npm.taobao.org/
#换成原来的
npm config set registry https://registry.npmjs.org/
3、安装pm2
npm i -g pm2
自启动
pm2 startup
pm2 save
4、设置nginx代理
nginx代理设置
server {
listen 80;
server_name test.rdf.banjiajia.com;
`静态资源目录(不转发),服务器没开启gzip的话不要添加这个`
location /_nuxt{
alias /var/www/xue_deploy/.nuxt/dist/client;
}
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://127.0.0.1:3333; #反代理地址,端口是nuxt项目所用到的端口
}
}
5、nuxt打包上传
npm run build
把 nuxt.config.js package.json static .nuxt 上传到服务器项目文件夹 列入: /var/www/nuxt
进入项目目录安装依赖
cd /var/www/nuxt
npm i
用pm2运行项目
cd /var/www/nuxt
pm2 start npm --name "my-nuxt" -- run start
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的进程
这样之后就可以愉快的去玩耍了!!^.^!
一般更新维护流程
进入文件目录,停止和删除项目,遍历文件,删除内容
pm2 list
pm2 delete id
rm -r node_modules nuxt.config.js package.json package-lock.json static
重新上传新打包的文件然后,安装依赖并开启项目'rdf-nuxt''
npm i
pm2 start npm --name "rdf-nuxt" -- run start
关于集群
pm2 的 cluster模式可以支持同一个端口,集群多个实例(一个核心起一个实例,如果是单核的服务器就没法了)
在项目根目录 pm2 init 发现生成了一个 ecosystem.config.js
vi ecosystem.config.js
module.exports = {
apps : [{
name: 'nuxt-app',
script: './node_modules/nuxt/bin/nuxt.js', // 不能用npm run start 的命令,会报错端口占用
args: 'start',
// Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
instances: 2, // 几个实例也可以填 'max' 服务器最大支持的实例
exec_mode: 'cluster',
autorestart: true,
watch: false,
max_memory_restart: '1G', // 我的服务器是1g内存,当超过1g内存,会重启
env: {
NODE_ENV: 'development'
},
env_production: {
NODE_ENV: 'production'
}
}]
};
编辑保存完之后,
pm2 start
使用
pm2 list
查看当前状态
测试,如何测试两个实例都在正常工作, 我们pm2 list, 可以看到当前的node进程状态,现在我们发现有两个,0 和 1,此时我们试着pm2 stop 0 ,关掉第一个,看还能不能访问,同样的方法关掉1,打开0,如果都是正常的,那就说明我们部署成功了。