部署前后端分离项目

最新推荐文章于 2024-09-19 10:05:28 发布
最新推荐文章于 2024-09-19 10:05:28 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hqweay/article/details/85330296
版权

UPDATE

2020-02-23

更新：https://leay.net/2018/07/25/web/

关键词

spring-boot

gradle

腾讯云

tomcat

nginx

vue

前后端分离

代理

前言

因为种种原因，把后端部署在 tomcat 上，前端项目部署在 nginx 上。

Tomcat

tomcat 的运行没什么说的，将项目打包为 war，放在 webapps 下，启动 tomcat 会自动解压 war 包。

spring-boot 项目打 war 包部署到外部容器见文章末。

比如 etob.war ，放在 webapps 下，运行后 webapps 下会有一个 war 包解包后的 etob/ 文件夹，此时如果没有修改配置文件，我们可以通过 公网ip:8080/etob 访问我们的项目。

默认运行在 8080 端口，可以在 conf/server.xml 里修改端口。

当然，想要通过 ip:8080 直接访问项目，而不是通过 id:port/project_name 来访问的话，也可以进行配置。

流程

一

终端下 ssh 上传本地文件服务器。

scp 本地文件地址 root@192.168.1.145:/服务器存放文件的文件夹

部署（一）

直接放 webapp 下，./start.sh 即可。

会自动解压 war 包，不过这样一个 tomcat 只能部署一个项目。

###部署（二）

删除原 webapps/ROOT 目录下的所有文件，修改文件 conf/server.xml，在Host节点下增加如下Context的内容配置：

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">
......
<Context path="" docBase="C:/apache-tomcat-6.0.32/myapps/bc.war"></Context>
</Host>

注意：
1）path 的值设置为空；
2）应用不要放到 tomcat 的 webapps 目录下(如上述配置是放到自定义的文件夹 myapps 内的)，否则访问时路径会有问题；
3）docBase 指定到绝对路径。
如配置此设置后重启 tomcat，如果 docBase 指向的是 war 文件，则会自动将 war 解压到 webapps/ROOT 目录；如果 docBase 指向的是应用已解压好的目录，如 docBase=”C:/apache-tomcat-6.0.32/myapps/bc” ，则tomcat不会生成 webapps/ROOT 目录（这种情况下，这样就可以不用删除 webapps/ROOT 目录，但 webapps/ROOT 目录内的内容是无法访问的），访问时将直接使用docBase指定的目录。

部署（三）

与方法二类似，但不是修改全局配置文件 conf/server.xml，而是在 conf/Catalina/localhost 目录下增加新的文件 ROOT.xml （注意大小写），文件内容如下：

<?xml version='1.0' encoding='utf-8'?>
<Context path="/" docBase="/usr/local/src/java/tomcat/apache-tomcat-8.0.48/test" debug="0" privileged="true" reloadable="true"/>

端口

腾讯云要开启端口，首先需要到官网控制台修改权限组！！（没注意到这个问题折腾了很久）

然后设置开启端口就好了。

处理中遇到一个特别诡异的问题，只有 8080 端口可以在公网访问…

但是其他端口可以在内网访问，比如设置 nginx 在 89 端口，在服务器内用curl localhost:89，可以收到返回信息。

扫描公网 ip，发现只开放了 8080，22（ssh）端口。

因为安全组再三确认已经搞了，怀疑是防火墙问题，但是自认为已经把防火墙关了，还是不行。

防火墙，安全组…翻来覆去地确认，不知问题在哪。

最后执行 iptables -F （清空防火墙规则），其他端口就能用了…现在还是不知所以然。

PS: firewalld 服务与 iptables 服务都不是真正的防火墙，它们都只是用来定义防火墙规则功能的防火墙管理工具。将定义好的规则交由内核中的 netfilter 即网络过滤器来读取，从而真正实现防火墙功能，所以其实在配置规则的思路上是完全一致的。

来源： Centos 7禁用firewalld安装iptables防火墙

