天天看點

前端vue釋出

1、最初的版本

服務端安裝node ,npm  如果是服務端渲染的前端架構還需要安裝 pm2 

安裝參考位址: ​

安裝好之後拉取項目代碼,執行指令

npm install;

npm run build:dev;

将編譯完之後的檔案 dist/*   複制到對應nginx的檔案夾的目錄下,之後啟動就可以了

如果是pm2的項目,執行完 npm run build 之後,将這幾個檔案夾複制到需要釋出的伺服器的目錄下.nuxt static package.json nuxt.config.js server  

再執行下面的指令,就可以通路了

npm install; 

npm run pm2:test

2、使用jenkins 的nodejs插件,解決jenkins伺服器需要安裝node npm問題(jenkins伺服器就不需要安裝node,npm了)

先安裝插件

前端vue釋出

再使用jenkins 的node插件編譯項目

前端vue釋出
前端vue釋出

jenkins伺服器建構完之後,将編譯完之後的代碼釋出到對應需要釋出的伺服器,再去執行相對應的指令, 隻需要pm2的才需要再執行install  run等指令,

3、使用docker建構

這裡有一個參考位址

(23條消息) Docker 方式 部署 vue 項目 (docker + vue + nginx)_願我如星君如月 ... 夜夜流光相皎潔

使用docker-compose建構 編輯檔案 build-compose.yml

version: '3.9'
services:
  build-dev-shop-front:
    image: node:12-alpine
    environment:
      - "TZ=Asia/Shanghai"
    volumes:
      - npm-cache-volume:/cache
      - /項目位址:/workspace:cached
    ulimits:
      nproc: 65535
      nofile:
        soft: 50000
        hard: 50000
    command: >
      /bin/sh -c "
      cd /workspace &&
      npm --registry=https://registry.npm.taobao.org i -g node-gyp &&
      npm
      --cache=/cache
      --registry=https://registry.npm.taobao.org
      --prefer-offline=true
      --package-lock=false
      install &&
      npm run build:dev"
  build-dev-erp-front:
    image: node:12-alpine
    environment:
      - "TZ=Asia/Shanghai"
    volumes:
      - npm-cache-volume:/cache
      - /項目位址:/workspace:cached
    ulimits:
      nproc: 65535
      nofile:
        soft: 50000
        hard: 50000
    command: >
      /bin/sh -c "
      cd /workspace &&
      npm
      --cache=/cache
      --registry=https://registry.npm.taobao.org
      --prefer-offline=true
      --package-lock=false
      install &&
      npm run build:dev"
volumes:
  maven-cache-volume:
    name: maven-cache
  npm-cache-volume:
    name: npm-cache
  yarn-cache-volume:
    name: yarn-cache
      

運作指令

docker-compose -f build-compose.yml run build-dev-shop-front;

建構鏡像,編輯檔案  docker-compose.yml

version: '3.8'
services:
  sf-shop-front:
    build:
      context: 項目位址
    image: xunkutech/sf-shop-front:last
    container_name: sf-shop-front
    environment:
      - "TZ=Asia/Shanghai"
      - "SERVER_PORT=9009"
    ports:
      - "9009:9009"
    restart: on-failure
    networks:
      - "backend"
networks:
  backend:
    driver: bridge
      

docker-compose -f docker-compose.yml build sf-shop-front; 

使用docker image 查詢鏡像

上一篇: 前端|初學vue
下一篇: 前端VUE調試