当心这些“坑”!阿里云服务器部署前后端分离项目

麦洛 等级 479 0 0

当心这些“坑”!阿里云服务器部署前后端分离项目

前言

Hi,大家好,我是麦叔,今天给大家带来使用阿里云服务器部署前后端分离项目的实战。最近买了个阿里云服务器和域名,买来之后就扔在哪里放着了(想不通当时为什么买,哈哈哈)!刚好赶上公司新项目上线,老大让我部署前后端分离项目,就用他来搞一场演习部署吧!

阅读完本文章,你会掌握利用nginx做代理和跨域处理,如果在两台服务器部署前后端分离项目。如果以后有需要,建议收藏,真的会少踩很多坑.

一 你需要准备?

在这里交代一下我的环境

  • 两台阿里云ECS服务器:服务器A部署前端项目 服务器B部署后端项目
  • vue 2.6.10
  • Spring Boot 2.2.4.RELEASE

二 项目打包

2.1 前端项目

我们的前端项目使用vue开发,在前端项目的package.json文件中,一般都会定义用于打包的脚本

当心这些“坑”!阿里云服务器部署前后端分离项目

在我们开发工具的控制台输入命令npm run build:sit进行打包

当心这些“坑”!阿里云服务器部署前后端分离项目

当我们打包完成之后,会在我们项目目录下出现dist目录,里面存放的就是我们打包出来的文件

当心这些“坑”!阿里云服务器部署前后端分离项目

2.2 后端项目

我们后端项目采用spring boot+maven开发,请注意要在父级项目(root)下依次执行clean->install就能成功打包

当心这些“坑”!阿里云服务器部署前后端分离项目

打完包的文件位于target目录,xxxxx.jar文件就是我们要部署的

当心这些“坑”!阿里云服务器部署前后端分离项目

三 项目部署

我这里采用阿里云服务器进行部署,会将前端项目和后端项目部署到不同的服务器,通过nginx进行代理和跨域处理

服务器 部署项目 环境
服务器A 前端项目 nginx
服务器B 后端项目 nginx+jdk8

因为除了nginx以为,其他环境搭建不是我们本文重点,如果你的服务器第一次部署项目,预计还需要安装jdk mysql redis 等环境

3.1 开启ECS服务器端口

首先,登录阿里云进入云服务器ECS控制台,点击安全组---->配置规则

当心这些“坑”!阿里云服务器部署前后端分离项目

大家点击手动添加添加规则即可:大家可以仿照填写我下面那个红框配置即可

当心这些“坑”!阿里云服务器部署前后端分离项目

为什么需要开启端口?

因为我待会要装的nginx的监听端口需要配置为8081,阿里云服务器需要在后台开启才可以,不然nginx无法监听

3.2 Linux 下nginx的安装

服务器A和服务器B都需要安装nginx,主要用作项目代理.大家参考我的另一篇文章

3.3 部署前端项目

登录服务器A,新建一个文件夹,一般我是在根目录下新建data目录,在data目录按项目名区分,比如:/data/milogenius/将打包的前端项目dist目录上传即可

当心这些“坑”!阿里云服务器部署前后端分离项目

服务器A中nginx配置,监听端口号就是刚刚我们开启的8081

大家在使用时候,需要更改的地方为 8081 /web alias后面的绝对路径

server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/access.log  main;

        location /web {
                        alias /data/milogenius/dist;
                        index index.html;
                }
    }

注意:服务器A只需要配置前端项目代理就行,后端项目代理不需要配置,因为在前后端项目部署在不同的服务器,在前端项目请求后端接口,不走前端服务器

3.4 部署后端服务

登录服务器A,新建一个文件夹,一般我是在根目录下新建data目录,在data目录按项目名区分,比如:/data/milogenius/将打包的后端项目jar包上传即可

当心这些“坑”!阿里云服务器部署前后端分离项目

启动jar包,将xxxx替换为自己的名称

nohup java -jar xxxxx.jar >./xxxxxx.log 2>&1 &

服务器B中nginx的配置,监听端口号就是刚刚我们开启的8081,9888是我们后端项目启动的端口.这里我们采用nginx统一处理跨域问题

大家在使用时候,需要将端口号:8081 /api proxy_pass都修改为自己项目的配置

server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/access.log  main;

       location /api {
                        if ($request_method = 'OPTIONS') {
                                add_header 'Access-Control-Allow-Origin' '$http_origin';
                                add_header 'Access-Control-Allow-Credentials' 'true';
                                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Age
                                nt,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token';
                                add_header 'Access-Control-Max-Age' 1728000;
                                add_header 'Content-Type' 'text/plain charset=UTF-8';
                                add_header 'Content-Length' 0;
                                return 204;
                }
                        add_header 'Access-Control-Allow-Origin' '$http_origin';
                        add_header 'Access-Control-Allow-Credentials' 'true';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X
                        -Requested-With,If-Modified-Since,Cache-Control,Content-Type,token';
                        proxy_pass http://localhost:9888;
                        client_max_body_size 1024m;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header Host $host;
                        proxy_redirect off;
                }
    }

