成为作者

Vue+Springboot 项目部署

用户头像
ZRK
关注
发布于: 2020 年 08 月 31 日
Vue+Springboot项目部署

项目前后端分别开发测试对调完成后，一方面Vue前端项目编译打包，剩下一堆 js、css 以及 html文件等静态资源文件，另一方面Springboot后端项目构建jar包。



采用 Nginx + Server 的方式部署～

环境准备



服务器选用的是阿里云ECS的Ubuntu 18.04.3，与CentOS 的操作基本类似，供参考



常见的软件安装有以下四种方式：源码、二进制（rpm）、yum、脚本安装。



  • 二进制（rpm）安装 ：只需少量的命令，如 apt-get install nginx 但无法解决软件包的依赖关系。

  • yum安装：自动解决软件依赖性，虽操作更简单方便，但同上无法干预，不能按需安装。

  • 源码安装：可以设定参数，按照需求，进行安装，且可选择安装的版本，灵活性较大。

  • 脚本安装：即把复杂的软件包安装过程写成了程序脚本。讲解不考虑。



Nginx安装



考虑到后续在nginx引入gzip模块，使用源码安装！



  1. 安装编译环境gcc g++的依赖库 (阿里云ECS自带，可省，不过试了也无妨～)

sudo apt-get install build-essential

  1. 安装nginx的依赖库 pcre zlib ssl

sudo apt-get install libtool

  1. 安装nginx

wget http://nginx.org/download/nginx-1.17.0.tar.gz
tar -zxvf nginx-1.17.0.tar.gz

cd到解压目录，开始编译安装。引入gzip模块，nginx静态压缩的条件。

./configure --with-http_gzip_static_module
make
make install

安装目录：/usr/local/nginx



常用命令

cd sbin/
./nginx #启动
vim conf/nginx.conf #修改配置文件
./nginx -s reload #重新加载配置文件启动



Docker安装

二进制（rpm）安装即可，具体可参照官网

sudo apt-get update
# 允许apt通过HTTPS使用仓库
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
# 添加Docker官方GPG key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
# 设置Docker稳定版仓库
sudo add-apt-repository "deb [arch=arm64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
# 安装
sudo apt-get install docker-ce docker-ce-cli containerd.io



常用命令

# 启动/停止/重启docker
sudo service docker start/stop/restart
# 列出镜像
docker images
# 拉取镜像
docker image pull 容器名:Tag
# 删除镜像
docker rmi 镜像名
# 创建容器
docker run [选项参数] 镜像名 
# 正在运行的容器
docker ps
# 全部容器
docker ps -a
# 停止/启动的容器
docker stop/start 容器名或容器id
# 删除容器
docker rm 容器名或容器id



接下来以我的Vue+Springboot项目lovecanfly为例说明。

1.后端



后端采用docker部署。项目使用了mysql数据库，所以除了springboot项目本身的docker部署，为方便也使用docker的mysql容器。



容器通信：多个容器之间需要通信，使用以往的--link在互连的容器数量较多时，复杂度会显著增加（官网已不建议）。这里推荐使用自定义bridge网络通信。



bridge是docker默认的网络驱动模型。



默认的bridge上的容器只能通过子网IP互连，无法通过DNS解析名称或别名。但docker无法保证容器重启后的子网IP地址不变，所以更好的方式是通过别名进行互联。



自定义bridge在网络中加入了DNS服务器，将容器名与IP地址进行匹配，解决了该问题，操作简便。

1.1 创建自定义bridge网络

docker network create lovecanfly-net



1.2 创建并运行mysql容器

# 拉取 mysql 5.7镜像
docker pull mysql:5.7

# 创建mysql容器
docker run -d -p 3306:3306 --network lovecanfly-net --name zrkmysql -e MYSQL_ROOT_PASSWORD=949872703  mysql:5.7



  • -d：容器后台运行

  • -p：端口映射，此处映射 主机3306端口 到 容器的3306端口

  • --network：指定bridge网络

  • –name：容器名，此处命名为zrkmysql。后续web则可通过容器名zrkmysql连接mysql

  • -e：配置信息，此处配置mysql的root用户的登陆密码

