首页 > 系统相关 >随笔（二十六）『SpringBoot + Vue 简单部署到Linux』

随笔（二十六）『SpringBoot + Vue 简单部署到Linux』

时间：2023-08-05 15:45:31浏览次数：35  
标签：Vue SpringBoot mydata Linux nginx conf mysql import docker

1、安装docker

1.1、卸载系统之前的 docker

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

1.2、安装yum utils包，并设置存储库

sudo yum install -y yum-utils
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

1.3、安装 docker，以及 docker-cli

sudo yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

1.4、启动docker

sudo systemctl start docker

1.5、设置docker开机自动启动

sudo systemctl enable docker

1.6、配置docker阿里镜像加速器

1.6.1：
sudo mkdir -p /etc/docker

1.6.2：
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://9bt3rat6.mirror.aliyuncs.com"]
}
EOF

1.6.3：
sudo systemctl daemon-reload

1.6.4：
sudo systemctl restart docker

1.7、看到docker版本

image

2、安装jdk1.8 『已切换到root』

2.1、直接拉取镜像

docker pull java:8

2.2、查看镜像

docker images

image

3、安装msql5.7

3.1、拉取镜像

docker pull mysql:5.7

3.2、查看镜像

docker images

image

3.3、创建mysql容器并启动

docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

参数说明
-p 3306:3306：将容器的 3306 端口映射到主机的 3306 端口
-v /mydata/mysql/conf:/etc/mysql：将配置文件夹挂载到主机
-v /mydata/mysql/log:/var/log/mysql：将日志文件夹挂载到主机
-v /mydata/mysql/data:/var/lib/mysql/：将配置文件夹挂载到主机
-e MYSQL_ROOT_PASSWORD=root：初始化 root 用户的密码
-d 后台运行容器，并返回容器ID

3.4、查看运行容器

docker ps

image

3.5、mysql配置 vi /mydata/mysql/conf/my.cnf

[client]
default_character_set=utf8
[mysql]
default-character-set=utf8
[mysqld]
collation_server = utf8_general_ci
character_set_server = utf8
skip-character-set-client-handshake
skip-name-resolve

3.6、设置mysql开机自启动

docker update mysql --restart=always

4、安装redis6

4.1、拉取镜像

docker pull redis:6

4.2、查看镜像

docker images

image

4.3、创建挂载目录及文件

4.3.1：
mkdir -p /mydata/redis/conf

4.3.2：
touch /mydata/redis/conf/redis.conf

4.4、创建redis容器并启动

docker run -p 6379:6379 --name redis \
-v /mydata/redis/data:/data \
-v /mydata/redis/conf/redis.conf:/etc/redis/redis.conf \
-d redis:6 redis-server /etc/redis/redis.conf

4.5、查看运行容器

docker ps

image

4.6、设置redis开机自启动

docker update redis --restart=always

​

5、安装nginx1.24.0

5.1、拉取镜像

docker pull nginx:1.24.0

5.2、查看镜像

docker images

image

5.3、将容器的文件复制到宿主机

# 5.3.1：随便创建一个nginx容器
docker run --name nginx -p 80:80 -d nginx:1.24.0

# 5.3.2：复制容器文件
mkdir -p /mydata/nginx/conf
docker cp nginx:/etc/nginx/nginx.conf /mydata/nginx/conf 
docker cp nginx:/etc/nginx/conf.d /mydata/nginx/conf 
docker cp nginx:/usr/share/nginx/html /mydata/nginx/ 

# 5.3.3：关闭此容器
docker stop nginx

# 5.3.4：删除此容器
docker rm nginx

# 5.3.5：删除正在运行的nginx容器
docker rm -f nginx

5.4、创建nginx容器并启动

docker run -p 80:80 --name nginx \
-v /mydata/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /mydata/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /mydata/nginx/log:/var/log/nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-d nginx:1.24.0

5.5、查看运行容器

docker ps

image

5.6、设置nginx开机自启动

docker update nginx --restart=always

6、创建springboot项目

6.1、项目构建

image
image
image
image

