前端vue发布

1、最初的版本

服务端安装node ，npm  如果是服务端渲染的前端框架还需要安装 pm2 

安装参考地址：centos7 yum 安装nodejs、npm、cnpm、pm2、yarn - 七月流星雨 - 博客园 (cnblogs.com)

安装好之后拉取项目代码，执行命令

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了)

先安装插件

 

再使用jenkins 的node插件编译项目

 

jenkins服务器构建完之后，将编译完之后的代码发布到对应需要发布的服务器，再去执行相对应的命令， 只需要pm2的才需要再执行install  run等命令，

3、使用docker构建

这里有一个参考地址

(23条消息) Docker 方式 部署 vue 项目 （docker + vue + nginx）_愿我如星君如月 ... 夜夜流光相皎洁 ...-CSDN博客_docker部署vue项目

使用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 查询镜像

启动镜像

docker-compose up -d 后台启动项目