基于 Spring Cloud 与 Vue.js 的前后端一站式部署

副标题#e#

本文将带大家从一台全新的 CentOS 服务器开始,部署一套完整的前后端分离项目。操作步骤非常详细,新手友好型文章~

  • 后端技术栈:Spring Cloud 微服务架构 + Redis + RabbitMQ + MySQL;
  • 前端技术栈:Vue + ElementUI;
  • 部署工具:后端用 Docker 容器化部署,并把命令封装成脚本自动执行;前端用 Nginx 做代理。

前期准备

系统版本为:CentOS 7.6 64位。

连接服务器

要对远程服务器进行操作,首先要连上服务器才行。打开命令行工具,输入以下命令,再输入服务器实例的密码,即可远程连接到服务器。

  1. ssh root@xxx.xx.xx.xx 

@ 之后是服务器的公网 IP,假如服务器 IP 地址为:120.456.78.123,那么连接服务器的命令为:

  1. ssh root@120.456.78.123 

敲回车之后会让输入密码,输入正确的密码即可。

安装 Docker

Docker 容器化部署的优点就不多说了,直接上干货如何安装 Docker。

下面直接把代码框里的命令拷贝到命令行执行就可以。

先移除旧版本(如果有):

  1. sudo yum remove docker \ 
  2.               docker-client \ 
  3.               docker-client-latest \ 
  4.               docker-common \ 
  5.               docker-latest \ 
  6.               docker-latest-logrotate \ 
  7.               docker-logrotate \ 
  8.               docker-selinux \ 
  9.               docker-engine-selinux \ 
  10.               docker-engine 

安装一些必要的工具:

  1. sudo yum install -y yum-utils device-mapper-persistent-data lvm2 

添加软件源信息:

  1. sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 

更新 yum 缓存:

  1. sudo yum makecache fast 

安装 Docker-ce:

  1. sudo yum -y install docker-ce 

启动 Docker 后台服务:

  1. sudo systemctl start docker 

测试运行 hello-world(这步可要可不要,目的是验证身份安装 Docker 成功,如果成功会打印出 Hello World):

  1. docker run hello-world 

安装 MySQL

拉取 MySQL 5.7 版本的镜像:

  1. docker pull mysql:5.7 

运行 MySQL:

  1. docker run -p 3306:3306 --name mysql -v $PWD/conf:/etc/mysql/conf.d -v $PWD/logs:/logs -v $PWD/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 

命令说明:

  • -p 3306:3306:将容器的 3306 端口映射到主机的 3306 端口。
  • -v $PWD/conf:/etc/mysql/conf.d:将主机当前目录下的 conf/my.cnf 挂载到容器的 /etc/mysql/my.cnf。
  • -v $PWD/logs:/logs:将主机当前目录下的 logs 目录挂载到容器的 /logs。
  • -v $PWD/data:/var/lib/mysql:将主机当前目录下的 data 目录挂载到容器的 /var/lib/mysql 。
  • -e MYSQL_ROOT_PASSWORD=123456:初始化 root 用户的密码。

注意在运行之前切换到合适的目录,因为 MySQL 容器映射到本机的目录是映射的当前目录的相对目录。比如当前目录为 /root/abc,那执行完上面的命令后,会在 /root/abc 下创建 MySQL 挂载出来的目录和文件。

安装 Redis

也可以直接执行运行命令,如果系统检测到没有安装此镜像,则会拉取安装,再运行。

下载并运行 redis:4.0.8:

  1. docker run -p 6379:6379 -t -dit redis:4.0.8 

安装 RabbitMQ

跟上面一样也是直接执行运行命令安装并运行 RabbitMQ:3.7.7:

  1. docker run -d --hostname my-rabbit -p 5672:5672 -p 15672:15672 rabbitmq:3.7.7-management 

到此部署微服务后端项目的前期环境准备工具已经做完。如果要部署前端还需要安装 Nginx,这个在前端部署的章节再讲。

后端部署

部署后端需要做的工作有两个,一个是修改每个微服务模块的配置文件 application.yml ,另一个是编写 Dockerfile。