6.2、pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.7.RELEASE</version>
    </parent>

    <groupId>com.baihua</groupId>
    <artifactId>arrange-study</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>arrange-study</name>
    <description>部署学习</description>

    <dependencies>
        <!-- web工程 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>

        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.6.13</version>
            </plugin>
        </plugins>
    </build>


</project>

6.2、application.yml

server:
  port: 8080

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://192.168.56.103:3306/arrange?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false
    username: root
    password: root

6.3、项目结构

6.3.1、controller
package com.baihua.controller;

import com.baihua.entity.UserEntity;
import com.baihua.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("user")
@CrossOrigin // 解决跨域问题
public class UserController {

    @Autowired
    private UserService userService;

    // 根据id获取用户
    @GetMapping("get/{id}")
    public UserEntity getUserById(@PathVariable("id") Integer id) {
        UserEntity user = userService.getById(id);
        return user;
    }

}
6.3.2、service
package com.baihua.service;

import com.baihua.entity.UserEntity;
import com.baomidou.mybatisplus.extension.service.IService;

public interface UserService extends IService<UserEntity> {
}


package com.baihua.service;

import com.baihua.dao.UserDao;
import com.baihua.entity.UserEntity;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserDao, UserEntity> implements UserService{
}
6.3.3、dao
package com.baihua.dao;

import com.baihua.entity.UserEntity;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserDao extends BaseMapper<UserEntity> {
}
6.3.4、entity
package com.baihua.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("user")
public class UserEntity {

    private Integer id;

    private String name;

    private Integer age;
}
6.3.5、启动类

image

6.4、创建user表并插入一条数据

image

6.5、启动项目本地测试

image

7、项目打为jar包

7.1、执行命令

mvn clean package

7.2、jar包位置

image

8、jar通过xftp包上传到服务器

8.1、上传位置 /usr/local/java (自己定义)

image

8.2、Dockerfile (位置跟jar包一致)

# 设置本镜像需要使用的基础镜像
FROM  java:8  

# 把jar包添加到镜像中
ADD arrange-study-0.0.1-SNAPSHOT.jar /arrange-study.jar

# 镜像暴露的端口
EXPOSE 8080

# 容器启动命令
ENTRYPOINT ["java","-jar","/arrange-study.jar"]

image

9、构建docker镜像

9.1、执行构建命令

# arrange-study-server 为镜像名称
# 1.0 为镜像版本
# 不要漏了最后的那个.
docker build -t arrange-study-server:1.0 .

9.2、查看镜像

docker images

image

9.3、启动容器

docker run -p 8080:8080 --name arrange-study-server \
-v /mydata/arrange-study-server/logs:/var/log/arrange-study-server \
-d arrange-study-server:1.0

9.4、查看运行容器

docker ps

image

9.5、测试

image

10、创建vue2项目

10.1、项目构建

vue create arrange-study-vue

image
image
image
image
image
image

10.2、启动vue项目

npm run serve

image
image

10.3、安装axios

npm install axios

10.4、编写User.vue组件

<template>
  <div class="user">
    <button @click="getUser">我是谁呢？点我呀！</button>
    <button @click="userHide">我要隐藏！点我呀！</button>
    <div v-if="user.id">id：{{user.id}}</div>
    <div v-if="user.name">name：{{user.name}}</div>
    <div v-if="user.age">age：{{user.age}}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'User',
  data() {
    return {
      user: {}
    }
  },
  methods: {
    // 获取用户
    getUser() {
      axios.get(`http://localhost:8080/user/get/1`).then(res => {
        console.log('res', res);
        this.user = res.data;
      })
    },
    // 隐藏
    userHide() {
      this.user = {};
    }
  }
}
</script>

<style>

</style>

10.5、在App.vue中引入User.vue

image

10.6、浏览器再次查看（本地测试成功）

image
image

11、vue项目打包

11.1、修改User.vue中axios请求的ip地址为服务器地址

 	// 获取用户
    getUser() {
      axios.get(`http://192.168.56.103:8080/user/get/1`).then(res => {
        console.log('res', res);
        this.user = res.data;
      })
    },