我发现自己上装了 firewalld ，iptables 两个服务，猜测是不是这个原因造成了上面的问题，总之先关闭一个。决定关闭 iptables 。

怎么关闭和卸载iptables？小心了！！

不要用 remove 命令，用停用。

停用 chkconfig iptables off

开启 chkconfig iptables on

我怀疑是百度 “端口操作” 时，网上的文章没有区分 iptables，firewalld 两种不同环境，直接给出命令，然后我就面向百度编程（copy，paste），把两个服务都搞上了…然后关闭了这个防火墙那边仍开着，所以一直没能成功…

linux 服务器与端口相关的操作，这里列一些命令。

注意！！！！

下面的命令中有 iptables 的，应该就是在 iptables 下才能执行的操作。（大概吧）

不要瞎几把搞。

比如 firewalld 下开放端口，应该执行

firewall-cmd --zone=public --add-port=80/tcp --permanent

（–permanent永久生效，没有此参数重启后失效）

CentOS7使用firewalld打开关闭防火墙与端口

  • （iptables ）开启端口（一），以 80 为例

    vi /etc/sysconfig/iptables 打开配置文件加入如下语句:

    -A INPUT -p tcp -m state –state NEW -m tcp –dport 80 -j ACCEPT 重启防火墙，修改完成

    上面这条命令据说最好写在 -A INPUT -j REJECT --reject-with icmp-host-prohibited 上面。我是这样做的，不晓得是不是必须项。

  • （iptables ）开启端口（二）

    /sbin/iptables -I INPUT -p tcp –dport 80 -j ACCEPT 写入修改
    /etc/init.d/iptables save 保存修改
    service iptables restart 重启防火墙，修改生效

  • （firewalld）这个是 firewalld 的防火墙操作

    重启防火墙：

    systemctl restart firewalld.service

    关闭防火墙：

    systemctl stop firewalld.service

  • firewalld 的基本使用

    启动： systemctl start firewalld

    关闭： systemctl stop firewalld

    查看状态： systemctl status firewalld

    开机禁用 ： systemctl disable firewalld

    开机启用 ： systemctl enable firewalld

  • 列出所有端口
    netstat -ntlp

  • 查看监听(Listen)的端口

    netstat -lntp

  • 检查端口被哪个进程占用

    netstat -lnp|grep 8080

  • 查看程序占用的端口

    ps -aux | grep tomcat

nginx

下载最新版本，解压后需要自己编译安装。

打开解压后的文件夹。

./configure 设置以默认配置来安装，

执行 make && make install ，编译并安装。

缺少依赖的话会报错，按照错误安装依赖就是了。一般缺少以下四中依赖，可以直接按步骤 5 一键安装。

安装依赖

  1. yum install gcc
  2. yum install pcre-devel
  3. yum install zlib zlib-devel
  4. yum install openssl openssl-devel
  5. yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel//一键安装上面四个依赖

安装之后，我把 nginx 加入系统变量，然后就阔以直接用 nginx 了，森林教我直接建立软连接放在 /etc/bin 下，也可以直接用 nginx 命令。

软连接

软连接：ln -s /usr/local/nginx/sbin/nginx /etc/bin/nginx

这个软连接的建立貌似是 centos 的操作，在 ubuntu 上，放在 /usr/local/bin 或者 /usr/bin 下都可以。建议 /usr/local/bin 下

  1. 启动 nginx
  2. 停止 nginx -s stop
  3. 重启 nginx -s reload
  4. 查看进程 ps -ef | grep nginx

要使用，还是得配置防火墙（开放端口）。

nagix 进行相关配置，修改 /nginx/conf/nginx.conf 文件（版本：nginx-1.15.2，不同版本配置文件路径不同 ）。

我这样配置的，先看配置，再解释。

（省略其他）

