Docker+nginx部署SpringBoot+vue前后端分离项目（保姆及入门指南）

news2024/11/14 2:36:19

前后分离项目部署

  • 项目回顾
  • 工具
  • 上线准备
  • 1、win
    • 1.1、前端
    • 1.2、后端
  • 2、linux环境
    • 2.1、安装docker
    • 2.2、安装docker compose
    • 2.3、编写Dockerfile文件
    • 2.4、编写docker-compose.yml文件
    • 2.5、修改application-pro.yml
    • 2.6、准备好nginx的挂载目录和配置
    • 2.7、部署后端服务

项目回顾

书接上文，我们使用springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目
csdn链接：https://blog.csdn.net/weixin_45683778/article/details/139002415
github地址：https://github.com/huang-hanson/vueblog

项目展示地址：http://47.116.123.21:81/blogs

这部分介绍如何部署我们的项目

工具

  • xshell 7 绿色破解版
  • Navicat 11 简体中文

上线准备

这里我们同步演示怎么部署到win环境和linux(centos7)系统中，前端服务器采用nginx部署并使用docker统一管理前后端服务器。
所以我们会用到:

  • nginx
  • docker compose

1、win

win环境我就用本机来演示了，我们需要分别打包前后端，前后端打包都是一条命令即可，只不过我们打包之前注意需要配置好线上的环境参数等

1.1、前端

先来配置一下后端的调用路径，因为现在部署在本地localhost，所以在axios.js中，我们配置好链接，因为等下后端部要也是本机，所以我这里直接这样配置就好了，如下:

  • srclaxios.js
axios.defaults.baseURL = "http://localhost:8082"

在这里插入图片描述

上面配置的就是前端访问后端接口的服务。

然后前端部署还需要考虑一个问题:打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部罢说明，我们添加一个vue.config.js文件，

  • vueblog-vue/vue.config.js
module.exports = {
    publicPath: '/'
}

在这里插入图片描述

当然了，pubicPath默认其实是空的，也就是publicPath:"，两个效果貌似其实是一样的，哈哈哈，我只是提醒一下有这回事而已，嘿嘿。

设置完毕之后，我们执行打包命令:

#打包命令
npm run build

命令执行之后，我们在项目根目录下就可以找到一个dist的目录，这个就是打包之后的文件夹里面有个index.html，但是我们点击直接打开是看不到任何内容的，这时候，我们需要部署到nginx中。

注：首次打包需要npm install一下
在这里插入图片描述

在这里插入图片描述

首先我们下载一个nginx，下载地址:http://nginx.org/en/download.html，这里我们下载nginx/Windows-1.26.0版本，下载之后解压zip。根据我们对nginx的熟悉，静态文件我们放在html文件夹下面，所以先把html文件夹中的index.html和50x.html删掉，然后把打包出来的dist文件夹内的所有文件都复制到nginx的html中，如图:

在这里插入图片描述
在这里插入图片描述

双击nginx.exe启动nginx，然后浏览器输入http://localhost，出现了我们熟悉的界面，虽然没有博客数据，链接也自动跳转到了http://localhost/blogs，

在这里插入图片描述
我们点击任意一个链接或者按钮或者剧新界面，这时候出现了404:

在这里插入图片描述
刷新之后nginx就找不到路由了，这是为啥，得和你们科普一下，vue项目的入口是index.html文件，nginx路由的时候都必领要先经过这个文件，所以我们得给nginx定义一下规则，让它匹配不到资源路径的时候，先去读取index.html，然后再路由。所以我们配置一下nginx.conf文件。具体操作就是找到location,添加上一行代码try_files $uri $uri/ /index.html last;如下:

  • nginx-1.26.0/conf/nginx.conf
location / {
	root html;
	try_files $uri $uri/ /index.html last;
	index index.html index.htm;
}

在这里插入图片描述

这一行代码是什么意思呢?
try_files的语法规则:格式1:try_files file…uri，表示按指定的们file顺序查找存在的文件，并使用第一个找到的文件进行请求处理，last表示匹配不到就内部直接匹配最后一个。

