前后端分离实践（六）—— 前端与后端在生产环境中的分离部署
前后端分离也包括部署的分离，下面来简单说一下三层应用如何进行部署。Springboot应用可以打包成一个jar包直接上传到linux服务器上启动运行。Vue应用可以借助webpack打包工具将所有资源打包成一个dist文件夹，可以将dist目录中的文件放到nginx服务器的html目录下，通过访问nginx来访问静态资源。而Node应用的部署就相对比较麻烦一点，目前没有找到比较好的方式，只能使用svn将本地项目资源上传到服务器，然后再手动npm安装对应的依赖。下面我们来看看具体如何操作。
请注意：实现三层应用的分离部署需要一些前置条件，首先我们至少需要一台Linux虚拟机，然后这个虚拟机中要有对应的Java运行环境和Nginx服务器。
1、Linux：Centos7.0以上版本最小化安装，我的IP是192.168.138.134，请确保防火墙为关闭状态（暂统一工作目录为/root，即使用cd命令前往的目录，统一安装目录为/usr/local）
2、Java运行环境：JRE8以上版本
在linux下安装jdk8可以参考：在Linux下安装JDK8
3、Nginx：安装目录/usr/local/nginx，需要gcc编译环境
在linux下安装nginx可以参考：在linux下安装使用nginx并配置反向代理
目录
一、将Springboot应用打包成jar部署到Linux并运行
1、使用java –version查看jre版本确保有java运行环境
2、在Springboot项目的根pom文件中添加启动类的配置
3、将打包的Springboot应用jar包部署到Linux工作目录中
7、在资源库fbsep-node中创建一个 3ff7 fbsep-node工作目录
11、将svn目录fbsep-node检出到本地与fbsep-node应用建立关联
12、检出完成后修改配置将fbsep-node中的node_modules忽略
13、将fbsep-node目录中的文件提交到svn服务器上
14、在linux上将fbsep-node项目检出到工作目录
三、在linux上搭建node环境并启动fbsep-node应用
四、将Vue应用打包的dist目录中的文件部署到Nginx中
2、修改fbsep-vue/src目录下main.js中的请求url
4、将打包的dist目录中的文件上传到nginx中的html目录中
一、将Springboot应用打包成jar部署到Linux并运行
1、使用java –version查看jre版本确保有java运行环境
2、在Springboot项目的根pom文件中添加启动类的配置
[code]<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <!--配置jar启动的main方法路径--> <configuration> <mainClass>com.mengfei.fbsepjava.FbsepJavaApplication</mainClass> </configuration> <executions> <execution> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin> </plugins> </build>
3、将打包的Springboot应用jar包部署到Linux工作目录中
4、使用java命令启动Springboot应用
5、浏览器访问/api/hello接口
访问地址：http://192.168.138.134:8080/api/hello
请注意： 如果无法访问请检查Linux防火墙是否关闭
二、使用svn将Node应用部署到Linux上
1、安装svn
命令：[root@localhost ~]# yum install -y subversion
2、创建svn工作目录
命令：[root@localhost ~]# mkdir /usr/local/svn
3、在工作目录下创建一个资源仓库fbsep-node
进入到工作目录：[root@localhost ~]# cd /usr/local/svn
创建资源仓库：[root@localhost svn]# svnadmin create fbsep-node
4、修改svn相关配置
进入配置文件目录：[root@localhost svn]# cd fbsep-node/conf/
打开配置文件：[root@localhost conf]# vim svnserve.conf
取消匿名访问：anon-access = none
授权用户有可写权限：auth-access = write
指定用户配置文件：password-db = passwd
指定用户权限配置文件：authz-db = authz
保存退出
5、添加svn测试账号和密码
命令：[root@localhost conf]# vim passwd
账号和密码：alex=123
保存退出
6、配置用户权限
命令：[root@localhost conf]# vim authz
[code]添加内容如下： #代表根目录 [/] #用户读写权限 alex = rw
保存退出
7、在资源库fbsep-node中创建一个fbsep-node工作目录
命令：svn mkdir -m 'create a new dir' svn://localhost/fbsep-node --username alex --password 123
8、启动svn服务器
命令：[root@localhost ~]# svnserve -d -r /usr/local/svn/fbsep-node/
9、使用客户端连接svn资源库
连接地址：svn://192.168.138.134/fbsep-node
输入账号和密码：
10、查看fbsep-node资源库的工作目录
11、将svn目录fbsep-node检出到本地与fbsep-node应用建立关联
12、检出完成后修改配置将fbsep-node中的node_modules忽略
右键》TortoiseSVN》Setting 4000 s》添加*node_modules（注意*后面没有点，用空格分隔）
13、将fbsep-node目录中的文件提交到svn服务器上
右键》SVN Commit》选择所有目录和文件进行提交
14、在linux上将fbsep-node项目检出到工作目录
命令：[root@localhost ~]# svn co svn://localhost/fbsep-node
如果客户端再次提交文件，则可以进入fbsep-node目录使用svn up命令来更新linux上的文件，比较方便
三、在linux上搭建node环境并启动fbsep-node应用
1、下载linux环境安装包
下载地址：https://nodejs.org/en/download/
2、上传并解压到/usr/local目录
命令：[root@localhost ~]# tar -xvf node-v10.15.3-linux-x64.tar.xz -C /usr/local
3、进入到/usr/local将其重命名
进入目录：[root@localhost ~]# cd /usr/local
重命名：[root@localhost local]# mv node-v10.15.3-linux-x64/ nodejs
4、配置nodejs环境变量
打开配置文件：[root@localhost ~]# vim /etc/profile
添加新内容：
#nodejs
export NODEJS=/usr/local/nodejs
修改PATH将NODEJS添加进去：export PATH=${JAVA_HOME}/bin:$PATH:${NODEJS}/bin
保存退出
重新加载配置文件：[root@localhost ~]# source /etc/profile
5、查看node版本号
命令：[root@localhost ~]# node –v
6、安装cnpm
命令：[root@localhost ~]# npm install -g cnpm --registry=https://registry.npm.taobao.org
7、进入到fbsep-node项目中安装相关依赖
进入到fbsep-node目录：[root@localhost ~]# cd fbsep-node/
安装依赖：[root@localhost fbsep-node]# cnpm install
安装axios：[root@localhost fbsep-node]# cnpm install axios
8、修改package.json文件
打开package.json文件：[root@localhost fbsep-node]# vim package.json
修改内容如下：
[code]"scripts": {
"start": "export NODE_ENV='development' && node ./bin/www",
"build": "export NODE_ENV='production' && node ./bin/www"
}
[code]修改之后就可以使用cnpm run build命令来启动生产环境了
保存退出
9、启动node应用
命令：[root@localhost fbsep-node]# cnpm run build
10、浏览器访问node应用
访问地址：http://192.168.138.134:3000/api/hello
看到如下页面代表访问成功！
四、将Vue应用打包的dist目录中的文件部署到Nginx中
1、启动nginx查看nginx进程
命令（要配置环境变量）：[root@localhost ~]# nginx
查看进程：[root@localhost ~]# ps aux|grep nginx
2、修改fbsep-vue/src目录下main.js中的请求url
修改为：var url="http://192.168.138.134:3000/api/hello";
3、在cmd命令窗口打包fbsep-vue应用
命令：cnpm run build
4、将打包的dist目录中的文件上传到nginx中的html目录中
5、浏览器访问nginx
访问地址：http://192.168.138.134/#/
看到如下内容代表访问成功！
参考链接：
- Spring Boot 最佳实践（二）集成Jsp与生产环境部署
- Docker环境下的前后端分离项目部署与运维（9章全）
- 前端开发环境与生产环境（部署环境）
- 基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践
- Docker环境下的前后端分离项目部署与运维（四）Linux系统构成和基本操作
- 前后端分离微服务项目-Nginx部署前端Vue
- Linux+Apache+Nginx+MySQL+PHP 前后端 部署 生产环境
- 基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践
- Linux+Apache+Nginx+MySQL+PHP 前后端 部署 生产环境
- Spring Boot 最佳实践（二）集成Jsp与生产环境部署
- Nginx部署前端代码实现前后端分离
- Mycat生产实践---生产环境部署
- 前端Nginx后端Jetty分离部署
- 最新Docker环境下的前后端分离项目部署与运维
- Docker环境下的前后端分离项目部署与运维（六）搭建MySQL集群
- Docker环境下的前后端分离项目部署与运维（七）Redis高速缓存
- 趣店前端团队基于koajs的前后端分离实践
- Docker环境下的前后端分离项目部署与运维（十一）Docker Swarm技术
- UEditor-前端使用心得（前后端分离实践）
- Docker环境下的前后端分离项目部署与运维