http{
    server {
        listen       80;
        location / {
          root /home/hqweay/etob/dist;
          index index.html;
        }
        location /api {
                add_header 'Access-Control-Allow-Origin' '*';
                proxy_pass http://localhost:89/api/api;
        }
}

注意下面的 location /api 这一项是配置代理的后端接口。

稍微解释一下。

前后端分别开发的时候，前端使用了 vue，用 node.js 模拟了一个服务器环境，前后端不在同一个环境，所以访问后端的 api 就会产生跨域问题。在开发环境解决该问题，可以在 vue 的 config/index.js 中的 dev（开发环境）中配置 ProxyTable（代理）。

如下：

后端环境：http://localhost:8089

后端接口：http://localhost:8089/api/xxxx

前端环境：http://localhost:80

proxyTable: {
      '/api': {  //使用"/api"来代替"http://localhost:8089" 
        target: 'http://localhost:8089', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: {
          '^/api': '/api'
          //路径重写 因为原来的api路径含有 /api
          //http://localhost:8089/api/chatRoom/addMessage
          //不重写的话 使用就是 /api/api/chatRoom/addMEssage
          //因为 使用"/api"来代替"http://localhost:8089"
          //重写 就可以 用 /api/chatRoom/addMEssage
        }
      }
    }

配置后，前端可以直接用 api/xxxxx 作为接口访问。

部署上去后，就不能这样搞了，所以要在 nginx 上配置一下代理。

本来我想都弄在 tomcat 上，不过…诶！

nginx 上的配置也有点奇怪。

因为我把后端部署上去后，根目录是 ip:port/api，当然可以用 ip 直接当根，不过我没配置…

也就是说现在的 api 需要用 ip:端口/api/api/xxxx … 妈耶

所以在 nginx 配置中有这么一行:

proxy_pass http://localhost:89/api/api;

就是用 /api 替换了 http://localhost:89/api/api 。（部署在 tomcat 的后端项目）

至于上面的 add_header 'Access-Control-Allow-Origin' '*'; ，是据说 vue 项目必须的，我按照别人说的加了，没有测试过不加会是什么情况。（也许不影响）

其他没什么说的了，再解释下下面这个。

location / {
          root /home/hqweay/etob/dist;
          index index.html;
        }

root 后面是前端代码所在的文件夹（随便放在服务器的哪里都可以，因为是绝对路径嘛…）。index 就是根文件。

springboot + gradle 打 war 包部署到外部容器

有一点没说，因为 spring boot 自带了 tomcat 容器，所以想要部署到外部容器，需要做点改动。

好像不改动也可以，之前我在波波老师的服务器上部署时，就是直接打包 war 放上去…不知道有没有啥副作用…

Ps:这一步是必须的，2018-11-20 遇到了不改动部署，访问 404 的问题。

在 gradle 中默认打包为 jar。

可以把 jar 包放服务器上直接运行，java -jar etob.jar ，不过关闭终端，就断了。

设置打包为 war。

apply plugin: 'war'

把默认的 tomcat 设置为仅仅在生产环境使用。

 dependencies {
        providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
    }

spring-boot 入口实现 SpringBootServletInitializer 接口

导包不提，

@SpringBootApplication
public class ChatroomApplication extends SpringBootServletInitializer {
	public static void main(String[] args) {
		SpringApplication.run(ChatroomApplication.class, args);
	}
	/**
	 * 实现SpringBootServletInitializer可以让spring-boot项目在web容器中运行
	 */
	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
		return builder.sources(this.getClass());
	}
}

ps：不这样貌似也可以，因为我上次…

