使用docker部署前后端分离项目SpringBoot、Vue

天空的城_

已于 2024-04-27 10:23:02 修改

阅读量970

点赞数 19

分类专栏：运维文章标签： docker 容器运维

于 2024-01-19 12:21:35 首次发布

本文链接：https://blog.csdn.net/m0_56553975/article/details/135694671

版权

运维专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在阿里云服务器上安装Docker和docker-compose，包括设置安全组、部署Docker和docker-compose、编写Dockerfile和docker-compose.yml文件，以及配置Nginx以实现前端和后端服务的整合。作者还分享了解决常见问题的方法和参考资料链接。

摘要由CSDN通过智能技术生成

1.阿里云服务器

服务器准备
开放安全组（用啥就开放啥）

2.安装docker

2.1文档说明

文档

https://help.aliyun.com/zh/ecs/use-cases/deploy-and-use-docker-on-alibaba-cloud-linux-2-instances#aa11e8210adyt

最终效果（步骤略）

3.安装docker-compose

sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

安装完后赋予可执行权限

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

检查是否安装成功

docker-compose --version

出现问题

解决办法
https://blog.csdn.net/uoYevoLi520/article/details/131046798?spm=1001.2014.3001.5506
步骤略

4.编写Dockfile/docker-compose.yml文件

4.1编写文件

Dockfile模板

#依赖jdk8环境
FROM openjdk:8

#对外暴露8085
EXPOSE 8085
#复制server-1.0-SNAPSHOT到docker容器中并命名为app.jar
ADD server-1.0-SNAPSHOT.jar app.jar
#执行命令
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

我的

#依赖jdk8环境
FROM openjdk:8

#对外暴露8080 8081
EXPOSE 8080
EXPOSE 8081

#复制server-1.0-SNAPSHOT到docker容器中并命名为app.jar
ADD renren-admin.jar app.jar
#执行命令
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "/app.jar","--spring.profiles.active=dev"]

编写docker-compose.yml

模板

version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 80:80  # 暴露端口
    volumes: # 挂载
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  mysql:
    image: mysql:5.7.27
    ports:
      - 3306:3306
    environment: # 指定用户root的密码
      - MYSQL_ROOT_PASSWORD=admin
  redis:
    image: redis:latest
  server:
    image: server:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8085:8085
    depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
      - mysql
      - redis

我的(注意填写数据库密码)

version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 80:80  # 暴露端口
    volumes: # 挂载
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  mysql:
    image: mysql:8.0
    ports:
      - 3306:3306
    environment: # 指定用户root的密码
      - MYSQL_ROOT_PASSWORD=
  server:
    image: renren-security:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8080:8080
      - 8081:8081
    depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
      - mysql

4.2修改ip为docker-compose.yml文件中的服务名称

5.编写Nginx的配置文件nginx.conf

5.1创建html文件夹，编写config文件

创建文件夹

编写配置文件

#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       80;
      #服务器ip地址
      server_name  your IP;
      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
      }
      #请求转发 请求带有renren-admin则转发到http://ip:8080;按照自己的进行修改
  	  location /renren-admin/ {
  		  proxy_pass http://ip:8080;
  		  proxy_redirect default;
  		  rewrite ^/api/(.*) /$1 break;
  	  }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

6.打包前后端

6.1打包前端

修改ip地址

npm run build
1. 如果出现报错，按照报错内容进行修改
2. 我的错误（大多是代码中有红色的横线，但是运行的时候没有报错，我也就没有管了，但是打包会不成功）
  1. 解决办法（我的错误的解决办法）：都是因为直接const 一个变量，但是有时候没有定义完整,用interface先声明

interface backDataItem {
  id: string;
  name: string;
  category: string;
  depList: string;
  des: string;
  difficulty: string;
  funds: number;
  createBy: string;
  time: string;
}
interface BackInfo {
  id: string;
  name: string;
  cateId: string;
  categoryList: { id:string,value: string; label: string }[];
  depIds: string[];
  depDataSourceList: { id:string,value: string; label: string }[];
  startTime: string;
  endTime: string;
  des: string;
  funds: number;
  difficulty: number;
  status: number;
  createName: string;
  background: string;
  content: string;
  achievementsAndProspects: string;
  remarks: string;
  files: string[];
  fileTemp: string[];
}