#p#副标题#e##p#分页标题#e#

先看目录结构:

基于 Spring Cloud 与 Vue.js 的前后端一站式部署

一共有 5 个模块,其中 common 是纯 Java 代码用于各模块公共代码的提取,剩下四个每个是一个独立的微服务模块,所以我们要部署 eureka 、user、education、gateway 四个模块,也就是最后会运行四个独立的 Docker 容器。

具体的业务逻辑就不做过多说明了,本文只讲部署。

配置文件 application.yml

为了本地调试和服务器部署互不影响,我们把原来的 application.yml 拆分为三个文件:

  • application.yml:总配置,指定应该用下面哪个配置
  • application-dev.yml:开发环境配置
  • application-pro.yml:生成环境配置

另外为了方便,把 Dockerfile 也放到同级目录下。如图:

基于 Spring Cloud 与 Vue.js 的前后端一站式部署

下面是三个配置文件的代码:

  1. spring: 
  2. profiles: 
  3. active: pro 
  4.  
  5.  
  6.  
  7. eureka: 
  8. client: 
  9. service-url: 
  10.   defaultZone: http://localhost:8761/eureka/ 
  11. instance: 
  12. prefer-ip-address: true 
  13.  
  14. server: 
  15. port: 8899 
  16.  
  17. spring: 
  18. application: 
  19. name: education 
  20. datasource: 
  21. driver-class-name: com.mysql.jdbc.Driver 
  22. username: root 
  23. password: 123456 
  24. url: jdbc:mysql://127.0.0.1/edu?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai 
  25. jpa: 
  26. show-sql: true 
  27. # 如果字段值为null则不返回 
  28. jackson: 
  29. default-property-inclusion: non_null 
  30.  
  31. rabbitmq: 
  32. host: localhost 
  33. port: 5672 
  34. username: guest 
  35. password: guest 
  36.  
  37. redis: 
  38. port: 6379 
  39. database: 0 
  40. host: 127.0.0.1 
  41. password: 
  42. jedis: 
  43.   pool: 
  44.     max-active: 8 
  45.     max-wait: -1ms 
  46.     max-idle: 8 
  47.     min-idle: 0 
  48. timeout: 5000ms 
  49.  
  1.  
  2. eureka: 
  3. client: 
  4. service-url: 
  5.   defaultZone: ${SPRING-CLOUD-EUREKA-ZONE} 
  6. instance: 
  7. prefer-ip-address: true 
  8.  
  9. server: 
  10. port: 8899 
  11.  
  12. spring: 
  13. application: 
  14. name: education 
  15. datasource: 
  16. driver-class-name: com.mysql.jdbc.Driver 
  17. username: root 
  18. password: 123456 
  19. url: jdbc:mysql://${SPRING-CLOUD-MYSQL-HOST}/${SPRING-CLOUD-DB-NAME}?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai 
  20. jpa: 
  21. show-sql: true 
  22. # 如果字段值为null则不返回 
  23. jackson: 
  24. default-property-inclusion: non_null 
  25.  
  26. rabbitmq: 
  27. host: ${SPRING-CLOUD-RABBIT-MQ-HOST} 
  28. port: 5672 
  29. username: guest 
  30. password: guest 
  31.  
  32. redis: 
  33. port: 6379 
  34. database: 0 
  35. host: ${SPRING-CLOUD-REDIS-HOST} 
  36. password: 
  37. jedis: 
  38.   pool: 
  39.     max-active: 8 
  40.     max-wait: -1ms 
  41.     max-idle: 8 
  42.     min-idle: 0 
  43. timeout: 5000ms 

这个项目配置比较全,Redis、RabbitMQ、MySQL、JPA 都有配置。

dev 跟 pro 的配置差不多,只是把 dev 中的 localhost 、127.0.0.1 这两个本地的地址,换成了诸如 ${SPRING-CLOUD-EUREKA-ZONE}、${SPRING-CLOUD-RABBIT-MQ-HOST} 等变量。

#p#副标题#e##p#分页标题#e#