四 跨域处理

在前后端分离项目中,跨域问题是必须要解决的,在刚刚部署后端项目时候,我们已经在nginx中配置了统一的跨域解决方案,接下来我们在了解一下这一块知识

4.1 什么是跨域

出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port

当一个请求url协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 同源(协议、域名、端口号相同)
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同(http/https)
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同(test/baidu)
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同(www/blog)
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同(8080/7001)

4.2 跨域的解决方案

1 Java后端全局配置

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
          config.addAllowedOrigin("*");
          config.setAllowCredentials(true);
          config.addAllowedMethod("*");
          config.addAllowedHeader("*");
          config.addExposedHeader("*");


        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);


        return new CorsFilter(configSource);
    }
}
@Configuration
public class MyConfiguration extends WebMvcConfigurerAdapter  {


  @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowCredentials(true)  
                .allowedHeaders("*")  
                .allowedOrigins("*")  
                .allowedMethods("*");


    }  
}

controller方法加注解CrossOrigin,origin="*"代表所有域名都可访问

@RequestMapping("/tet")
@CrossOrigin(origins = "*",maxAge = 3600)
public String test( ){
  return "本方法支持跨域请求!!!";
}

2 vue-cli项目 webpack代理解决跨域问题,在vue.config.js文件中加入如下代码

// 生成代理配置对象,可配置多个代理地址
let proxyObj = {
    '/test': {
        target: "http://localhost:8080"
    },
    '/test2': {
        target: "http://localhost:8081"
    }
};


module.exports = {
    baseUrl: '/',
    outputDir: 'dist',
    lintOnSave: false,
    runtimeCompiler: true,
    devServer: {
        contentBase: "./",
        port: 8080,
        disableHostCheck: true,
        proxy: proxyObj,
        before: app => { }
    }
}

3 jQuery的ajax jsonp解决跨域问题

$.ajax({  
        type : "get",  
        async:false,  
        url : "http://localhost:8080/test",  
        dataType : "jsonp",//数据类型为jsonp  
        jsonp: "jsonpCallback",//服务端返回回调方法名
        success : function(data){  
            alert(JSON.stringify(data));
        },  
        error:function(){  
            alert('请求错误!');  
        }  
    });  

4 nginx全局处理

最后一种就是我们本次采用的nginx配置方式,

       location /api {
                        if ($request_method = 'OPTIONS') {
                                add_header 'Access-Control-Allow-Origin' '$http_origin';
                                add_header 'Access-Control-Allow-Credentials' 'true';
                                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Age
                                nt,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token';
                                add_header 'Access-Control-Max-Age' 1728000;
                                add_header 'Content-Type' 'text/plain charset=UTF-8';
                                add_header 'Content-Length' 0;
                                return 204;
                }
                        add_header 'Access-Control-Allow-Origin' '$http_origin';
                        add_header 'Access-Control-Allow-Credentials' 'true';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X
                        -Requested-With,If-Modified-Since,Cache-Control,Content-Type,token';
                        proxy_pass http://localhost:9888;
                        client_max_body_size 1024m;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header Host $host;
                        proxy_redirect off;
                }

四 访问项目

现在我们访问前端项目,使用地址http://服务器A外网ip:8081/web,发现报了如下错误

Access to XMLHttpRequest at 'http://ip地址:8081/api/login' from origin 'http://ip地址:8081' has been blocked by CORS policy: Request header field tenant_code is not allowed by Access-Control-Allow-Headers in preflight response.

可以看出使我们前端项目访问后端项目,请求头中的tenant_code不被允许,所以我们需要在服务器B中的nginx中添加允许此请求头

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token,tenant_code';

配置完以后,重启nginx,进行重新访问,发现报了如下错误

The 'Access-Control-Allow-Origin' header contains multiple values 'http://ip地址:8081, http://ip地址:8081', but only one is allowed.app.07bc0251.js:1 Error: Network Error

可以看出使我们配置了两次跨域处理,既然我们通过nginx统一处理跨域问题,于是我们需要注释掉后端代码中的配置

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
     }
    }

重新部署项目以后,我们再次访问,发现正常了

当心这些“坑”!阿里云服务器部署前后端分离项目

到这里,文章就结束了,谢谢大家阅读


关于作者

大家好,我是麦叔,目前从事Java开发,前端和后端略懂一点。希望喜欢我的伙伴关注我的个人公众号,方便获取一手文章信息。当然也可以加我个人微信(下方右侧),大家交个朋友,谢谢大家对我的支持。

当心这些“坑”!阿里云服务器部署前后端分离项目

