个人网站建设

下载nginx

nginx.config里配置域名代理，替换掉server部分

这里我分别计算机默认80端口代理了前端和后端，与后端不同的是前端通过nginx代理的话会丢失请求头

• 前端报错CONNECTION_REFUSED
  百度了下
  CONNECTION_REFUSED
  connection refuse（连接拒绝）
  一般是以下原因:
  1、客户端连接的端口错了
  2、客户端连接的域名或者ip错了
  3、如果客户端使用了域名连接，域名可能指向了错误的服务器ip
  4、服务端没有启动或者端口没有被监听
  5、使用了网络代理软件
  6、服务端监听ip与访问地址不在一个地址段。例如服务端监听127.0.0.1，则客户端只能通过127.0.0.1连接，不能通过局域网ip或者外网ip连接。建议监听地址设置为0.0.0.0，这样本机、内网、外网都可以连接。
  确认是第6点，更改前端vue config.js代码
  将devServer中修改了

 host: "0.0.0.0",
 disableHostCheck: true, //  通过域名访问必备，新版的webpack-dev-server修改了一些东西
    ，默认检查hostname。如果hostname不是配置内的，将不可访问。应该是考虑一些安全的因素，才有这种配置。

• 前端报错 err_content_length_mismatch
  清除浏览器缓存即可

后端打包部署

使用idea打包方便

依次运行clean ， compile，package,install 生成jar包，
途中打包失败是由于springboot的jar包太高级了，版本换个低的就好了

 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 <version>1.5.9.RELEASE</version>

生成的jar包直接丢到tomat的webapps目录下，然后命令行进入该目录
使用

java -jar demo.jar

成功运行

前端部署

使用npm命令

npm run build

前端会出现各种报错，都是静态文件找不到

Loading chunk {n} failed 
Uncaught SyntaxError: Unexpected token <

在vue.config.js里

baseUrl: "/"

刷新会404，百度说这是单页面应用vue router使用history的缺陷
要配nginx的router访问
在nginx配置就好了

最最最主要的是nginx配置，在此贴出

 server {
        listen       80;
        server_name  www.hoxiete.tk;  		
        location / {
		#设置主机头和客户端真实地址，以便服务器获取客户端真实IP
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

		   #proxy_pass http://127.0.0.1:2364;   #微服务地址测试环境
		   # proxy_pass http://www.baidu.com;
			try_files $uri $uri/ @router;        #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
			root  F:\vueTest\Blog.Admin\dist;
			autoindex on;			
        }
		location @router {
            rewrite ^.*$ /index.html last;
        }
		location ^~ /zhwtf/ {
			proxy_pass http://127.0.0.1:8088;   #微服务地址测试环境		  
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }     
    }

至此前后端成功部署