前言

记录下过程遇到的一些问题及修正知识;

之前用的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: '[email protected]: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

效果图

Vue 折腾记 - (14) Nuxt.js 2 正式版升级采坑以及部署姿势改动

官方部署文档

ecosystem可配置项

总结

你问我为什么不做持续化集成…有条件谁不想搞?

有不对之处可以留言,会及时修正,谢谢阅读