```

收藏
评论区

相关推荐

阿里云德哥:PostgreSQL 数据库的前世今生
内容摘要 PostgreSQL是以加州大学伯克利分校计算机系开发的 Posrgres,现在已经更名为PostgreSQL。它是一个自由的对象关系数据库服务器(数据库管理系统),它在灵活的 BSD风格许可证下发行。PostgreSQL 中国社区发起人之一Digoal为我们带来PostgreSQL 前世今生、社区理念以及阿里云Postgr
当心这些“坑”!阿里云服务器部署前后端分离项目
前言 Hi,大家好,我是麦叔,今天给大家带来使用阿里云服务器部署前后端分离项目的实战。最近买了个阿里云服务器和域名,买来之后就扔在哪里放着了(想不通当时为什么买,哈哈
什么是低代码(Low-Code)?
阿里云 云原生应用研发平台EMAS 彭群(楚衡)https://www.cnblogs.com/aliyunemas/p/14004815.html 一、前言 如果选择用一个关键词来代表即将过去的2020年,我相信所有人都会认同是“新冠”。疫情来得太快就像龙卷风,短短数月就阻断了全世界范围内无数人与人之间的物理连接。但好在,我们已经全面迈入
nginx配置系列-日志切割
nginx配置系列日志切割 背景 nginx日志中我们希望日志能够每天或者每小时自动切割,nginx本身没有提供自动切割的机制,但是我们可以通过脚本或者稍加改造让其具备这种能力。下面让我们看看怎么操作吧。 日志切割 常见做法有四种,在我们做之前我们来学习一下nginx日志中常用的内置变量字段都是什么意思 nginx内置变量
如何用 JS 实现二叉堆
这是第 90 篇不掺水的原创,想获取更多原创好文,请搜索公众号关注我们吧 本文首发于政采云前端博客:如何用 JS 实现二叉堆(https://zoo.team/ar
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
前端也要懂 - 带你全面认识 Nginx
前言作为一名前端开发人员,你是不是经常碰到领导让你上服务器去修改 Nginx 配置,然而你会以“我是前端,这个我不会”为理由搪塞过去呢!今天就让我们一起告别这种尴尬,向“真正”的程序员迈进!!!Nginx 概述 Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器,而且支持热部署,几乎可以做到 7 \ 24 小时不间
Artifactory Terrafrom plugin来了!
前言随着多云环境和DevOps普及,越来多的DevOps工程师要面临云上与云下资源的自动化管理问题。 作为全球领先的Artifact Managenment软件供应商,JFrog的Artifactory也被众多知名企业采用,成为当前最流行的devops工具之一。那么通过什么方法能够在我们的云环境中快速部署一套Artifac
前后端分离的情况下,vue保存cookie时碰到的坑! (axios.defaults.withCredentials = true;)
文章目录 一号坑问题描述当我们的项目是前后端分离的模式时,vue不会自动帮我们保存后端传来的cookie!解决方案我们需要在main中添加axios.defaults.withCredentials true 二号坑问题描述如果你之前处理过跨域方面的问题,应该会记得你曾经在后端请求头添加
实测Tengine开源的Dubbo功能
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 背景 Tengine是阿里巴巴基于Nginx开发并开源的Web服务器,它继承了Nginx所有的功能和特性,并在其基础上做了大量的扩展和增强,其中像动态模块加载,四层负载均衡,reuseport支持等能力,都逐渐被Nginx官方吸收引用。Tengine在开
OpenResty入门
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 OpenResty介绍 OpenResty通过汇聚各种设计精良的 Nginx模块(主要由 OpenResty 团队自主开发),从而将 Nginx 有效地变成一个强大的通用 Web 应用平台。这样,Web 开发人员和系统工程师可以使用 Lua 脚本语言调动
liunx服务器web环境搭建从0到1
前几天阿里云推出了新人优惠活动,许多小伙伴都参加了。阿都整理了搭建部署环境的这篇文章帮助同学们去高效的使用服务器。文章中的搭建步骤都是阿都这几年使用并整理的。希望可以帮助到大家。  前言      本文主要讲述搭建web部署环境【nginx、mysql、java】,一般搭建环境有两种方式,一种是从官网上下载文件安装包并上传到服务器【通过xftp】进行安装,另
2分钟做一个Vue实时直播系统
前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下。第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱,练手的话,几十块钱就够了。这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成。记住下面生成的地址,下面会用到。第二步,下载本地推流工具https://obspr
前端容易理解错的跨域原理
前言关于跨域这件事,自从我遇到后,了解一下,这事就过去了。我也一直认为这是个小问题,大家应该都懂。直到我要教妹妹前端时遇上这个问题才发现,这个问题得整个逻辑讲出来其实还挺绕的。知道问题怎么解决很简单,但是要讲清楚问题为什么出现就十分复杂了。那么我突然就好奇了,大家是都懂这个逻辑了嘛。所以我在几个交流群里问了一个问题 为什么很多人都出现本地环境会跨域而线上环境
阿里Java面试必问:Java开发热门前沿知识
策略 1——停止挖掘Law of Holes 是说当自己进洞就应该停止挖掘。对于单体式应用不可管理时这是最佳建议。换句话说,应该停止让单体式应用继续变大,也就是说当开发新功能时不应该为旧单体应用添加新代码,最佳方法应该是将新功能开发成独立微服务。如下图所示:除了新服务和传统应用,还有两个模块,其一是请求路由器,负责处理入口(http)请求,有点像之前提到的