Vue 折騰記 - (14) Nuxt.js 2 正式版升級採坑以及部署姿勢改動

CRPER發表於2018-09-30

前言

記錄下過程遇到的一些問題及修正知識;

之前用的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