1.3 创建并运行springboot容器



1.在application.properties里更改数据库连接url



更改连接的ip名为之前mysql设置好的容器名。





接下来，一种比较方便的做法是直接一键打包部署，可以参考松哥的这篇文章：一键部署 Spring Boot 到远程 Docker 容器。这种方法是在IDEA安装docker插件，更改远程连接服务器上的docker配置，使IDEA可远程连接服务器上的docker，一键即可在本地打jar包同时构建镜像。



但这种做法在更改服务器上docker配置将无密码状态暴露端口给外界，方便自己也方便了他人，有明显的安全风险。我第一次也是这么做的，结果第二天阿里云上的服务器就被攻击安装并运行了挖矿容器～所以不太推荐哈～



2.打jar包



选择如图或在项目跟路径输入mvn package打jar包，成功后会在target目录生成jar包





3.编写Dockerfile文件



新建一个Dockerfile文件，编辑内容如下：

FROM java:8
VOLUME /tmp
ADD target/lovecanfly-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java","-jar","/app.jar"]



简单说明：



基础镜像使用java，VOLUME 指定了临时文件目录为/tmp，将jar包添加到容器中并更名为app.jar



按命令行 java -jar /app.jar 运行jar包。



4.制作镜像及运行容器



把 lovecanfly-0.0.1-SNAPSHOT.jar app.jar 和 Dockerfile上传至服务器同一目录。



进入该目录，

docker build -t lovecanfly .   # 注意最后的. 不可省, -t 为指定镜像名

生成并运行容器，

docker run -d -p 8081:8081 --network lovecanfly-net --name lovecanfly lovecanfly



所有步骤完成，输入 docker ps

2.前端



npm install compression-webpack-plugin -D

我使用的是vue-cli 4，在项目根路径下的vue.config.js

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {  
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 1024,
                        deleteOriginalAssets: false
                    })
                ]
            }
        }
    }
}

然后 build，在项目dist文件夹中生成带.gz格式静态文件即可。

3.Nginx配置



之前在安装nginx时已引入gzip静态模块，vim /usr/local/nginx/conf/nginx.conf 配置nginx

gzip_static  on; # 开启静态gzip压缩

    upstream lovecanfly{ # 上游server名称，与 proxy_pass http://lovecanfly 对应
         server 127.0.0.1:8081 weight=2;
    }

    server {
        listen       80; #访问端口
        server_name  lovecanfly.zhouruikang.cn; # 访问域名
        
        # 访问项目url: lovecanfly.zhouruikang.cn/index.html,
        # 配置 / 直接转发 /index.html，即访问lovecanfly.zhouruikang.cn即可
        rewrite ^/$ /index.html redirect; 
        

        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
            root /usr/local/nginx/html/lovecanfly; #所有静态文件直接读取硬盘
            index index.html index.htm;
            expires 7d; #缓存7天
        }


        location /{
             proxy_pass http://lovecanfly;  # 访问api转发上游server
             tcp_nodelay     on;
             proxy_set_header Host            $host;
             proxy_set_header X-Real-IP       $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

    }



保存后，

/usr/local/nginx/sbin/nginx -s reload

4.启动项目



之前前端dist目录下的静态文件，上传至nginx刚配置好的 /usr/local/nginx/html/lovecanfly 路径中。访问刚才设置好的域名server_name lovecanfly.zhouruikang.cn;即可！



前提是，要先将域名zhouruikang.cn与服务器对应哦～太简单就省啦。



划线
评论
复制
发布于: 2020 年 08 月 31 日 阅读数: 58
Vue前后端分离springboot部署
用户头像

ZRK

关注

还未添加个人签名 2020.08.20 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2020, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 |  京 ICP 备 16027448 号 - 5 京公网安备 京公网安备 11010502039052号
Vue+Springboot项目部署