SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)

环境准备,前后端项目搭建

1.vue-cli脚手架搭建

首先安装node,cmd输入node -v查看是否安装成功

安装淘宝npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化vue-cli项目

进入新建文件夹,全局安装vue-cli脚手架 cnpm install -g vue-cli

 

初始化webpack

 

vue init webpack nba-demo

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第1张图片

安装成功后导入webstrom

进入对应文件夹路径执行npm start

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第2张图片

简单的vue-cli脚手架创建成功了

2.SpringCloud项目搭建

为了方便测试这里会使用idea新建一个注册中心,一个配置中心,两个客户端

创建Eureka注册中心

eureka server创建,eureka项目

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第3张图片

启动类添加

@EnableEurekaServer注解

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第4张图片

yml修改为

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第5张图片

eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/
    register-with-eureka: false
spring:
  application:
    name: eureka
server:
  port: 8761

启动成功

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第6张图片

eureka client创建,client1,client2客户端创建

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第7张图片

启动类添加注解

@EnableDiscoveryClient

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第8张图片

pom文件添加依赖


    org.springframework.boot
    spring-boot-starter-web

yml添加配置

eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/
spring:
  application:
    name: client1
server:
  port: 8081

启动项目,注册客户端成功

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第9张图片

client2项目,跟client1项目就一致,只修改了端口,client2为8082端口

eureka高可用

当其中一台的服务发生故障时不影响整体服务状况,不能因为一台服务器的问题导致服务停止,高可用的方法有三种:主从方式、双机双工方式、集群工作方式。

SpringCloud+vue+element-ui+docker前后端项目实践到部署(一)_第10张图片

eureka服务相互注册,在defaultZone用逗号的方式添加其他eureka服务的地址,客户端在defaultZone添加所有eureka服务的地址就能实现了eureka的高可用。

SpringCloud+vue+element-ui+docker前后端项目实践到部署(六)

SpringCloud+vue+element-ui+docker前后端项目实践到部署(五)

SpringCloud+vue+element-ui+docker前后端项目实践到部署(四)

SpringCloud+vue+element-ui+docker前后端项目实践到部署(三)

SpringCloud+vue+element-ui+docker前后端项目实践到部署(二)

 

 

 

 

 

你可能感兴趣的:(前后端项目)