目录

序

【前言】：
本地跑一个springboot（IDEA）、vue（HBuilder），都是超占内存，且伤感的一件事，虽然笔记本性能还可以，拖得起，但是狂暴模式散热影响敲代码的心情；今天计划：

  1. 数据库：把数据库弄到阿里云上，springboot远程连阿里云的mysql5数据库
    （需要和本地mysql8做一下兼容，把本地sql建表也移动上去）
  2. 部署后端：把springboot项目打成war包丢在阿里云的Apache-tomcat下
    （springboot内置tomcat要处理一下，因为将会用到外部tomcat）
  3. 前端部署：Vue模块有两个方案
    （3.1）cnpm run build打包dist文件夹直接丢Apache目录（资源路径匹配可能会有问题，打包时处理）
    （3.2）部署到nignx代理服务上（我的云服务器暂时没有设置，看情况）

【系统】：

  • 本地 ：win10 + IDEA + MySQL8 + HBuilder
  • 连接：Xftp + Xshell + Navicat
  • 云服务器：阿里云ETC控制台 + LAMP +MySQL5
  • 技术栈：springboot + Vue + Linux

【总结】：
一步一步做就好了，今天不是coder是运维了，哈哈哈哈~

正文

1. springboot连接服务器数据库

1.1 数据库迁移

Navicat优点：远程连接数据库、本地数据库；图中分别是我连接了：

本次只需要把本地mysql8导出sql建表，在云服务器运行建表语句就可以了，很方便。

步骤1：本地导出sql（左图）
步骤2：云数据库，新建同名数据库，导入建表语句（右图）
在这里插入图片描述 在这里插入图片描述
步骤3：重新连接数据库（刷新），表与数据均建好了，超级方便：
在这里插入图片描述

参考配置：
为了解决：服务器Mysql5.7【中文字符乱码】问题

1.2 远程连接测试

因为前端配置的mysql-connector运行版本为runtime，这里不必要过多考虑jar包问题。

	<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
  1. springboot只修改application.properties如下：
    ## 端口号
server.port=8090
## 数据源配置
## 本地mysql8
#spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot_mysql?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=UTF8
#spring.datasource.username=root
#spring.datasource.password=wy123456
#spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
## 服务器mysql5
spring.datasource.url=jdbc:mysql://47.93.50.90:3306/springboot_mysql?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=UTF8
spring.datasource.username=root
spring.datasource.password=wy123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.show-sql=true
  2. 运行测试：http://localhost:8090/user/findUserById?id=12
    返回内容：

    {“address”:“上海”,“age”:21,“id”:12,“name”:“wang”,“password”:123}

springboot远程连接服务器数据库就算完成了！ ?

2. springboot打包发布到服务器

2.1 开放远程端口

  1. 强调因为发布在外部tomcat中，我们application.properties文件配置是8090无效，
    server.port=8090
  2. 在运控制台开放窗口（阿里云步骤如下，其他平台需要自己百度）
    找到云服务实例-》更多-》网络和安全组-》安全组配置-》配置规则-》添加安全组规则
    我在云tomcat 开放的端口号是8080，0.0.0.0/0是允许所有网址访问：
    在这里插入图片描述
    配置完成效果：
    在这里插入图片描述

2.1 打包本地项目

参考：部署springboot项目到云服务器的两种方式（jar+war）

1、jar包部署方式使用Spring Boot 自带的Tomcat，因为Spring Boot 应用自带Tomcat，所以可直接在服务器运行jar文件
2、war包部署方式则使用云服务器里的Tomcat，此时需要移除Spring Boot 自带的Tomcat插件

这里用war方式部署，需要在本地确认或修改一些配置：

  1. pom中打包规则为war形式：
    在这里插入图片描述
    主要依赖：（2.移除嵌入式tomcat、3.添加servlet-api的依赖）
    在这里插入图片描述

  2. 移除嵌入式tomcat插件（provided：编译、测试时将依赖的包加入本工程的classpath，运行时不加入，可以理解成运行时不使用Spring Boot 自带的Tomcat）

    		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <!-- 移除嵌入式tomcat插件 -->
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

  3. 添加servlet-api的依赖，最新版本点这查看，原理：maven里面在编译阶段是依赖servlet api的，所以当然要包含。但是在运行阶段是放到 tomcat 容器的，所以要设置好servlet依赖的scope。
    不建议使用最新版，放正我是遇到bug和spring版本冲突，用的3.1稳定版

    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>

  4. 修改启动类，并重写初始化方法

    package com.springboot.three;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
public class ThreeApplication extends SpringBootServletInitializer {//继承自动启动项
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application){
        return application.sources(ThreeApplication.class);//你的项目启动类名
    }
    public static void main(String[] args) {
        SpringApplication.run(ThreeApplication.class, args);
    }

}

  5. 四步打包生成war包
    （1）打开右侧maven
    （2）找到Lifecycle
    （3）双击运行package
    （5）在项目下target文件夹下找到同名war包
    在这里插入图片描述

2.2 发布项目

参考：[阿里云服务器] war包远程发布到阿里云Tomcat服务器

  1. 在项目下target文件夹下找到同名war包，右键copy Path复制路径

    参考路径：
    D:\myworkspace\1GitHub_cungudafa\demothree\target\three-0.0.1-SNAPSHOT.war

  2. 将本地war用xftp上传到服务器Tomcat/webapps/目录下：

    参考路径：/usr/local/apache-tomcat-9.0.16/webapps

    强拽即可上传：
    在这里插入图片描述

  3. 在xhell中重启tomcat服务器，

    cd ~
cd /usr/local/apache-tomcat-9.0.16/bin
./startup.sh

  4. 在浏览器运行：http://cungudafa.top:8080/three-0.0.1-SNAPSHOT/user/list

    注意：注意：注意！！！
    （1）8080为云外部端口号，application.properties外部tomcat会用外部tomcat端口号访问，server.port=8090端口会失效

    （2）名称对应，导出的war包全名称 （可以随便更改这个名字，直接重命名，访问路径对应改变）

    （3）访问：http://ip地址 : 外部tomcat端口号/war包全名/访问路径

    （4）上传war之后，必须重启tomcat

    运行效果：
    在这里插入图片描述
    我是直接在xftp中改名，改名后访问：http://cungudafa.top:8080/springboot/user/list
    在这里插入图片描述
    在这里插入图片描述
    这样自定义服务器api接口就发布成功了！?

    后期管理：
    （1）Navicat直接管理数据，
    （2）Vue 前端修改api地址：
    本地测试api接口 改为 服务器api接口：
    原： axios.defaults.baseURL="http://localhost:8090"
    修改为：axios.defaults.baseURL="http://cungudafa.top:8080/springboot"
    在这里插入图片描述

3. 总结及源码

Github
后端：https://github.com/cungudafa/Springboot ----Day9
前端：https://github.com/cungudafa/Vue/

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue