前后端分离项目部署(部署在同一台服务器)

博主现在参与的项目是前后端分离的,前端是用vue写的并用npm构建的,后端是用java写的用maven构建的,但是前端和后端在同一个项目中,之前的部署方式是前端代码在本地调试好后,编译完之后,提交在git上,然后用持续集成工具(基于jenkins)进行编译,部署。
这样无疑会影响效率,而且很容易出错,有没有一种方法能一键编译前后端代码并部署呢。

编译前脚本

很容易想到,在编译后端代码之前先运行脚本编译前端代码即添加个编译前脚本不就行了吗?然而结果是博主的公司不支持这种脚本。

如图,根本没有编译前或者编译后脚本。虽然可以用启动前脚本替代,但是这样会引入新的问题,前端的代码会在运行前编译,编译代码的环境依赖于实际运行的机器,而且会导致每个机器运行前都会编译,显然不合适。

exec-maven-plugin插件

既然上面的方法不行,那么有没有办法能在maven的生命周期内编译前端代码呢?博主想到了 exec-maven-plugin 这个插件。
exec-maven-plugin 插件让我们在maven的编译的生命周期内可以有机会运行一些命令。
代码结构是这样的

只需要进入 market-win-man-vue中运行 npm命令就可以了。
以下是插件配置

<plugin><groupId>org.codehaus.mojo</groupId><artifactId>exec-maven-plugin</artifactId><executions><execution><id>exec-npm-install</id><phase>prepare-package</phase><goals><goal>exec</goal></goals><configuration><executable>npm</executable><arguments><argument>install</argument><argument>--verbose</argument><argument>--registry=http://artifactory.jd.com/api/npm/npm</argument></arguments><workingDirectory>../market-win-man-vue</workingDirectory></configuration></execution><execution><id>exec-npm-run-build</id><phase>prepare-package</phase><goals><goal>exec</goal></goals><configuration><executable>npm</executable><arguments><argument>run</argument><argument>build</argument></arguments><workingDirectory>../market-win-man-vue</workingDirectory></configuration></execution></executions>
</plugin>

本地试了以下,完全可行,但是到了线上编译的时候,又失败了,一脸懵逼。
什么原因呢?原来是线上的编译环境没有安装node,而且这个镜像一时半会改不了。再换个方法。
(后来证明即使有node环境也无法编译,没有执行npm命令的权限)

frontend-maven-plugin

frontend-maven-plugin 插件是一个在maven编译时,下载前端并安装前端环境并执行编译的插件,简单的说就是在编译的时候下载一个node.js安装包,安装完成后再编译。
以下是配置:

<plugin><groupId>com.github.eirslett</groupId><artifactId>frontend-maven-plugin</artifactId><version>1.6</version><configuration><workingDirectory>${project.basedir}/../market-win-man-vue</workingDirectory></configuration><executions><execution><phase>generate-resources</phase><id>install node and npm</id><goals><goal>install-node-and-npm</goal></goals><configuration><nodeVersion>v8.9.3</nodeVersion><npmVersion>5.8.0</npmVersion><nodeDownloadRoot>http://artifactory.jd.com/api/npm/npm_nodejs/</nodeDownloadRoot><npmDownloadRoot>http://artifactory.jd.com/npm.taobao-cache/npm/download/</npmDownloadRoot></configuration></execution><execution><phase>generate-resources</phase><id>npm clean</id><goals><goal>npm</goal></goals><configuration><arguments>cache clear --force</arguments></configuration></execution><execution><phase>generate-resources</phase><id>npm install</id><goals><goal>npm</goal></goals><configuration><arguments>install --unsafe-perm --verbose--registry=http://artifactory.jd.com/api/npm/npm</arguments></configuration></execution><execution><phase>prepare-package</phase><id>npm build</id><goals><goal>npm</goal></goals><configuration><arguments>run build</arguments></configuration></execution></executions>
</plugin>

注意由于会去node.org下载node的安装包,而公司当然是把node.org给墙了,所以需要指定一下node和npm的安装包下载路径。
同时npm install需要指定–unsafe-perm参数,否则也会报一些权限错误。
到此,基本完事。
但是!
还有一个隐藏的坑,就是项目不能用一些依赖node-gyp的包,比如node-sass,为什么呢,因为node-gyp会去官网下载node-headers,因为node被墙了,所以到这里就会报错,而且这东西还不能配置下载路径,所以在博主用的环境上编译前端项目不能用node-gyp
具体错误如下

