综合技术

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

微信扫一扫,分享到朋友圈

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

版权声明:版权所有:CRPER(crper@outlook.com); 掘金|Github:CRPER; https://blog.csdn.net/bomess/article/details/82912962

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

之前用的 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 ,这里会触发拉取项目,克隆到对应位置什么的,会产生 sharesource (代码在这里)
  • 启动服务(若是第一步成功,里面会自动启动,否则手动启动下,排错): pm2prod
  • 更新重载服务 : pm2up

效果图

官方部署文档

ecosystem可配置项

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

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

阅读原文...


CSDN博客

California's new laws bolster security for connected devices

上一篇

chaitin/cloudwalker: CloudWalker Platform

下一篇

您也可能喜欢

评论已经被关闭。

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

长按储存图像,分享给朋友