Docker部署前后端分离项目（Docker+Nginx+Vue+SpringBoot）

一、简介

使用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"]

这两个路径要对上

新建文件 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.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  dormitoryadmin:
    image: dormitory:latest
    build: . # 表示以当前目录下的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.youkuaiyun.com/qq_40915333/article/details/121761092