模拟部署一个前后端分离的项目

模拟部署一个前后端分离的项目

前期准备：安装好两个虚拟机并配置好maven环境、nginx环境、java环境、sql和tomcat环境，分别用来部署前端和后端，这里我用的是centos，其中centos001（192.168.2.45）部署后端。centos002（192.168.2.115）部署前端。再去找一个前后端分离的项目，这里我的项目前端采用vue框架，后端采用springboot框架。

根据实际情况修改前后端项目的配置文件

前端：

修改conf文件夹内的env.config.js

prod: {

    BASE_URL: '"http://192.168.2.45:8080/sys"',            //后端接口的地址
    STATIC_BASE_URL: '"http://192.168.2.45:8080"',
    FILE_UPLOAD_URL: '"http://192.168.2.45:8080/sys"'
  },

修改src文件夹下utils文件夹下myhttpserver.js

axios.defaults.baseURL = 'http://192.168.2.115/sys'        //前端地址

修改static文件夹下config文件夹下index-prod.js

// api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://192.168.2.115'

后端：

修改resources文件夹内application-prod.yml数据库的配置，根据自己的实际情况来。我的数据库是在centos001这台虚拟机上，并运行在3306端口

spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.jdbc.Driver
        druid:
            first:  #数据源1
                url: jdbc:mysql://192.168.2.45:3306/papertest?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8
                username: root
                password: Zzq960916
            second:  #数据源2
                url: jdbc:mysql://192.168.2.45:3306/papertest?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8
                username: root
                password: Zzq960916

修改同级文件夹下的application.yml，指定自己的运行环境，我这里是prod

上传前端/后端源文件至各自需要部署的虚拟机上进行打包部署

将整个后端文件夹上传到centos001的/home/zzq/workspace/下，前端文件夹上传到centos002的/home/zzq/workspace/下（位置可以自己选择）

前端：推荐安装yarn进行依赖管理

cd到相应的位置

cd /home/zzq/workspace/management/

安装依赖

yarn install

查看可以运行的脚本

yarn run

可以看到我这个项目的build命令，键入即可。

等待build完成后再management文件夹下会自动生成一个dist文件夹，这个dist文件夹就是打包后的结果。将dist文件夹复制一份，备份出来，我是把它放在/root/html/management/下。

最后修改nginx的配置文件，我的位置是/usr/local/nginx/conf/新增server代码块内容如下

server {
        listen       80;
        server_name  nginx;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		#前端打包位置
        location / {
            root   /root/html/dist/;                      
	    try_files	$uri $uri/ /index.html;
            index  index.html index.htm;
        }
		#处理跨域问题。将所有的带有sys的请求都转发到指定的地址上
        location ^~ /sys/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.2.45:8080/sys/;

        }

cd到nginx的sbin目录下，启动nginx服务。

./nainx

这个时候前端项目就已经部署完毕了，我们可以去浏览器访问看看

但是这个时候还不能进行登录等操作，因为后端还没有启动起来。

后端：

同样，来到centos001，cd到后端文件夹的位置，我的是/home/zzq/workspace/paper-testing/，

执行命令

mvn package

稍等片刻后可以看到在paper-testing文件夹下出现了一个同名的war包

将该war包备份一份，然后将war包放到tomcat目录下的webapps下，我的是/usr/local/tomcat/webapps/，最后启动tomcat服务

service tomcat start

就可以了。但是这个时候有人可能就发现了，此时去浏览器访问比如我的是192.168.2.45:8080，访问到的是tomcat的首页，必须得在后边加个192.168.2.45:8080/paper-testing才能访问到，其实这个情况我们只需要将这个访问路径改成根目录就行了，cd到tomcat的conf文件夹

cd /usr/local/tomcat/conf

修改该目录下的server.xml,内容如下：

<Host name="localhost"  appBase="webapps"
	      unpackWARs="true" autoDeploy="true">

	      <Context path='/' docBase="/usr/local/tomcat/webapps/paper-testing" reloadable="false"></Context>

保存，重启tomcat即可。

最后我们去浏览器访问前端，这个时候就能够进行登录等一系列操作了，整个项目的部署也就完成了