前言
记录下过程遇到的一些问题及修正知识;
之前用的nuxt 1.4, 仅做备忘录,有兴趣瞧瞧,没兴趣止步;
问题
开发模式正常,部署模式下找不到静态资源
因为我这边用的nginx, 这个需要配置下nginx静态资源识别
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ { expires 7d; access_log off; } location ~ .*\.(js|css)?$ { expires 7d; access_log off; }
css 背景图丢失的问题
样式background里的路径~/assets 改为 ~assets;
template的依旧文档那种写法~/assets
CentOS安装node-sass挂了的问题
不用scss的可以忽略
一开始以为是缺少编译环境,排查了下make这些都全,
最终发现还是墙的问题, 就这个模块走cnpm的源,顺利进行
在部署用户的个人目录下,操作如下
# 终端执行 , 就是写一个npm的环境配置文件 vim ~/.npmrc # 写入,这几个依赖走国内的cnpm源 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ electron_mirror=https://npm.taobao.org/mirrors/electron/ registry=https://registry.npm.taobao.org/
热部署问题
常规姿势
- 本地
git推送 -> 跑到线上拉取(没写钩子) - 打包(再次打包) :
nuxt build - 重启服务(
pm2重启服务) :pm2 restart id|name
而且在服务器上打包,CPU各种跑满 , 我稍微整理下,让维护更加可控一点
简化姿势
- 本地打包,本地
git提交, pm2部署,自动拉取,重载进程
直入主题,我用的nuxt + koa的搭配,其实这块也没涉及到koa这些
package.json
# start 里面的环境变量这些,我全部用`ecosystem`这种模式来配置,直观好维护 # deploy 是 "scripts": { "dev": "cross-env NODE_ENV=development HOST=0.0.0.0 nodemon server/index.js --watch server", "build": "nuxt build", "start": "node server/index.js", "generate": "nuxt generate" }
在项目根目录写一个ecosystem.config.js配置文件,
module.exports = { apps: [ { name: 'nuxt2-sx-share', script: 'npm', args: 'run start', watch: ['.nuxt'], // 监控输出目录 watch_options: { usePolling: true }, exec_mode:'cluster', env: { HOST: '0.0.0.0', PORT: 4444, NODE_ENV: 'development' }, env_production: { NODE_ENV: 'production', HOST: '0.0.0.0', PORT: 4444 }, output: './logs/console.log', error: './logs/consoleError.log' } ], deploy: { production: { // SSH user user: 'crper', // SSH host host: ['xxx'], // SSH options with no command-line flag, see 'man ssh' // can be either a single string or an array of strings ssh_options: 'StrictHostKeyChecking=no', // GIT remote/branch ref: 'origin/master', // GIT remote repo: 'git@git.coding.net:lqh/nuxt-sx-mobile-share.git', // path in the server path: '/data/xixi/nuxt-sx-mobile-share', // Pre-setup command or path to a script on your local machine 'pre-setup': 'ls -la', 'pre-deploy':'git pull', // deploy hook 'post-deploy': 'npm install && pm2 reload ecosystem.config.js --env production' } } }
整个配置文件分两部分: apps(启动应用的相关信息,环境变量,进程执行模式等) , deploy(部署区域)
SSH的配置和仓库信息这些就不说了
这里我们主要说下部署这块的,我的脚本用了三个钩子,初始化,预部署,及推送执行
pre-setup: 是用于初始化的时候调用的,我这里只是单纯的展示目录结构
pre-deploy: 部署之前,执行,这个钩子正常来说不用在这里git pull, 因为每次update都会拉取一变
post-deploy: 接受推送触发的钩子, 安装依赖及重载服务
写完这个配置文件,只要你服务器权限(包括用户组这些都正确配置),服务器需要预先安装pm2(启动服务);
我自己写了四个alias
#pm2 alias pm2init="pm2 deploy ecosystem.config.js production setup" alias pm2prod="pm2 deploy ecosystem.config.js production " alias pm2up="pm2 deploy ecosystem.config.js production update" alias pm2rev="pm2 deploy ecosystem.config.js production revert"
开始部署
本地安装一个全局的pm2
- 部署初始化 :
pm2init,这里会触发拉取项目,克隆到对应位置什么的,会产生share和source(代码在这里)
- 启动服务(若是第一步成功,里面会自动启动,否则手动启动下,排错):
pm2prod - 更新重载服务 :
pm2up
效果图