重启nginx之后，链接再刷新都正常啦。但是没有数据，所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx进程，然后再重新双击的~~

在这里插入图片描述
重启之后，这样就能找到我们的资源路径了（例如：通过logs，跳转到登录页）

在这里插入图片描述
在这里插入图片描述

前端已经部署完毕，但是没有数据进来，现在部署后端。

1.2、后端

后端的打包就简单多了，应该大家都挺熟悉的，注意配置redis、mysql的链接密码啥的，然后执行命令，本机测试，redis和mysql我都已经提前安装好的了，sql文件也在vueblog-java的resources日录下

对了，pom.xml文件里面，spring-boot-maven-plugin之前注释掉了，现在一定要打开。不然执行jar会找不到主类。

  • pom.xml
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

在这里插入图片描述

执行打包命令:

#跳过测试打包
mvn clean package -Dmaven.test.skip=true

得到target下的vueblog-0.0.1-SNAPSHOT.jar，然后再执行命令

或者直接通过maven工具

在idea右侧直接运行clean–>test–>package，左边会出现target文件和jar包
在这里插入图片描述

java jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

后端上线之后，我们再访问下前端，发现已经可以正常浏览网页啦!spring.profiles.active表示指定环境配置文件。

在这里插入图片描述
在这里插入图片描述
图中后端启动完成，端口为8082，刷新前端页面

在这里插入图片描述

到此，win部署完成。

2、linux环境

linux环境部署相对复杂一点，因为我们还要部署redis、mysql等。我们使用docker compose来编排我们的服务，一起性搞定部罢。
二话不说，我们先来安装一下docker和docker compose，对于docker知识还不是特别懂的同学，建议自行去补习补习哈。

2.1、安装docker

#安装
yum install docker

#检验安装是否成功
[rootalocalhost opt]# docker--version
Docker version 26.0.0, build 2ae903e


#启动
systemctl start docker

2.2、安装docker compose

可以参考:https://docs.docker.com/compose/install/

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

或者

sudo wget "https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-x86_64" -O /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

#检查是否安装成功
docker-compose --version

在这里插入图片描述

2.3、编写Dockerfile文件

因为我们的项目需要成为docker的镜像，所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排，Dockerfile文件可以帮我们进行构建。

在这里插入图片描述

  • Dockerfile
FROM openjdk:8

EXPOSE 8080

ADD vueblog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=pro"]

2.4、编写docker-compose.yml文件

我们需要用到的软件与服务分别有nginx、mysq、redis、还有我们的springboot项目，所以编写如下:

  • docker-compose.yml
version: '3'

services:
  nginx: # 服务名称
    image: nginx:latest # 最新版本的nginx
    ports:
      #- 80:80 # 把docker容器的80端口映射到宿主机的80端口
      - 81:81
    volumes:
      - /root/nginx/html:/usr/share/nginx/html  # 将docker中额html文件夹映射到宿主机的/root/nginx/html目录下
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf  # 将docker中额nginx.conf配置文件映射到宿主机的/root/nginx/nginx.conf目录下
    privileged: true # 这个必须要加，解决nginx的文件调用权限问题
  mysql:
    image: mysql:5.7.27
    ports:
      #- 3306:3306
      - 8081:3306
    environment:
      - MYSQL_ROOT_PASSWORD=admin
  redis:
    image: redis:latest
    command: redis-server /etc/redis/redis.conf
    volumes:
      - ./redis/data:/data
      - /root/redis/redis.conf:/etc/redis/redis.conf  # 将docker中额nginx.conf配置文件映射到宿主机的/root/nginx/nginx.conf目录下
    ports:
      - 6379:6379
  vueblog:
    image: vueblog:latest
    build: .   # 这个不能从docker hub中去拉取，需要自己构建，会去寻找同级下的Dockerfile文件（文件中的jar包）进行构建
    ports:
      - 8082:8082
    depends_on:
      - mysql
      - redis

上面注释写的很明白

2.5、修改application-pro.yml

