Nuxt.js
普通的vue单页面应用渲染都是从服务器获取所需js、css,在客户端解析成html挂在到根DOM元素上,这样会造成网站的首屏加载过慢。对于一些内容性网站来说,不利于搜索引擎专区网站内容,也就是不利于SEO。Nuxt.js是一个基于Vue.js的通用应用框架,预设了利用 Vue 开发服务端渲染的应用所需要的各种配置,完美的解决了vue的这两个缺点,页面都是通过服务端渲染生成后输出给客户端,直接以静态资源的形式输出给搜索引擎。下面就简单的介绍一下如何讲Nuxt.js项目部署到服务器。
1、服务器环境
node -v npm -v pm2 -v nginx -v
2、项目打包
npm run build
打包完成后,讲
.nuxt static nuxt.config.js package.jsos
上传到服务器放置项目的文件夹内。
3、在服务器上运行
npm install // 安装依赖包 npm start // 运行
4、nginx配置
假如Nuxt.js项目的端口是3000,那nginx配置如下:
upstream nodenuxt { server 127.0.0.1:3000; #nuxt项目 监听端口 keepalive 64; } server { listen 80; server_name yoursite.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; #反向代理 } }
5、最后可以在浏览器访问yoursite.com了
6、PM2开启进程守护
项目总是会挂掉,浏览器就不能正常访问网站,那我们就使用PM2,当进程死掉,就会自动重启
pm2 start npm -- run start
PM2
PM2 是node的进程管理工具,可以性能监控、自动重启、负载均衡,使用的方法也很简单。
1、安装
npm install -g pm2
2、常用命令
// 启动服务 pm2 start app.js //启动app.js应用 pm2 start app.js --name demo //启动应用并设置name pm2 start app.sh //脚本启动 // 启动的参数说明 --watch:监听应用目录的变化,一旦发生变化,自动重启。如果要精确监听、不见听的目录,最好通过配置文件。 -i --instances:启用多少个实例,可用于负载均衡。如果-i 0或者-i max,则根据当前机器核数确定实例数目。 --ignore-watch:排除监听的目录/文件,可以是特定的文件名,也可以是正则。比如--ignore-watch="test node_modules "some scripts"" -n --name:应用的名称。查看应用信息的时候可以用到。 -o --output <path>:标准输出日志文件的路径。 -e --error <path>:错误输出日志文件的路径。 --interpreter <interpreter>:the interpreter pm2 should use for executing app (bash, python...)。比如你用的coffee script来编写应用。 eg: pm2 start app.js --watch -i 2 // 开启自动重启、2个进程 // 停止服务 pm2 stop all //停止所有应用 pm2 stop [AppName] //根据应用名停止指定应用 pm2 stop [ID] //根据应用id停止指定应用 // 删除应用 pm2 delete all //关闭并删除应用 pm2 delete [AppName] //根据应用名关闭并删除应用 pm2 delete [ID] //根据应用ID关闭并删除应用 // 创建开机自启 pm2 startup // 更新PM2 pm2 updatePM2 pm2 update // 监听模式 pm2 start app.js --watch //当文件发生变化,自动重启 // 重新启动 pm2 restart app.js //同时杀死并重启所有进程。短时间内服务不可用。生成环境推荐使用reload // 静态服务器 pm2 serve ./dist 9090 //将目录dist作为静态服务器根目录,端口为9090 // 自动负载均衡 pm2 start app.js -i 3 # 开启三个进程 pm2 start app.js -i max # 根据机器CPU核数,开启对应数目的进程 // 查看启动列表 pm2 list // 查看每个应用程序占用情况 pm2 monit // 显示应用程序所有信息 pm2 show [Name] //根据name查看 pm2 show [ID] //根据id查看 // 日志查看 pm2 logs //查看所有应用日志 pm2 logs [Name] //根据指定应用名查看应用日志 pm2 logs [ID] //根据指定应用ID查看应用日志 // 保存当前应用列表 pm2 save // 重启保存的应用列表 pm2 resurrect // 清除保存的应用列表 pm2 cleardump // 保存并恢复PM2进程 pm2 update // 生成示例配置文件 pm2 ecosystem //生成一个示例JSON配置文件 pm2 init
还没有评论,来说两句吧...