hqweay
关注
专栏目录
手把手通过Docker部署前后端分离项目（亲测可用）
黄团团的个人博客
08-21 7792
Docker基本安装和部署Nginx、MySQL、Vue和SpringBoot项目学习笔记（亲测可用），这里我用的是阿里云的服务器，环境是CentOS7！分享一些自己在学习路上的一些笔记，欢迎大家共同交流与探讨！
前后端分离架构概述
热门推荐
Hopefully Sky的博客
08-12 23万+
1、背景 &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp; 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这
前后端分离式项目部署
liuxinzenzhen的博客
05-02 4995
一、环境准备 准备三台Linux服务器节点，一台部署前端项目，Nginx以及一些基础设施（包括MySQL，redis）；另外两台服务器节点用来部署后端项目（JDK，Maven和Tomcat），为了部署多实例，模拟集群。可以用SecureCRT来连接，SecureCrt是一款优秀的windows连接linux/unix机器的工具。 在码云上打包下来的文件，在本地IDEA要修改相关配置依赖，如数据库（application-druid.yml），redis(application.yml)以及日志文件（log.
IDEA快速搭建Vue+SpringBoot前后端分离项目
y2736375642的博客
08-04 895
开发环境：IDEA，MySQL，Navicat(数据库可视化)
前后端分离：后端部署
最新发布
yun_que的博客
09-19 753
parent></parent>被设置为一个空值，表示Maven会从仓库中查找父级依赖的信息。添加依赖-- web -->[spring-boot-starter-web] 导入这个依赖才能使yml文件修改tomcat端口生效启动器​5.设置application.yml端口和数据库server:port: 8259​​spring:redis:port: 6379。
Flask项目（一）前后端分离、项目目录结构、数据库设计、CRF
行者
11-10 6094
Flask项目认识前后端分离项目文件目录结构单一文件中构建所有依赖工具创建工程目录（对单一文件进行拆分）日志文件应用数据库设计为静态文件添加蓝图crf防护 认识前后端分离 项目文件目录结构 单一文件中构建所有依赖工具 manage.py # coding:utf-8 from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_session import Session from flask_wtf import
前端通信, 前后端分离 、 前后端不分离
csdnzlcheng的博客
06-21 2106
前端通信 基于后端的通信（ 后端完成 ）（ pc端用 ） Node.js中有一个net模块 使用终端（ shell ）作为客户端 思维流程 基于H5的webSocket来完成（ 应用于移动端 ） 低版本浏览使用的socket.io stream 流 案例： 利用Node.js流来生成压缩包 fs zlib 前后端分离 、 前后端不分离 市场流行： 前后端分离 前后端分...
前后端分离的文件管理系统
书中自有妍如玉的博客
08-08 1557
技术栈：前端vue全家桶。服务端：.net Core3.1 ORM:xcode 数据库:mysql.
前后端分离实践系列文章总目录
云卷云舒的架构师之路
05-15 1889
前后端分离实践（一）—— 基础理论篇 前后端分离实践（二）—— 使用Springboot2.0搭建REST风格的Java后端架构 前后端分离实践（三）—— 使用Express+Nodejs搭建前端服务层 前后端分离实践（四）—— 使用vue-cli搭建前端展示层并用mock模拟测试数据 前后端分离实践（五）—— 前端与后端的集成 前后端分离实践（六）—— 前端与后端在生产环境中的分离部署...
tomcat中server.xml配置和配置前后端分离web.xml文件
qq_35490522的博客
03-03 393
<?xml version="1.0" encoding="UTF-8"?> <!--The connectors can use a shared executor, you can define one or more named thread pools--> <!-- <Executor name="tomcatThreadPool" namePrefix="c
Jenkins部署前后端分离项目最全图文教程（手把手教学）
黄团团的个人博客
07-20 3209
最近Jenkins部署的热度比较高，于是就想出一篇关于我是如何使用Jenkins部署前后端分离项目的，本篇记录了我是如何一步一步去配置、搭建和部署的完整流程，每一行代码都进行了实测和讲解，通过图文的教学写成博客分享给大家！
宝塔部署前后端分离项目手册
cgblpx的博客
05-27 1879
JDK怎么更好地安装呢？在部署的过程中，难免磕磕绊绊，比如在正式运行后端项目时我们需要先在Linux系统中安装JDK，并且在部署的时候还需要注意跨域问题(Controller层加@CrossOrigin)。当我们运行完上面的命令，刷新当前目录，就可以看到多出来的nohup.out文件，双击该文件可以查看spring的运行状态。在正式将文件上传到服务器之前，我们先在本地启动一下前端项目，查看一下前端项目在本地启动时所占用的端口，在这里，我的端口号是9528 ，注意这个细节，后面在上传前端文件之后需要用到。
手把手教学使用宝塔面板部署前后端分离项目（全面详细）
黄团团的个人博客
07-01 5548
平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。
Kubernetes (K8s) 部署前后端分离项目
m0_57021623的博客
04-12 1609
使用Kubernetes (K8s) 部署前后端分离项目，涵盖Django后端、Vue前端、Redis、Nginx、RabbitMQ和MySQL详细的步骤和配置示例。
前后端数据交互——学习笔记（未分离，jdbc+jsp+servlet）
宇华的博客
08-19 483
#点击跳转： ##1.JDBC ##2.Servlet ##3.JSP //步骤一：模型层 //步骤一：模型层 public class User { private String username; private String password; private String nickname; private String sex; private String hobby; ...
JAVA Servlet小项目(实现前端、服务器、数据库的信息交互)
北溟南风起
01-02 1218
工具：1.开发工具 IDEA 2.几个Jar包 链接：https://pan.baidu.com/s/1jvEQ4zVAVzoxZGHweGgWxA 提取码：o9rk 一、定个小目标： servlet：我所理解的，其是一个前端界面和后台服务器交互的中间媒介，不管准确不准确，我暂时只需要知道这么多，这个小项目，其实要做成的效果是比较单纯的： 1.做一个前端界面，...
CI框架前后端分离
Th_rob的博客
12-15 763
Vue+php用CI框架前后端分离
前后端分离（前端）
qq_48578877的博客
10-16 4668
VUE（包含Element组件axios组件）
【JavaWeb】Tomcat的配置与初识Servlet
m0_64986499的博客
07-11 1519
本篇博客主要简单介绍一下Tomcat及其使用和Servlet的基本使用，再使用Servlet来打印Hello World。启动Tomcat，对于Window用户只需要双击运行bin目录里的即可，对于Linux和mac用户，只要运行startup.sh就可以。启动正常的话会出现以下黑框：乱码的原因是 ：Tomcat 默认按照 UTF-8 的编码方式处理中文. 而 Windows 的 cmd 默认是 GBK 编码，这里乱码不影响使用，因此暂不做处理。
Docker部署前后端分离项目
05-16
Docker 是一种容器化技术，可以将应用程序及其依赖项打包成一个独立的容器，以便在任何环境中运行。使用 Docker 部署前后端分离项目可以提高部署的可靠性和可重复性，并且可以更方便地进行测试和部署。 以下是部署前后端分离项目的一般步骤： 1. 编写 Dockerfile 文件 Dockerfile 文件是用于构建 Docker 镜像的脚本文件。在 Dockerfile 中指定项目所需的软件和依赖项，并将它们打包成一个镜像。 2. 在 Docker 中构建镜像 使用 Docker 命令行工具构建 Docker 镜像。首先需要将 Dockerfile 文件上传到 Docker 宿主机上，然后在 Docker 宿主机上执行构建命令。构建命令通常包括指定 Dockerfile 的路径和镜像的名称。 3. 启动容器 使用 Docker 命令行工具启动 Docker 容器。启动命令通常包括指定容器使用的镜像、需要映射的端口、需要挂载的目录等参数。 4. 配置前端项目 将前端项目打包成静态资源，并将其复制到 Docker 容器中。 5. 配置后端项目 将后端项目打包成可执行文件，并将其复制到 Docker 容器中。 6. 运行项目 在 Docker 容器中启动前端和后端项目。通常需要使用不同的命令来启动前端和后端项目。 7. 测试项目 在浏览器中访问前端项目，或者使用 curl 命令测试后端 API 接口，测试项目是否正常运行。 总体来说，使用 Docker 部署前后端分离项目能够提高部署的可靠性和可重复性，同时也能够更方便地进行测试和部署。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值