然后我们再回头看看applicaiion-pro.yml文件，mysql和redls的链接之前还是localhost，现在我们需要修改成容器之间的调用，如何知道mysql和redis的链接地址呢?docker compose就帮我们解决了这个问题，我们可以使用镜像容器的服务名称来表示链接。比如docker-compose.yml中mysql的服务名称就叫mysql、redis就叫redis。

# DataSource Config
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://mysql:8081/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: admin
shiro-redis:
  enabled: true
  redis-manager:
    host: redis:6379

2.6、准备好nginx的挂载目录和配置

docker-compose.yml中已经提到

  • 宿主机的挂载目录:/root/nginx/htmI
  • 挂载配置:/root/nginx/nginx.conf

所以我们在root目录下新建nginx目录，并进入nginx目录下新建html目录和一个nginx.conf配置文件。

在这里插入图片描述
axios.js文件中url需要改成你的linux机器ip

在这里插入图片描述
重新前端代码打包，压缩后托到html文件夹下面

在这里插入图片描述

将dist文件下面的文件全部转移到html下

在这里插入图片描述

编写nginx.config配置文件，其中可以参考win下的配置文件

将location 的html地址改成挂载的目录

# user root;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        # listen       80;
        listen       81;
        server_name  localhost;
        
        location / {
            root   /usr/share/nginx/html;
			try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }

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

在这里插入图片描述

2.7、部署后端服务

一切准备就绪之后，我们就开始编排部署了哈。

首先本地打包vueblog项目，vueblog-0.0.1-SNAPSHOT.jar，并上传到linux中，同时docker-compose.yml、Dockerfile也上传到同一目录下。如图所示:

在这里插入图片描述

然后我们执行一下编排命令:

#开始编排
cd
docker-compose up -d

其中-d表示后台服务形式启动

然后我们稍等片刻，特别是开始Building vueblog的时候可能时间有点长，耐心等待即可!最后提示如下·

在这里插入图片描述

访问连接：http://47.116.123.21:81/blogs（你自己的ip+port）我这里为了避免冲突，我将80改成了81端口
在这里插入图片描述
发现没有数据，需要导入sql表

DROP TABLE IF EXISTS `m_blog`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_blog` (
                          `id` bigint(20) NOT NULL AUTO_INCREMENT,
                          `user_id` bigint(20) NOT NULL,
                          `title` varchar(255) NOT NULL,
                          `description` varchar(255) NOT NULL,
                          `content` longtext,
                          `created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,
                          `status` tinyint(4) DEFAULT NULL,
                          PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;