> node-sass@3.9.0 install C:\workspace\CMOTStyles\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.jsStart downloading binary at https://github.com/sass/node-sass/releases/download/v3.9.0/win32-x64-48_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v3.9.0/win32-x64-48_binding.node":getaddrinfo ENOTFOUND github.com github.com:443Hint: If github.com is not accessible in your locationtry setting a proxy via HTTP_PROXY, e.g.export HTTP_PROXY=http://example.com:1234or configure npm proxy vianpm config set proxy http://example.com:8080> node-sass@3.9.0 postinstall C:\workspace\CMOTStyles\node_modules\gulp-sass\node_modules\node-sass
> node scripts/build.jsBuilding: C:\apps\nodejs\node.exe C:\workspace\CMOTStyles\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\apps\\nodejs\\node.exe',
gyp verb cli   'C:\\workspace\\CMOTStyles\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using node-gyp@3.4.0
gyp info using node@6.2.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\workspace\CMOTStyles\node_modules\which\which.js:14:12)
gyp verb `which` failed     at F (C:\workspace\CMOTStyles\node_modules\which\which.js:69:19)
gyp verb `which` failed     at E (C:\workspace\CMOTStyles\node_modules\which\which.js:81:29)
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\which\which.js:90:16
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:117:15)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\workspace\CMOTStyles\node_modules\which\which.js:14:12)
gyp verb `which` failed     at F (C:\workspace\CMOTStyles\node_modules\which\which.js:69:19)
gyp verb `which` failed     at E (C:\workspace\CMOTStyles\node_modules\which\which.js:81:29)
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\which\which.js:90:16
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:117:15) code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\workspace\CMOTStyles\node_modules\which\which.js:14:12)
gyp verb `which` failed     at F (C:\workspace\CMOTStyles\node_modules\which\which.js:69:19)
gyp verb `which` failed     at E (C:\workspace\CMOTStyles\node_modules\which\which.js:81:29)
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\which\which.js:90:16
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:117:15)
gyp verb `which` failed  python { Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\workspace\CMOTStyles\node_modules\which\which.js:14:12)
gyp verb `which` failed     at F (C:\workspace\CMOTStyles\node_modules\which\which.js:69:19)
gyp verb `which` failed     at E (C:\workspace\CMOTStyles\node_modules\which\which.js:81:29)
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\which\which.js:90:16
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\workspace\CMOTStyles\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:117:15) code: 'ENOENT' }
gyp verb could not find "python". checking python launcher
gyp verb check python launcher python executable found: "C:\\Python27\\python.exe"
gyp verb check python version `C:\Python27\python.exe -c "import platform; print(platform.python_version());"` returned: "2.7.10\r\n"
gyp verb get node dir no --target version specified, falling back to host node version: 6.2.0
gyp verb command install [ '6.2.0' ]
gyp verb install input version string "6.2.0"
gyp verb install installing version: 6.2.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version not already installed, continuing with install 6.2.0
gyp verb ensuring nodedir is created C:\Users\NBKA0O5\.node-gyp\6.2.0
gyp verb created nodedir C:\Users\NBKA0O5\.node-gyp\6.2.0
gyp http GET https://nodejs.org/download/release/v6.2.0/node-v6.2.0-headers.tar.gz
gyp WARN install got an error, rolling back install
gyp verb command remove [ '6.2.0' ]
gyp verb remove using node-gyp dir: C:\Users\NBKA0O5\.node-gyp
gyp verb remove removing target version: 6.2.0
gyp verb remove removing development files for version: 6.2.0
gyp ERR! configure error
gyp ERR! stack Error: This is most likely not a problem with node-gyp or the package itself and
gyp ERR! stack is related to network connectivity. In most cases you are behind a proxy or have bad
gyp ERR! stack network settings.
gyp ERR! stack     at Request.<anonymous> (C:\workspace\CMOTStyles\node_modules\node-gyp\lib\install.js:193:21)
gyp ERR! stack     at emitOne (events.js:96:13)
gyp ERR! stack     at Request.emit (events.js:188:7)
gyp ERR! stack     at Request.onRequestError (C:\workspace\CMOTStyles\node_modules\request\request.js:813:8)
gyp ERR! stack     at emitOne (events.js:96:13)
gyp ERR! stack     at ClientRequest.emit (events.js:188:7)
gyp ERR! stack     at TLSSocket.socketErrorListener (_http_client.js:306:9)
gyp ERR! stack     at emitOne (events.js:96:13)
gyp ERR! stack     at TLSSocket.emit (events.js:188:7)
gyp ERR! stack     at connectErrorNT (net.js:1015:8)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\apps\\nodejs\\node.exe" "C:\\workspace\\CMOTStyles\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\workspace\CMOTStyles\node_modules\gulp-sass\node_modules\node-sass
gyp ERR! node -v v6.2.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
Build failed
npm WARN enoent ENOENT: no such file or directory, open 'C:\workspace\CMOTStyles\node_modules\node-sass\package.json'
npm WARN gulp-jshint@2.0.1 requires a peer of jshint@2.x but none was installed.
npm WARN gmot_styles@0.0.1 license should be a valid SPDX license expression
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\apps\\nodejs\\node.exe" "C:\\Users\\NBKA0O5\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "gulp-sass"
npm ERR! node v6.2.0
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLEnpm ERR! node-sass@3.9.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.9.0 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:
npm ERR!     C:\workspace\CMOTStyles\npm-debug.log

