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

前言

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

之前用的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可配置项


总结

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

Cookie 和 Session 机制原理分析 & 区别对比

Web application servers are generally "stateless":

17720
来自专栏Albert陈凯

2018-11-19 Neo4j百万级数据导入只能用neo4j-import

业务需要使用Neo4j出数据关系展示图,数据库里有2张表通过一个字段进行关联,数据量是90万和500万,关系量是150w;

16120
来自专栏向治洪

cocos2d 在windows环境下搭建

详细搭建步骤如下: 1、Android 开发环境搭建 Android开发环境搭建不是重点,相信看此文章的很多人都已经搭建成功,这里随便概述性的说说。 1、下载 ...

23770
来自专栏Huramkin的归档库

ps命令常见用法

Linux中的ps命令用来列出系统中当前运行的那些进程,查看它们的运行状态,占用的资源

19210
来自专栏好好学java的技术栈

java工程师必备linux常用命令,这篇文章就够了

bash 是一个为GNU计划编写的Unix shell。它的名字是一系列缩写:Bourne-Again SHell — 这是关于Bourne shell(sh)...

34410
来自专栏Vamei实验室

Linux文件管理相关命令

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 在了解了Linux文件管理背景知识之后, ...

20850
来自专栏散尽浮华

centos6下redis cluster集群部署过程

一般来说,redis主从和mysql主从目的差不多,但redis主从配置很简单,主要在从节点配置文件指定主节点ip和端口,比如:slaveof 192.168....

601100
来自专栏数据和云

故障诊断 | 系统级追踪诊断方法及案例分享

所谓操作系统,是应用程序与服务器硬件进行沟通的中间层。应用程序的所有操作,都是和操作系统进行沟通交互。操作系统负责将所有交互转化为设备语言,进行硬件交互。 我们...

36130
来自专栏V站

php://协议深入理解

今天晚上,听了漏洞银行的大咖公开课讲的内网渗透,感觉和大咖之间还有不少差距,不过搞到了一波工具,心里依然美滋滋~

62140
来自专栏丑胖侠

Zookeeper开源客户端Curator之基本功能讲解

简介 Curator是Netflix公司开源的一套Zookeeper客户端框架。了解过Zookeeper原生API都会清楚其复杂度。Curator帮助我们在其基...

39050

扫码关注云+社区

领取腾讯云代金券