• 使用 docker 部署前后端分离项目(基于 dockerfile)


    前言

    对于 SpringBoot + Vue 前后端分离项目,一般是先启动后端,再启动前端,通过访问前端地址进行预览。

    比如,后端的端口号是 8081前端的端口号是 8080。既然前后端是不同的端口号,怎么通过访问前端进而与后端通信呢?

    这里就涉及到 Vue 配置请求转发,具体可以参考文章:Vue 配置请求转发

    通过在前端配置请求转发,所有访问 8080 端口的请求,统统都会转发到 8081 上去,进而实现与后端通信。

    部署前后端分离项目实操

    1. 本地数据库迁移到服务器上

    首先要确保服务器上有可供使用的 mysql 数据库,因为我们编写代码一般使用的本地 mysql,但部署到服务器上后,可不能再使用本地 mysql 了。

    在服务器上(如腾讯云服务器)安装 mysql ,建议使用 docker 进行安装。

    将项目用到的数据库导入到服务器上的数据库中,并修改后端项目 application.properties 文件,使其连接服务器上的数据库。

    2. 打包前端项目

    使用 webstorm 打开前端项目,打开终端,运行命令:

    npm run build
    

    该命令执行成功之后,前端项目目录下会生成一个 dist 文件夹,将该文件夹中的两个文件 static 和 index.html 拷贝到 SpringBoot 项目中resources/static/ 目录下。

    3. 打包后端项目

    具体操作见下图:

    1、2、3 是单击,为了关闭 test,4 是双击,为了打包成 jar 包。

    运行成功后,后端项目的 target 目录下,会有一个 jar 包,这就是整个项目的 jar 包,之后就发布这个 jar 包就可以了。

    4. 将 jar 包拷贝到服务器上,并编写 dockerfile

    推荐使用 xshell 连接自己的腾讯云服务器,进入到某个目录中,将 jar 包用鼠标拖拽进来,可以达到上传 jar 包到服务器的效果。也可以使用 xftp 进行上传。

    使用命令 vim Dockerfile 编写 dockerfile ,dockerfile 内容如下:

    FROM centos:7.6.1810
    
    LABEL "author"="爱吃西瓜的番茄酱"
    LABEL "version"="1.0"
    LABEL "email"="you170917@gmail.com"
    
    ADD blogserver-0.0.1-SNAPSHOT.jar blogserver.jar
    
    ADD jdk1.8.0_261 jdk8
    ENV PATH jdk8/bin:$PATH
    
    # 配置环境变量支持中文
    ENV LANG="en_US.UTF-8"
    
    EXPOSE 8081
    
    ENTRYPOINT ["java","-jar","blogserver.jar"]
    

    注意,Dockerfile 中暴露的端口号,就是后端的端口号 8081

    关于 dockerfile 的编写,可以参考文章:Dockerfile 编写规范整理

    5. 通过 Dockerfile 部署运行 jar 包

    主要分为三步:

    1、编写 Dockerfile

    2、构建镜像

    3、运行容器

    这里,就使用上面那个 Dockerfile 。

    先构建镜像:

    docker build -t blogserver:2.0 .
    
    • docker build 是构建镜像的初始命令

    • -t blogserver:2.0 :指定镜像的名字和版本号,可任意取

    • 最后的 . 表示 Dockerfile 在当前目录下

    运行容器

    docker run --name=blog -p 8080:8081 --restart=always -d blogserver:2.0
    
    • docker run:是运行容器的初始命令

    • --name=blog:表示容器的名字叫做 blog

    • -p 8080:8081:表示将服务器 8080 端口,映射到容器内的 8081 端口(这个就是 dockerfile 中暴露的端口号)

    • --restart=always:表示让容器一直运行

    • -d:表示容器后台运行

    • blogserver:2.0 这是运行容器的基础镜像和版本号

    6. 效果

    浏览器访问:http://xxx.xxx.xxx.xxx:8080/index.html,效果如下:

    成功部署好了。

    每天学习一点点,每天进步一点点。

  • 相关阅读:
    TCP详解——传输控制协议(总述)
    sublime text3使用插件SublimeTextTrans设置透明度
    vue学习1
    js事件绑定/监听
    如何成为顶级程序猿
    HTML5中meta属性
    windows安装SVN服务器并设置开机启动
    oracle安装登录sqlplus / as sysdba然后报错ERROR: ORA-01031 insufficient privileges
    移动端和PC端有什么区别
    div+css通用兼容性代码整理
  • 原文地址:https://www.cnblogs.com/youcoding/p/14698240.html
Copyright © 2020-2023  润新知