linux上如何使用docker部署前后端分离项目(含部署多个前端页面的方法)
  OZvmQgWagkrp 2023年11月13日 23 0

(目录)

前言

使用前一段时间写的前后端分离开发的简单小项目,确保本地可以启动 在这里插入图片描述

部署所需镜像汇总

  1. mysql镜像 2. 后端工程自定义镜像 3. nginx镜像

<font color=red>下面介绍部署过程</font>

一、mysql镜像

(1)拉取mysql镜像

选择使用的mysql版本,我用的是8.0.33

docker pull mysql:8.0.33

在这里插入图片描述

(2)查看镜像

docker images

在这里插入图片描述

(3)创建mysql容器

docker run  --name mysql  -e MYSQL_ROOT_PASSWORD=123456  -p 3306:3306  -v /tmp/mysql/conf/hmy.cnf:/etc/mysql/conf.d/hmy.cnf  -v /tmp/mysql/data:/var/lib/mysql  -d  mysql:8.0.33
  • 密码是123456
  • 端口是 3306

(4)使用本地的datagrip或者其他工具连接MySQL

记得开放3306端口,不会开放端口,可以查看我的这篇文章 华为云服务器如何开放端口(有详细图文教程)

输入云服务器的IP地址,mysql的用户和密码 在这里插入图片描述

(5)导入sql文件

在这里插入图片描述

二、后端部署

(1)创建工作目录

在云服务器的 /home 下创建 spark 目录(任意名称都可以),作为工作目录: 在这里插入图片描述

(2)修改配置文件

修改 application 配置文件中 MySQL 数据库地址为云服务器地址:

在这里插入图片描述

(3)本地后端项目打包

在这里插入图片描述 得到jar包

在这里插入图片描述

(4)编写 Dockerfile 文件

FROM java:8
VOLUME /tmp
ADD *.jar /app.jar
EXPOSE 8080

RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

(5)上传jar包和Dockerfile

将本地打好的jar包和Dockerfile文件上传至云服务器的 /home/spark 目录下: 在这里插入图片描述

(6)创建镜像

使用编写的 Dockerfile 创建后台项目的镜像:

docker build -t spark .

将spark改为你的项目名,最后还有一个点,千万别忘了

在这里插入图片描述 查看构建好的镜像

在这里插入图片描述

(7)使用构建好的镜像启动容器

创建自定义后端项目的容器:docker run -d -p 8080:8080 --name spark spark

在这里插入图片描述

(8)网页访问测试

记得开放相应的端口,不会开放端口,可以查看我的这篇文章 华为云服务器如何开放端口(有详细图文教程)

在这里插入图片描述 可以看到后端工程启动成功。

三、nginx部署

这里我使用了nginx一键部署,详情请看 如何在linux系统中运行.sh文件(shell脚本),以一键部署nginx为例子

简单来讲就是运行别人编写的脚本在linux上一键部署nginx,更方便,传统的方法我觉得很麻烦,咱程序员嘛,就得怎么方便怎么来 在这里插入图片描述 最后的效果 在这里插入图片描述

四、前端部署

(1)修改配置文件

修改前端工程 vue.config.js 文件,target修改为 云服务器 地址 在这里插入图片描述

(2)前台工程打包

# 构建生产环境
npm run build:prod

打好包之后前端工程目录下会出现一个dist文件夹:

在这里插入图片描述

(3)上传dist包

将dist包上传至云服务器宿主机 /usr/local/nginx/html 目录下: 在这里插入图片描述 这里的dist为前台的前端页面,build为后台的前端页面,后面会讲如何用nginx部署多个前端页面

(4)编辑nginx配置文件

步骤一、修改 /usr/local/nginx/conf 目录下的 nginx.conf文件:

  • 找到server下的server_name,后边改为云服务器的ip
  • 在location / 下的root中,以html文件夹开始,将路径改为下方index里index.html文件所在的文件夹里

在这里插入图片描述

注:如果你也需要部署多个前端页面,则需要

  • 在server里再写个location,将后边的 / 路径改为 /backstage (这里改为你想用的路径)
  • 将原先 root 位置的 root 改为alias (只能存在一个root,其余的都只能写成alias)

步骤二、重启nginx容器

需要重启nginx容器之后,修改的配置文件内容才会同步过去。

  • 在使用一键部署nginx的情况下,需要先转到 /usr/local/nginx/sbin 目录下,再执行下面的命令
./nginx -s reload

在这里插入图片描述

(5)访问测试

前台 在这里插入图片描述 后台 在这里插入图片描述 可以看到前后端已经连通了,已经有数据了,这样不仅你可以在本地访问,也可以在别的电脑上访问,后续你也可以在云服务器上绑个域名

在这里插入图片描述 完毕!

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月13日 0

暂无评论

推荐阅读
  eHipUjOuzYYH   2023年12月10日   26   0   0 mysqlsqlUser
  jnZtF7Co41Wg   2023年12月11日   29   0   0 nginx客户端服务端
  wwLZeziuqjLR   2023年12月11日   31   0   0 Dockercentos
  MCWYWqSAMsot   2023年12月11日   33   0   0 Docker
  DnoStTHsc0vp   2023年12月11日   25   0   0 Docker
  jnZtF7Co41Wg   2023年12月10日   22   0   0 nginx客户端服务端NFS
  9JCEeX0Eg8g4   2023年12月11日   25   0   0 mysql配置文件
OZvmQgWagkrp