素材巴巴 > 程序开发 >

Docker部署前后端分离项目(Docker Nginx Vue SpringBoot)

程序开发 2023-09-15 09:13:22

一、简介

使用Docker+Docker-Compose部署前后端分离的项目

二、安装软件

已经安装可以跳过步骤。

安装 docker

安装docker步骤

安装 docker-compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
 

给权限

sudo chmod +x /usr/local/bin/docker-compose
 

查看版本

docker-compose --version
 

安装 mysql

拉取mysql镜像

docker pull mysql:5.7
 

启动mysql

docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:5.7
 

在本机连接到 docker 内的mysql (然后创建自己项目的数据库)
在这里插入图片描述

安装 nginx

拉取 nginx

docker pull nginx
 

三、打包前后端项目

需要注意打包的时候,要修改对应的转发到后端的ip
在这里插入图片描述

1.打包前端文件 运行后会有一个dist得文件夹(这就是打包得前端项目)

npm run build
 

在这里插入图片描述
2.后端打包 将maven的test禁用 (选择test,点闪电)
后端打包需要注意,mysql的连接配置需要修改为服务器的ip端口和密码
在这里插入图片描述
运行命令进行打包

mvn clean package
 

在这里插入图片描述
打包完成后会在 taget 目录生成一个 jar 包(要确保 jar 包是可以运行的!)
在这里插入图片描述

四、编写文件

在服务器内创建文件夹(随便一个位置)我是在根目录创建得

#到根目录
 cd /
 #创建文件夹
 sudo mkdir lbs
 #进入文件夹内
 cd lbs
 #创建nginx和html文件夹
 mkdir -p nginx/html
 

将前端打包生成的 dist 文件夹内的全部文件复制到 创建的 html 文件夹内

在这里插入图片描述

将后端打包生成的 jar 包放到 lbs 目录下

在这里插入图片描述

新建文件 Dockerfile 文件

vim Dockerfile
 

Dockerfile 文件内容

#使用java 8 版本
 FROM java:8
 COPY dormitoryadmin.jar /dormitoryadmin.jar
 CMD ["--server.port=8999"]
 #对外暴露的端口
 EXPOSE 8999
 ENTRYPOINT ["java", "-jar", "/dormitoryadmin.jar"]
 

这两个路径要对上
在这里插入f描述

新建文件 docker-compose.yml

vim docker-compose.yml
 

docker-compose.yml 的内容

version: "3"
 services:nginx: # 服务名称,用户自定义image: nginx:latest  # 镜像版本ports:- 8083:8083  # 前端项目暴露的端口volumes: # 挂载 # html和nginx.conf 挂载- /lbs/nginx/html:/usr/share/nginx/html- /lbs/nginx/nginx.conf:/etc/nginx/nginx.confprivileged: true # 这个必须要,解决nginx的文件调用的权限问题dormitoryadmin:image: dormitory:latestbuild: . # 表示以当前目录下的Dockerfile开始构建镜像ports:- 8999:8999 #后端项目暴露的端口privileged: true
 

添加 nginx.conf 文件
docker-compose.yml 内已经挂载了,写了之后,创建nginx 容器会自动同步容器内的 nginx.conf 文件

在这里插入图片描述

创建 nginx.conf 文件

vim nginx/nginx.conf
 

nginx.conf 的内容(注意看注释,如果自己项目有对应的问题可以根据注释解决)

#user  root;
 worker_processes  1;
 events {worker_connections  1024;
 }
 http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       8083;server_name  localhost;location / {root   /usr/share/nginx/html;# nginx 报404需要加下面这行try_files $uri $uri/ /index.html last; index  index.html index.htm;#nginx 报405加下面这行#error_page 405 =200 http://$host$request_uri;}#nginx 报 连接错误 、没有数据(We’re sorry but “XXX” doesn’t work...放开下面的注释(我是这个问题,如果不行可以试试方法二)#location ^~ /api/ {#proxy_pass http://114.0.0.0:8999/;#}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
 }

在这里插入图片描述

补充:nginx 报 We’re sorry but “XXX” doesn’t work properly without JavaScript enabled. Please enable it to continue
解决办法二:将前端项目路由里面的mode的history改成hash(没有问题则不用理)在这里插入图片描述
最后的目录结构是这样的
lbs目录(jar包 + Dockerfile + docker-compose.yml需要在同一目录下)
在这里插入图片描述

运行 docker-compose.yml 文件的内容,他会自动帮我们构建 nginx容器 项目

docker-compose up -d
 

查看容器

docker ps -a
 

在这里插入图片描述

五、运行效果

输入前端项目的ip+端口号
在这里插入图片描述
登录,成功跳转。
在这里插入图片描述

参考博客:
部署:https://www.cnblogs.com/iandf/p/14737958.html
问题解决:https://blog.csdn.net/qq_40915333/article/details/121761092


标签:

上一篇: Laravel入门学习----安装与配置 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。