Vue 2.x折騰記 - (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 ,這裏會觸發拉取項目,克隆到對應位置什麼的,會產生share和source(代碼在這裏)
• 啓動服務(如果第一步成功,裏面會自動啓動,不然手動啓動下,排錯): pm2prod
• 更新重載服務 :pm2up

效果圖

官方部署文檔

ecosystem可配置項

總結

你問我爲何不作持續化集成...有條件誰不想搞?

有不對之處能夠留言,會及時修正,謝謝閱讀