新建 education_deploy.sh 文件,把两行代码放进去:

  1. docker build -t education . 
  2. docker run -p 8899:8899 -t -dit --restart=always education 

注意第一行最后有个点 . ,如果你想把打出来的镜像名叫 abc,对外暴露的端口是 6666,则应该这样写:

  1. docker build -t abc . 
  2. docker run -p 6666:6666 -t -dit --restart=always abc 

上传到服务器

#p#副标题#e#

新建一个文件夹,并为每个微服务模块新建一个文件夹用于存放 jar 包、Dockerfile 和自动化部署文件,目录结构如图:

基于 Spring Cloud 与 Vue.js 的前后端一站式部署

把 back_end 这个文件夹整体压缩,压缩命令为:

  1. tar -cvf back_end.tar ./back_end 

执行完后会在目录下看到 back_end.tar 压缩文件。

使用 ssh 命令登录到服务器,根目录下新建一个 edu 文件夹,进入这个文件夹,查看当前目录,记住这个目录:

  1. //新建文件夹 edu 
  2. mkdir edu 
  3.  
  4. //进入到 edu 文件夹内 
  5. cd edu 
  6.  
  7. //查看当前目录,会输出:/root/edu 
  8. pwd 

记住你要传到服务器的位置:/root/edu,再回到本机刚才压缩 back_end.tar 文件的目录,执行以下命令把 back_end.tar 发送到服务器的 /root/edu 目录下:

  1. scp back_end.tar root@123.456.789.10:/root/edu 

上传完之后,在服务器解压:

  1. tar -xvf back_end.tar 

然后依次进入到各个模块的文件夹内,执行 sh 脚本:

  1. sh ./education_deploy.sh 

都运行完之后后端微服务就部署完啦!

常用 Docker 命令

部署完还要检验是否部署正确,先从 Docker 开始检查,最后在浏览器输入接口地址看能否调通。

下面的命令都在 CentOS 服务器上执行。

查看当前运行的容器,看 MySQL、Redis、RabbitMQ 和你自己的项目是否运行:

  1. docker ps 

基于 Spring Cloud 与 Vue.js 的前后端一站式部署

查看日志

想进入到容器中查看日志:

  1. docker logs 容器 ID 

比如想查看容器 ID 为 378af204f7bc 的容器日志,应该执行:

  1. docker logs 378af204f7bc 

如果容器运行了很长时间,将会产生非常多的日志,直接使用 docker logs 会把所有日志都打印出来,可不可以只打印最后多少行或者从某个时间之后的日志呢?当然可以。

查看指定时间后的日志,只显示最后 100 行:

  1. docker logs -f -t --since="2019-10-24" --tail=100 CONTAINER_ID 

只打印最后 50 行日志:

  1. docker logs --tail=50 容器 ID 

查看最近 30 分钟的日志:

  1. docker logs --since 30m 容器 ID 

查看某时间之后的日志:

  1. docker logs -t --since="2019-10-24T13:23:37" CONTAINER_ID 

查看某时间段日志:

  1. docker logs -t --since="2019-10-24T13:23:37" --until "2019-10-25T12:23:37" CONTAINER_ID 

停止和启动

停止容器:

  1. docker stop 容器 ID 

查看所有容器(包括已经停止的):

  1. docker ps -a 

重新启动容器(容器被停止了,但还未被删除):

  1. docker start 容器 ID 

删除容器和镜像

如果项目有改动,最好把之前的容器、镜像都删掉,再运行新的容器。

先停止容器:

  1. docker stop 容器 ID 

再删除容器:

  1. docker rm 容器 ID 

查看 image 镜像:

  1. docker images 

删除镜像:

  1. docker rmi 镜像 ID 

前端部署

先把前端项目打包,压缩为 tar 文件,发送到服务器上,在服务器解压。

要用 Nginx 做代理需要先安装 Nginx。

安装 Nginx

#p#副标题#e##p#分页标题#e#

先下载安装基础库:

  1. yum -y install gcc gcc-c++ autoconf pcre pcre-devel make automake 
  2. yum -y install wget httpd-tools vim 