DROP TABLE IF EXISTS `m_user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_user` (
                          `id` bigint(20) NOT NULL AUTO_INCREMENT,
                          `username` varchar(64) DEFAULT NULL,
                          `avatar` varchar(255) DEFAULT NULL,
                          `email` varchar(64) DEFAULT NULL,
                          `password` varchar(64) DEFAULT NULL,
                          `status` int(5) NOT NULL,
                          `created` datetime DEFAULT NULL,
                          `last_login` datetime DEFAULT NULL,
                          PRIMARY KEY (`id`),
                          KEY `UK_USERNAME` (`username`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

INSERT INTO `vueblog`.`m_user` (`id`, `username`, `avatar`, `email`, `password`, `status`, `created`, `last_login`) VALUES ('1', 'hanson', 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', '0', '2020-04-20 10:44:01', NULL);

在这里插入图片描述
再次刷新项目就部署成功了；

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1696051.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Studio 3T 2024.3 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端，支持自然语言查询

Studio 3T 2024.3 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端，支持自然语言查询

Studio 3T 2024.3 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端&#xff0c;支持自然语言查询 The professional GUI, IDE and client for MongoDB 请访问原文链接&#xff1a;https://sysin.org/blog/studio-3t/&#xff0c;查看最新版。原创作品&#xff…
阅读更多...
从0开始带你成为Kafka消息中间件高手---第三讲

从0开始带你成为Kafka消息中间件高手---第三讲

从0开始带你成为Kafka消息中间件高手—第三讲 实际上来说&#xff0c;每次leader接收到一条消息&#xff0c;都会更新自己的LEO&#xff0c;也就是log end offset&#xff0c;把最后一位offset 1&#xff0c;这个大家都能理解吧&#xff1f;接着各个follower会从leader请求同…
阅读更多...
LabviewCarla仿真平台搭建一：平台设计及仿真视频可视化实现

LabviewCarla仿真平台搭建一：平台设计及仿真视频可视化实现

文章目录 背景一、平台设计二、视频显示模块实现1、视频模块实现框架2、python-camera数据生成3、labview-camera数据可视化 三、效果展示 背景 在使用carla的时候&#xff0c;有平台的话可以提高效率&#xff0c;因此想结合labview和carla设计一个仿真平台-labcar。其实carla…
阅读更多...
滑动菜单栏

滑动菜单栏

效果如下&#xff1a; NavigationView 新建menu布局,表示菜单栏的选项 <menu xmlns:android"http://schemas.android.com/apk/res/android"> <group android:checkableBehavior"single"> <item android:id"id/navCall" android…
阅读更多...
C#【进阶】特殊语法

C#【进阶】特殊语法

特殊语法、值和引用类型 特殊语法 文章目录 特殊语法1、var隐式类型2、设置对象初始值3、设置集合初始值4、匿名类型5、可空类型6、空合并操作符7、内插字符串8、单句逻辑简略写法 值和引用类型1、判断值和引用类型2、语句块3、变量的生命周期4、结构体中的值和引用5、类中的值…
阅读更多...
对于高速信号完整性，一块聊聊啊（12）

对于高速信号完整性，一块聊聊啊（12）

常见的无源电子器件 电子系统中的无源器件可以按照所担当的电路功能分为电路类器件、连接类器件。 A、电路类器件&#xff1a; &#xff08;1&#xff09;二极管&#xff08;diode&#xff09; &#xff08;2&#xff09;电阻器&#xff08;resistor&#xff09; &#xf…
阅读更多...
智慧城市运维可视化：透视未来城市高效管理的新视窗

智慧城市运维可视化：透视未来城市高效管理的新视窗

行业痛点 现代城市运维是一个复杂而庞大的系统&#xff0c;涉及到诸多方面&#xff0c;包括交通、环境、能源等等。然而&#xff0c;在城市运维中&#xff0c;存在着一些现实的痛点&#xff0c;给城市管理者带来了不小的压力和困扰&#xff1a; 1、交通拥堵 随着城市化进程的…
阅读更多...
基于Docker的ElasticSearch、Kibana服务搭建并开启用户鉴权

基于Docker的ElasticSearch、Kibana服务搭建并开启用户鉴权

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;云原生与服务部署专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 服务搭建 2.1. 部署ElasticSearch 2.2. 部署Kibana 3. …
阅读更多...
深入理解指针(5)

深入理解指针(5)

在之前的深入理解指针(4)中我们学习了回调函数相关知识&#xff0c;并且学会了如何使用库函数qsort&#xff0c;以及模拟实现了qsort&#xff0c;接下来在本篇中将对srtlen和sizeof进行细致的讲解&#xff0c;并对相关的题型进行讲解&#xff0c;一起加油吧&#xff01;&#x…
阅读更多...
【408精华知识】指令的寻址方式

【408精华知识】指令的寻址方式

文章目录 一、指令寻址&#xff08;一&#xff09;顺序寻址&#xff08;二&#xff09;跳跃寻址 二、数据寻址&#xff08;一&#xff09;隐含寻址&#xff08;二&#xff09;立即&#xff08;数&#xff09;寻址&#xff08;三&#xff09;直接寻址&#xff08;四&#xff09;…
阅读更多...
网络域名是什么意思

网络域名是什么意思

网络域名&#xff0c;顾名思义&#xff0c;就是网络上的名字&#xff0c;类似于现实中的地址或姓名一样&#xff0c;用来标识网络上的一个或一组计算机或服务器的位置&#xff0c;以及它们的相应服务资源。网络域名是互联网上最基础的基础设施之一&#xff0c;是网络通信的“标…
阅读更多...
虚机配置USB CDROM设备热迁移crash

虚机配置USB CDROM设备热迁移crash

虚机配置USB CDROM设备热迁移crash 问题现象定位过程堆栈分析日志分析打开trace异常日志上下文分析SpecificationCBWCSW 命令执行发送读命令读取数据 正常日志异常堆栈 修复方案结论 基础原理设备模型数据结构设备实例化 UHCIFrame ListTDQH SCSI 问题现象 dogfood环境一台虚机…
阅读更多...
Echarts图表使用

Echarts图表使用

ECharts是一个用JS实现开源可视化库&#xff0c;它提供了丰富的图表类型和交互能力。使用户可以通过简单的配置生成各种各样的图表。 先安装ECharts图表直接下载echarts.min.js并用<script>标签引入也可以使用源代码版本echarts.js并用<script>标签引入&#xff0…
阅读更多...
【vue3+elementuiplus】el-select下拉框会自动触发校验规则

【vue3+elementuiplus】el-select下拉框会自动触发校验规则

场景&#xff1a;编辑弹框省份字段下拉框必填&#xff0c;触发方式change&#xff0c;有值第一次打开不会触发校验提示&#xff0c;关闭弹框再次打开触发必填校验提示&#xff0c;但是该字段有值 问题的原因是&#xff1a;在关闭弹层事件中&#xff0c;我做了resetfileds&…
阅读更多...
【kubernetes】陈述式资源管理的kubectl命令合集

【kubernetes】陈述式资源管理的kubectl命令合集

目录 前言 一、K8s 资源管理操作方式 1、声明式资源管理方式 2、陈述式资源管理方式 二、陈述式资源管理方式 1、kubectl 命令基本语法 2、查看基本信息 2.1 查看版本信息 2.2 查看资源对象简写 2.3 配置kubectl命令自动补全 2.4 查看node节点日志 2.5 查看集群信息…
阅读更多...
C++ | Leetcode C++题解之第112题路径总和

C++ | Leetcode C++题解之第112题路径总和

题目&#xff1a; 题解&#xff1a; class Solution { public:bool hasPathSum(TreeNode *root, int sum) {if (root nullptr) {return false;}if (root->left nullptr && root->right nullptr) {return sum root->val;}return hasPathSum(root->left…
阅读更多...
立体库堆垛机的精密构造与功能(收藏版)

立体库堆垛机的精密构造与功能(收藏版)

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 在现代物流仓储体系中&#xff0c;堆垛机以其高效、精准的操作能力&#xff0c;成为了自动化存储与检索系统的关键所在。 其复杂的构造和多样化的…
阅读更多...
基于开源二兄弟MediaPipe＋Rerun实现人体姿势跟踪可视化

基于开源二兄弟MediaPipe＋Rerun实现人体姿势跟踪可视化

概述 本文中&#xff0c;我们将探索一个利用开源框架MediaPipe的功能以二维和三维方式跟踪人体姿势的使用情形。使这一探索更有趣味的是由开源可视化工具Rerun提供的可视化展示&#xff0c;该工具能够提供人类动作姿势的整体视图。 您将一步步跟随作者使用MediaPipe在2D和3D环…
阅读更多...
Windows远程连接命令？

Windows远程连接命令？

Windows操作系统提供了多种远程连接命令&#xff0c;使用户可以通过网络连接到远程计算机&#xff0c;并在远程操作系统上执行操作。远程连接命令可方便实现远程工作、故障排查和系统维护等任务。本文将介绍几种常见的Windows远程连接命令及其基本使用方法。 远程连接命令 Win…
阅读更多...
从0开始带你成为Kafka消息中间件高手---第一讲

从0开始带你成为Kafka消息中间件高手---第一讲

从0开始带你成为Kafka消息中间件高手—第一讲 网站的用户行为日志&#xff0c;假设电商网站&#xff0c;我现在需要买一个阅读架&#xff0c;看书的架子 京东&#xff0c;我平时比较喜欢用的是京东&#xff0c;送货很快&#xff0c;自营商品&#xff0c;都是放在自己的仓库里…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023