一、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、把准备的文件上传到同一目录下

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

docker-compose up -d