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 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

使用asp调用.net xml web services

(是不是实际上可以用这个办法调用任何xml web services呢?高人答一下) 最近在做一个web services,由我来写文档。为了方便广大asp用户...

2507
来自专栏Laoqi's Linux运维专列

部署Java项目(Ⅰ)

2905
来自专栏向治洪

cocos2d 在windows环境下搭建

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

2147
来自专栏Huramkin的归档库

ps命令常见用法

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

1281
来自专栏北京马哥教育

精通Linux常用的100+命令大全万字详解长文(珍藏版)

运维行业正在变革?推荐阅读:30万年薪Linux运维工程师成长魔法 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、...

48210
来自专栏数据和云

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

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

3323
来自专栏从零开始学自动化测试

python测试开发django-1.开始hello world!

当你想走上测试开发之路,用python开发出一个web页面的时候,需要找一个支持python语言的web框架。django框架有丰富的文档和学习资料,也是非常成...

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

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

Web application servers are generally "stateless":

1292
来自专栏bboysoul

在树莓派上搭建使用gitlab

gitlab是一个代码托管平台,因为我的树莓派系统是安装在128G的u盘上的,用来放电影太小,但是空着就是空着了,所以还不如再搭建一个gitlab服务来存放自己...

1952
来自专栏java一日一条

Java Web应用中调优线程池的重要性

不论你是否关注,Java Web应用都或多或少的使用了线程池来处理请求。线程池的实现细节可能会被忽视,但是有关于线程池的使用和调优迟早是需要了解的。本文主要介绍...

721

扫码关注云+社区