模擬部署一個前后端分離的項目

前期准備：安裝好兩個虛擬機並配置好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即可。

最后我們去瀏覽器訪問前端，這個時候就能夠進行登錄等一系列操作了，整個項目的部署也就完成了