随手一记，将全栈进行到底。对前端小伙伴来说在开发及部署的过程中如何将开发完成的react项目打包并作为一项服务运行一定不是问题。部署及配置过程虽不复杂，但也有些许的繁琐。将自己在微服务与react结合的开发打包部署经验记录下来并分享，是一件有意义的事。

1、前端项目配置及打包

在一开始构建前端项目的过程中我使用了脚手架create-react-app,脚手架帮我们配置好了webpack，并将各种功能封装好供我们开发人员使用。如何完美的构建一套react项目的全部流程请参照下文：

兔先森：新构建react项目可以绕过的一些坑?

zhuanlan.zhihu.com图标

其中我还总结了各种小技巧，及常用命令。

回归正题，当我们完成项目的开发后，想要将其部署至伺服器时需要将项目的开发内容进行打包，压缩重要内容，剔除发布后不需要依赖的内容，这时我们可以通过

npm run build

命令实现项目的打包，打包过程中react会进行最优处理，文件大小也会进行优化。执行完后会将js和css单独打包至根目录下的build文件夹内。初始没有配置打包路径会生成dist文件夹，我们可以通过修改node_module中的依赖包，只需要找到react-scripts下的path.js文件修改run build后的路径

function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : /);//修改pathname后面的值即可
return ensureSlash(servedUrl, true);
}

将pathname后面的值进行修改，完成后可以自定义run build路径。

对于npm run build的执行内容，及其执行顺序进行研究发现npm run build的时候第一个执行的文件就是根目录下的package.json ，根据其中的run build命令找到react-scripts build并执行，完毕后执行react-scripts下bin文件中的react-scripts.js 于此同时传入参数，那么根据react-scripts.js 中的逻辑接著会进入到根目录scripts 下的build.js文件（项目eject完毕才会显示build.js文件）。在build.js执行完后会调用webpack.config.dev.js，在该配置文件中去调用一些webpack的载入规则还有webpack的本地server。

最后build完成后，生成的js和css文件还会带上hash值，生成的index.html 可以选择部署在apach tomcat下，也可以选择ngnix，选择ngnix的更多，因为考虑到性能，并发等等原因，ngnix的性能已经在一定程度上略有超越Apache（毕竟自带了负载均衡等功能），但是如果考虑稳定或者部署方便，可以选择Apache tomcat。

但作者两者都不用，因为每位开发人员都可以很轻松的掌握。通过前后端分离最终选型使用微服务进行前端项目的发布，每一项服务单独执行，这样既降低了前端与后台的耦合度，更大大方便了前端与后台的分离开发，提高了生产效率。这么有意义的事，我们当然要大力的推广。

当然要记得在打包前修改本地配置项，将后端服务暴露的地址配置正确，以便打包

class Server {
constructor() {
//服务启动地址
// this.portAddress = "http://1.1.1.1:7075/shiptail/service/";

this.mosaicAddress = this.webAddress + "/geoserver/ws_Mosaic/wms";
this.smallserverAddress = this.smallAddress +"/geoserver/weather/wms";
this.portserverAddress= this.smallAddress+"/geoserver/port/wms";
this.voyageAddress = this.smallAddress+/geoserver/density/wms;
}
}

react的组件化思想要随时牢记，声明一个类暴露出去，使地址能够被axios组件（类似于ajax）调用。

说了这么多，到这里，项目就打包完成了。

2、作为SpringBoot微服务进行部署

在SpringBoot的架构下进行前端服务构建，前端服务的基本结构如下：

我们可以将前端项目打包后生成到build文件夹下的内容复制到resource目录下的static内，同时查看工作区内的static文件夹内是否正确添加新内容。

假如你对springboot各种服务的构建存在疑惑，推荐你看一下翟永超写的《Spring+Cloud微服务实战》这本书。里面极其细致的描述了如何搭建各种类型的微服务（看就完了，很棒！网上很多电子版，假如找不到私信我留下邮箱我给你发（侵删））。

回到配置微服务，其中的application.yml的配置内容如下：

spring:
application:
name: 服务名+Html
server:
port: 7077
eureka:
client:
serviceUrl:
# defaultZone: http://mongodb:7070/eureka/,http://mongodb2:7070/eureka/,http://mq:7070/eureka/
//使用类分散式的方法进行eureka平台服务的查询

注意各项微服务的port均不一致，部署前请确认各服务埠号，埠号查看可以通过访问eurake平台获得，或者使用命令行

windows下推荐使用xshell输入：

ps -ef|grep java

查看全部进程。

linux、os下使用：

lsof -i

查看全部进程。

杀死进程使用：

kill -9 pid号

保证各服务占用不同埠号，以免冲突。

各种配置文件的区别请参考下面这篇文章，详细描述了不同配置文件各自的一些特性，同时还介绍了springboot新服务的搭建：

兔先森：SpringBoot配置新服务?

zhuanlan.zhihu.com图标

pom.xml文件的主要配置项为

<modelVersion>4.0.0</modelVersion>
<groupId>ocean</groupId>
<artifactId>cargo</artifactId>
<packaging>jar</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>cargo Maven Webapp</name>
<url>http://maven.apache.org</url>

注意修改自己需要的打包模式，本项目使用jar，jar包的打包方式选用run as下的maven install进行，打包后的jar包到项目目录下的target内寻找。

tips----------------------

注意在项目再次打包后，假如没有添加新图片等内容，可以不用修改static下的img文件，修改了img文件svn会revert很久，导致前台部署效率低下，在紧急情况下很不方便。

至此前端服务构建完毕，想要执行该微服务直接右键项目选择run as 运行方式选择spring boot app就通过设定的内容部署至伺服器下的指定埠上了。祝大家部署顺利

Happy Hacking！


推荐阅读：
相关文章