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

最新推荐文章于 2024-05-28 19:58:40 发布

置顶 jackllvv

最新推荐文章于 2024-05-28 19:58:40 发布

阅读量5.7w

点赞数 7

分类专栏：持续集成文章标签：前后端分离部署前后端分离

本文链接：https://blog.csdn.net/asdasd3418/article/details/84638820

版权

持续集成专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

博主现在参与的项目是前后端分离的，前端是用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.js

Start 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:443

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm 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.js

Building: 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 ELIFECYCLE

npm 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

jackllvv

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
前后端分离项目部署(部署在同一台服务器)

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

扫一扫