SpringBoot+Vue项目部署到Nginx

1、项目打包上传
打包本地SpringBoot项目

mvn clean package

打包Vue项目

yarn build

或者

npm run build

上传SpringBoot项目的jar包和Vue项目的目录dist

2、部署到Nginx
/usr/local/docker目录下创建nginx文件夹
nginx目录下创建conf、html目录，conf下创建nginx.conf文件

mkdir -p /usr/local/docker/nginx
cd /usr/local/docker/nginx
mkdir conf html
vi conf/nginx.conf

输入以下内容

worker_processes  1;
events {
    use epoll;
    worker_connections  1024;
}
http {
    include	  mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_header_buffer_size 2k;
    server {
	listen       8081;
    server_name  ;
    location / {
        root   /usr/share/nginx/html/html80/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

	location /api {
            proxy_pass http://*.*.*.*:8080/;
        }
    }
}

listen和server_name分别填你vue项目的端口和访问ip
try_files属性是为了防止页面刷新报404错误
location /api处代理你的后台接口

html目录下创建html80目录，将dist解压到html80下
nginx下创建enviroment目录，进入enviroment创建Dockerfile文件

jar包改成你自己的

FROM java:8
COPY mydepartment-0.0.1-SNAPSHOT.jar mydepartment.jar
EXPOSE 8080
ENTRYPOINT ["nohup","java","-jar","mydepartment.jar","&"]

nginx下创建docker-compose.yml文件

根据自己项目的情况修改相应配置

version: '3.1'
services:
  nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8081:8081
    volumes:
      - ./conf/nginx.conf:/etc/nginx/nginx.conf
      - ./html:/usr/share/nginx/html
  mydepartment:
    container_name: mydepartment
    build: environment
    ports:
      - 8080:8080

运行

docker-compose up -d

欢迎评论交流！！！