安装 Nginx:

  1. sudo yum install nginx 

配置 Nginx

Nginx 的配置文件目录:

Nginx 主配置文件:

  1. Nginx 主配置文件: 
  2. /etc/nginx/nginx.conf 
  3. /etc/nginx 
  4. /etc/nginx/conf.d 
  5. /etc/nginx/conf.d/default.conf 

我们来看 nginx.conf 默认的配置是什么样:

  1. # For more information on configuration, see: 
  2. #   * Official English Documentation: http://nginx.org/en/docs/ 
  3. #   * Official Russian Documentation: http://nginx.org/ru/docs/ 
  4.  
  5. user nginx; 
  6. worker_processes auto; 
  7. error_log /var/log/nginx/error.log; 
  8. pid /run/nginx.pid; 
  9.  
  10. # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. 
  11. include /usr/share/nginx/modules/*.conf; 
  12.  
  13. events { 
  14. worker_connections 1024; 
  15.  
  16. http { 
  17. log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ' 
  18.                   '$status $body_bytes_sent "$http_referer" ' 
  19.                   '"$http_user_agent" "$http_x_forwarded_for"'; 
  20.  
  21. access_log  /var/log/nginx/access.log  main; 
  22.  
  23. sendfile            on; 
  24. tcp_nopush          on; 
  25. tcp_nodelay         on; 
  26. keepalive_timeout   65; 
  27. types_hash_max_size 2048; 
  28.  
  29. include             /etc/nginx/mime.types; 
  30. default_type        application/octet-stream; 
  31.  
  32. # Load modular configuration files from the /etc/nginx/conf.d directory. 
  33. # See http://nginx.org/en/docs/ngx_core_module.html#include 
  34. # for more information. 
  35. include /etc/nginx/conf.d/*.conf; 
  36.  
  37. server { 
  38.     listen       80 default_server; 
  39.     listen       [::]:80 default_server; 
  40.     server_name  _; 
  41.     root         /usr/share/nginx/html; 
  42.  
  43.     # Load configuration files for the default server block. 
  44.     include /etc/nginx/default.d/*.conf; 
  45.  
  46.     location / { 
  47.     } 
  48.  
  49.     error_page 404 /404.html; 
  50.         location = /40x.html { 
  51.     } 
  52.  
  53.     error_page 500 502 503 504 /50x.html; 
  54.         location = /50x.html { 
  55.     } 
  56.  
  57. # Settings for a TLS enabled server. 
  58. #    server { 
  59. #        listen       443 ssl http2 default_server; 
  60. #        listen       [::]:443 ssl http2 default_server; 
  61. #        server_name  _; 
  62. #        root         /usr/share/nginx/html; 
  63. #        ssl_certificate "/etc/pki/nginx/server.crt"; 
  64. #        ssl_certificate_key "/etc/pki/nginx/private/server.key"; 
  65. #        ssl_session_cache shared:SSL:1m; 
  66. #        ssl_session_timeout  10m; 
  67. #        ssl_ciphers HIGH:!aNULL:!MD5; 
  68. #        ssl_prefer_server_ciphers on; 
  69. #        # Load configuration files for the default server block. 
  70. #        include /etc/nginx/default.d/*.conf; 
  71. #        location / { 
  72. #        } 
  73. #        error_page 404 /404.html; 
  74. #            location = /40x.html { 
  75. #        } 
  76. #        error_page 500 502 503 504 /50x.html; 
  77. #            location = /50x.html { 
  78. #        } 
  79. #    } 
  80.  
  81. }  

#p#副标题#e##p#分页标题#e#

如果报了 Permission denied,有很大可能是当前登录用户跟 nginx.conf 文件第一行声明的用户不匹配。

  1. connect() to 127.0.0.1:8000 failed (13: Permission denied).... 

将 user nginx; 改为 user root; 再次重新加载配置一般就可以解决。

以上就是部署前后端的全部内容,大佬们有问题可以在评论区交流。

dawei

【声明】:嘉兴站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。