前后端分离项目部署(部署在同一台服务器)相关推荐

  1. 在Docker 上完成对Springboot+Mysql+Redis的前后端分离项目的部署(全流程,全截图)

    本文章全部阅读大约2小时,包含一个完整的springboot + vue +mysql+redis前后端分离项目的部署在docker上的全流程,比较复杂,请做好心理准备,遇到问题可留言或则私信 目录 ...

  2. 前后端分离项目Nginx部署

    前后端分离项目Nginx部署 更多详细内容请前往我的个人博客 一.在Linux先安装好Java和Nginx 1.安装Java 下载好Java安装包,解压 [root@jiang java]# ll t ...

  3. 最细致的Spring Boot结合Vue前后端分离项目打包部署步骤(搭配Nginx)

    文章目录 前言 一.环境准备 二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器 三.Vue项目打包 1.1 修改后台请求地址 1. ...

  4. 前后端分离项目如何部署_前后端分离项目,如何解决跨域问题?

    跨域资源共享(CORS)是前后端分离项目很常见的问题,本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题. 01 什么是跨域问题? CORS全称Cross-Ori ...

  5. 打包微服务前后端分离项目并部署到服务器 --- 分布式 Spring Cloud + 页面渲染 Nuxt.js

    前言 Spring Cloud项目属于微服务项目,也就是含有多个Sping Boot模块集合而成的项目 Nuxt.js项目属于前端基于Vue的服务端渲染项目 最近在服务器部署上线了一个基于Spring ...

  6. Django+Vue前后端分离项目的部署

    部署静态文件: 静态文件有两种方式 1:通过django路由访问 2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加 url(r'^$', TemplateView.as_view( ...

  7. (五)Debian Linux中部署Spring Boot + Vue的前后端分离项目详细过程(arm64/aarch64架构下)

    专题系列往期文章目录 (一)移动端安卓手机改造成linux服务器&Linux中安装软件踩坑历险记 (二)Debian Linux系统中安装oracle JDK1.8详细过程(arm64/aar ...

  8. 前后端分离项目部署(服务器或本地)

    文章目录 前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 后端部署(以Springboot项目为例) 补充 前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 部署环境 ...

  9. RuoYi-Vue 部署 Linux环境 若依前后端分离项目(jar包+nginx 多机版本)

    接上一篇:RuoYi-Vue 部署 Linux环境 若依前后端分离项目(jar包+nginx 单机版本) 前端和后端不在一个服务器上,如何部署呢? 文章目录 1. 服务器和软件部署 2. 后端部署 3 ...

  10. RuoYi-Vue 部署 Linux环境 若依前后端分离项目(jar包+nginx 单机版本)

    文章目录 一.软件安装部署 1. 安装jdk 2. mysql8安装部署 3. redis安装 4. nginx 安装部署 5. 克隆项目 二.后端项目 2.1. 修改数据库连接 2.2. 修改Red ...

最新文章

  1. 【Java 网络编程】UDP 服务器 与 客户端持续交互 案例
  2. web公选课js基础Part1
  3. Newlife.Net QA
  4. 淘宝上的所有cuda书籍调研
  5. 配置springcloud配置中心读取github上的配置文件报错:com.jcraft.jsch.JSchException: Auth fail解决方案
  6. OpenShift 4 Tekton - 用Webhook实现CI/CD
  7. 华为NP课程笔记19-镜像技术
  8. python矩阵行秩函数_矩阵的秩的性质以及矩阵运算和矩阵的秩的关系
  9. Hyperscan Windows 编译指南
  10. WordPress 5.2中的致命错误恢复模式
  11. 机器学习实战之信用卡诈骗(一)
  12. 失败魔咒下的企业海外并购(ZT)
  13. VMware虚拟机配置虚拟网卡导致浏览器DNS解析慢
  14. oracle索引 oracle索引结构 oracle索引使用 B*Tree索引
  15. 《炬丰科技-半导体工艺》 蓝宝石上的非极性氮化镓紫外光电探测器
  16. Java环境搭建及JAVA-jdk环境变量配置
  17. 佳学网络(建议多翻)
  18. Python编程输出三角形的边长及面积
  19. 漫步华尔街——股市历久弥新的成功投资策略读书笔记
  20. 【智能客服】聊天机器人营销的好处是什么?

热门文章

  1. 魔法宝石(动态规划)
  2. 搜索引擎高效使用技巧
  3. html css 奥运五环,用css3实现一个奥运五环
  4. websocket连接不稳定_帮你解决WiFi卡顿:拒绝连接不稳定、网速慢
  5. 网上下的--ARM入门笔记
  6. npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
  7. 简单几步实现钉钉多次自动打卡
  8. 虚拟服务器主机涨价好多,虚拟主机涨钱了吗
  9. 3Dmax在哪里下载 |3Dmax入门学习教程有哪些!!想学习的你还在等什么?
  10. 极性电容为什么具有单向导电性(阀金属与氧化膜)