java前后端分离，前端部署的方式

目前公司在开发web应用时，普遍采取的是前后端分离的方式，将前后端的开发人员开发代码分开，后台使用java语言，前端使用node.js环境，vue语言开发，初期开发使用mock数据不依赖后台服务；一个项目评审后各自搭建工程，后台开发接口，前台开发页面，两者互不影响，等到开发完成花几天的时间进行联调，部署发布上线时，前端静态资源放在CDN，将编译后的静态html页面提供给后端，部署；好处是解放了前端和后端在一套工程中开发时出现的各种模糊职责，刷锅的问题，调试问题……那后端在整合前端静态html页面时有哪几种方式呢？

一种是将html放在后台程序中；一种是另外搭建一个应用只放前端的html页面；还有一种是在nginx服务器上部署；

现在将第三种方式实际应用介绍一下，前端工程中使用Dockerfile命令，将html部署在nginx服务器上；：

1、依赖nginx环境，创建Dockerfile和http-nginx.conf文件，放在下图的位置，其中http-nginx.conf是nginx的文件：

2、Dockerfile内容：

#nginx服务器环境（自己情况）
FROM jd-new-centos6-nginx
#将当前编译后的dist文件复制到另一个位置
COPY dist /opt/dist
COPY http-nginx.conf /opt/nginx/conf/domains/ENTRYPOINT /usr/sbin/sshd && mkdir -p /export/Logs/servers/nginx/logs && mkdir -p /dev/shm/nginx_temp/client_body && nginx && sleep 9999999d

http-nginx.conf文件内容：

   server {listen          80;server_name     *.*.com;#日志地址access_log      /export/Logs/servers/nginx/logs/nginx_access.log main;error_log       /export/Logs/servers/nginx/logs/nginx_error.log  warn;#/路径对应的系统中的文件路径root /opt/dist/;#默认首页index index.html;#默认请求location = / {index index.html;}#前置的重定向# location = /index.html {#     return 302 https://$host/print.html#/?skuId=$arg_skuId; # }#前置的重定向# location = /indexV2 {#     return 302 https://$host/print.html#/?skuId=$arg_defaultSkuId; # }#html界面location ~ .*\.(?:htm|html)$ {#开启ssi 头尾系统需要ssi on;ssi_last_modified on;add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";}#js css文件缓存location ~ .*\.(?:js|css|woff|ttf)$ {#缓存1小时expires 1h;}#图片location ~ .*\.(?:jpg|jpeg|gif|ico|png|svg|webm)$ {expires 1h;}#头尾配置location ^~ /print2/common/ {root /export/Data/jdos.jd.com/common/export/Data/;}#日志目录拦截location /logs/ {#禁用所有ip请求该路径deny all;}#默认配置  如果所有的location没有匹配则走该请求location / {#禁用所有ip请求该路径deny all;}}

3、构建镜像时使用Dockerfile命令

java前后端分离，前端部署的方式相关推荐

前后端分离前端部署方案是什么？
这段时间,粉丝朋友会经常问到一个问题,即:前后端分离如何部署?前端部署方案是什么?虽然我们回复了很多次,但是依然有不少朋友有疑问.今天,小编就给大家整理出来,如果对这个问题感兴趣,就可以收藏起来随时查 ...
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B ...
基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技 ...
计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw
计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw 计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw 本源码技 ...
前后端分离项目部署(部署在同一台服务器)
前后端分离项目部署(部署在同一台服务器) 博主现在参与的项目是前后端分离的,前端是用vue写的并用npm构建的,后端是用java写的用maven构建的,但是前端和后端在同一个项目中,之前的部署方式是前 ...
web前后端分离开发部署模式
web前后端分离开发部署模式在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/ ...
微信公众号支付java前后端分离开发
微信公众号支付java前后端分离开发微信公众号支付java前后端分离开发我们开发的是基于河北银行的支付,支付宝微信都做了,这里就介绍一下微信公众号支付,这个公众号支付需要配置的东西太多了,官方文档 ...
如何让kibana零等待时间升级插件（前后端分离的部署）
正如官方文档所自豪宣称的那样.Kibana更多的是一个平台,一个可以让插件独立开发,"独立部署"的可扩展性平台,可以让我们自由的发挥自己的想象力和能力,根据自己的需求往上添加原生K ...
若依前后端分离框架部署Linux服务器
若依前后端分离框架部署Linux服务器第一次使用若依框架进行部署Linux服务器,出现了很多的问题,也可能是自身对若依框架的不太熟悉导致接下来说一下我的部署第一步:首先我们把我们的前端打包,如果不 ...
前后端分离项目部署（服务器或本地）
文章目录前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 后端部署(以Springboot项目为例) 补充前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 部署环境 ...

java前后端分离，前端部署的方式

一种是将html放在后台程序中；一种是另外搭建一个应用只放前端的html页面；还有一种是在nginx服务器上部署；

现在将第三种方式实际应用介绍一下，前端工程中使用Dockerfile命令，将html部署在nginx服务器上；：

1、依赖nginx环境，创建Dockerfile和http-nginx.conf文件，放在下图的位置，其中http-nginx.conf是nginx的文件：

2、Dockerfile内容：

3、构建镜像时使用Dockerfile命令

java前后端分离，前端部署的方式相关推荐

最新文章

热门文章