前后端代码分离

前端代码和后端代码分离

公司项目开发为了方便前端开发人员和后端开发人员的进度，使用了前后端分离。具体好处不列举了，我也不是很知道。知道的小伙伴可以回复我。

由于我们是代码提交到gitlab，jenkins触发脚本生成镜像到harbor，触发脚本，在k8s中delete deployments，create deployments，镜像从harbor中拉取。当然这个只是公司测试，实际上并不严谨，毕竟一个项目开发前哪里需要我先创建一个deployments的说法。说这些主要是与后面实现步骤承接。

接下来主要说前后端分离的实现。实现前后端分离最大问题是前端请求的跨域问题。在测试的时候，我们使用了google的插件web server for google。【操作使用简单】

实际运用的时候是通过nginx部署前端代码，修改nginx的配置文件，拦截特定路径请求到后端。

实现其实挺简单，具体操作我写在下面：

1、前端代码生成镜像

在安装docker的虚拟机中执行以下语句拉取nginx镜像，如果你不是用docker，也可以自己部署一个nginx。我是从网易丰巢拉取的镜像
docker pull hub.c.163.com/library/nginx:latest 

构建自己的镜像    将dockerfile文件和前端代码放在同一个目录下，这里需要注意的是将web项目完整导入到nginx：latest中需要add  ./而不是×或里面的文件夹、文件，否则它会将文件夹里面的文件全拿出来，密密麻麻一片。我的dockerfile ，基础镜像是nginx:v1，nginx的index页面地址是/usr/share/nginx/html/    这里将自己的web项目替换nginxindex.html页面。

FROM nginx:v1
MAINTAINER ly
ADD  ./  /usr/share/nginx/html/

执行构建语句

docker build -t="web:v1" .

使用docker images查看自己创建的镜像

使用web:v1镜像运行容器，以30066端口监听80端口

docker run -d -p 30066:80 web:v1

到这里你就可以通过docker所在IP:30066访问自己的前端项目了。

接下来我们就要进入到容器中修改配置文件，指向后端访问地址。

docker ps   查看容器CONTAINER ID   假设为xxx

docker exec -it xxx bash   进入容器

我的网易丰巢下载过来的nginx镜像配置文件所在是/etc/nginx/conf.d目录下的default.conf文件

location / { 
       root   /usr/share/nginx/html;
       index  index.html index.htm;
    }

可以看到nginx默认访问的是/usr/share/nginx/html/index.html

由于我的请求是/rest/aaa   /rest/xxx这种类型，打个比方get一个后端请求http://10.100.100.139:8080/rest/getlist

我在location / 配置前上增加了一个

location /rest { 
       proxy_pass http://10.100.100.139:8080;
    }

那么只要请求有/rest，首先到http://10.100.100.139:8080。如果没找到才到location /

这个拦截和haproxy基本一致。

由于是本地调用，所以前端调用10.100.100.139:8080/rest/getlist请求只需要写/rest/getlist即可。解决了跨域问题。

记得修改配置后执行

nginx -s reload   使配置生效。

当然这里只是测试。如果实际生产中我们可以docker build将需要修改的配置文件add进去，然后执行脚本nginx -s reload。

备注：这里为了方便修改个人建议最好将请求变成常量定义到一起，放在一个文件中，方便后期修改，不用再到js文件中去寻找。