11.2、打包命令

npm run build

11.3、打包文件位置

image

11.4、将dist文件夹下的都传到服务器/mydata/nginx/html 下

image

11.5、浏览器 http://192.168.56.103 （访问成功）

image

12、碰到的问题

12.1、Linux可以ping通Windows，反之没ping通

环境：使用vagrant + virtualbox 构建的虚拟机

解决方案：

  1. 找到window中以太网适配器virtualbox的ip地址
  2. 将Vagrantfile文件的config.vm.network "private_network", ip: "“，改为刚查到的那个ip
    image
    image

12.2、文件上传到服务器时发生错误

原因：使用vagrant账号登录的xftp，权限不足，需要root权限

解决方案：

​ 1. 使用chmod -R 777 放开权限【如：chmod -R 777 /mydata 代表mydata文件夹下所有人都可以读写操作】

标签：Vue,SpringBoot,mydata,Linux,nginx,conf,mysql,import,docker
From： https://www.cnblogs.com/xiaonuanxin/p/17608025.html

相关文章

  • linux怎么查看文件夹多大
    方法：1、利用ls命令查看，该命令可将结果以KB、MB等为单位进行显示，语法为“ls-ll”或“ls-lh”；2、利用“du-h–max-depth=1*”命令，该命令可查看当前目录下的各个文件和文件夹的大小；3、利用“du-sh”命令，可查看当前文件夹的总大小；4、利用“du-h–max-depth=0*”命令，可查看直接......
  • Linux git mirror站点
    由于kernel的官网站点和Github镜像下载都很慢，于是想到找一下国内镜像站点。kernel.org有个GitmirroravailableinBeijing,地址为https://kernel.source.codeaurora.cn/,但是已经失效，具体说明看这里。kernel.org上还有个知道如何建立kerelmirror的指导页面，但是没有提供......
  • Linux命令
    ncnc-help：查看nc命令支持的参数nc-lkip(机器的ip地址或者映射)port(端口号)：在此ip机器上启动监听服务，服务端nvip(要通信的机器)port(要通信的机器开启的端口号)：与此ip机器建立通信连接，客户端......
  • IPv6 - linux网络编程
    IPv6网络编程假设双栈服务器有一个IPv4地址、和一个IPv6地址：IPv6服务器启动后创建一个IPv6的监听套接字，假设绑定通配地址客户端调用connect，发送要给IPv4SYN给服务端服务端接收IPv4SYN设置一个标识指示本连接使用IPv4映射的IPv6地址，然后响应一个IPv4SYN/ACK。连接......
  • Vue封装一个瀑布流图片容器组件
    说在前面......
  • Linux5
    vi编辑器1.vi\vim编辑器vi\vim是Linux中最经典的文本编辑器，vim是vi的加强版，兼容vi的所有指令vi\vim编辑器的三种工作模式：命令模式：命令模式下，所敲的按键编辑器都理解为命令，以命令驱动执行不同的功能。此模型下，不能自由进行文本编辑。 输入模式：也就是编辑模式、插入......
  • Vue
    全文为Vue2.0版本学习笔记！！！3.0版本请参考文末。1.前端核心分析1.Vue概述Vue(读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库......
  • Linux-CentOS7_RPM包管理
    常见的软件包封装类型封装类型说明rpm软件包扩展名为“.rpm”一般为二进制包源代码软件包一般为“.tar.gz”、“.tar.bz2”等格式的压缩包包含程序的原始代码附带安装程序的软件包在压缩包内提供install.sh、setup等安装程序或以“.bin”格式的单个执行文件提供绿色免安装的软件......
  • Linux 网络编程常用辅助函数
    最大地址结构structsockaddr_storage;//足够大，能够支持任何套接字地址结构从套接字获取信息 //获取本地连接的地址externintgetsockname(int__fd,__SOCKADDR_ARG__addr,socklen_t*__restrict__len)__THROW;//获取连接另一侧的地址externintgetpeername(......
  • Vue2框架总结
    Vue语法1.基本介绍vue两大特点：响应式编程、组件化。vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99