Springboot+Vue+Nginx反向代理入门示例（含打包部署阿里云服务器）

一、效果展现

地址访问：网站地址


二、准备工作

1.阿里云服务器环境配置
（1）MySQL数据库
（2）Tomcat容器（本人开了8080-8084 五个端口,8081做后端，8080放web前端,其他几个拿来练手）并配置
（3）nginx安装并配置
2.工具
（1）webstorm:采用webpack进行创建vue项目
（2）idea:采用springboot进行搭建后端

三、开发步骤

1.配置工作
（1）Tomcat
主要配置JDK环境变量+catalish.sh+server.xml以及外机访问时的权限配置（webapps的manager下的context.xml和conf中的tomcat-users.xml）

tomcat-users.xml

webapps\manager\context.xml下将下段注释掉

具体参考：服务器中安装多个Tomcat
另外注意在阿里云平台开放其端口。

（2）nginx

在nginx.conf中配置重定向到Tomcat

 #重定向到Tomcat
 # listen 80 default_server;
 # listen [::]:80 default_server;
 # server_name :127.0.0.1:8080;  
   server_name www.startehys.com;
   #     listen       80;
   #     server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
# rewrite ^/$ http://www.smartehys.com/ redirect;
           proxy_pass   http://127.0.0.1:8080;
          #  root   html;                           

2.spring boot后端开发

（1）搭建controller+service+dao等基本框架

（2）整合mybatis

（3）测试

暂时略，后期详细写

3.Vue
（1）vue init webpack进行创建，建议使用自带的router
（2）npm 进行引进bootstrap+axios
（3）在src中创建page搭建整体框架
（4）router的index.js配置路径

3.打包部署

（1）配置conf下的index.js,修改assetsPublicPath为Tomcat下的webapps创建一个新目录（如self_page4），修改为’./'容易出现图片不显示情况

（2）在router下的index.js中添加base:""和刚刚创建的目录名一致。

（3）关于跨域问题，在dev环境我们一般使用proxyTable进行代理，但是放到远程Tomcat后就不行了，只能在main.js中进行baseUrl设置，设置为自己想访问的基本URL，另外后端主要注释@CrossOrgin,进行跨域配置。

Dev环境开发是，若出现404检查 ‘/‘是否多，特别是RewritePath处，’^/api’不要写成’ ^api’