java前后端分离项目部署

淡淡的烟草味﹌ 2024-03-31 13:50 32阅读 0赞

##### 一、Window环境部署 #####

###### 前端部署 ######

1、首先打包项目：

> npm run build;

2、配置nginx

> Vue项目的入口是index.html,nginx路由必须要经过这个文件，所以要配置nginx.conf文件。
> 
> 找到localhost,添加一行代码 try\_files $uri $uri/ /index.html last;

location / {
       root   html;
       try_files $uri $uri/ /index.html last;
       index  index.html index.htm;
    }

3、重启nginx

> nginx.exe -s restart

###### 后端部署 ######

1、打包项目

mvn clean package -Dmaven.test.skip=true

2、启动项目即可

java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

##### 二、Linux 环境部署 #####

1、配置后端项目在生产环境的yml

spring:
      datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://mysql:3306/simple_blog?&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
        username: root
        password: 123456
    
    mybatis-plus:
      mapper-locations: classpath:/mapper/*.xml
    #  configuration:
    #    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    
    shiro-redis:
      enabled: true
      redis-manager:
        host: redis:6379

> **因为mysql和redis和后端项目都是在同一网络下编排的，所以可以用编排的名称来代替指定的ip地址**

2、打包后端项目

mvn clean package -Dmaven.test.skip=true

3、编写Dockerfile构建后端镜像

FROM java:8
    EXPOSE 8081
    ADD simpleBlog-0.0.1-SNAPSHOT.jar app.jar
    RUN bash -c 'touch /app.jar'
    ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=pro"]

> **注意：如果项目中第三方服务都已经部署好在其他服务上的，则只需在后端项目中配置好指定的地址即可，剩下的步骤的都是基于所有服务都是在同一个linux服务器上的**

4、编写docker-compose.yml

version: "3"
    services:
      nginx: 
        image: nginx:latest  
        ports:
        - 80:80  
        volumes: 
        - ./nginx/html:/usr/share/nginx/html
        - ./nginx/nginx.conf:/etc/nginx/nginx.conf
        privileged: true 
        image: mysql:8.0.29-oracle
        ports:
        - 3306:3306
        volumes:
          - ./mysql/data:/var/lib/mysql
          - ./mysql/config/my.cnf:/etc/my.cnf
        environment: 
          - MYSQL_ROOT_PASSWORD=123456
      redis:
        image: redis:latest
      vueblog:
        image: vueblog:latest
        build: . 
        ports:
        - 8081:8081

> **mysql和nginx都是用数据卷来挂载在宿主机外面的，不然每次启动容器都会丢失上次的数据和已经配置好的前端项目。**
> 
> nginx: 首先在宿主机内创建html文件夹，然后把前端项目打包好的dist文件夹的文件全部放在html文件夹上，然后修改nginx.conf
> 
> mysql：首先创建data和config文件夹，然后在config文件夹上创建my.cnf文件。

**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       80;
          server_name  localhost;
          location / {
              root   /usr/share/nginx/html;
              try_files $uri $uri/ /index.html last; 
              index  index.html index.htm;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
      }
    }

**my.cnf**

[mysqld]
    user=mysql
    default-storage-engine=INNODB
    character-set-server=utf8
    [client]
    default-character-set=utf8
    [mysql]
    default-character-set=utf8

5、把准备的文件上传到同一目录下

![在这里插入图片描述][17848e361ee9431b888c660493bb9426.png]

6、运行指令进行项目编排,出现下图内容

> docker-compose up -d

![在这里插入图片描述][4aa6d815b5e14d22b702f5813fae34f3.png]

[17848e361ee9431b888c660493bb9426.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bd9fe834708a4856ba24b5d3cf6b3bdf.png
[4aa6d815b5e14d22b702f5813fae34f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/499d2b607874475ea83e01501023dac3.png