Dokcer 部署Springboot+Vue

1. 打jar包

mvn package
// 打包后的文件名 blog-springboot-1.0.jar

2. 将jar包复制到服务器的/usr/local/e5bb96-blog/boot目录下，并创建 DockerFile文件

# 基础镜像
FROM openjdk
# 作者信息
LABEL maintainer = "xxx@qq.com"
# 添加到docker中,改名为blog-springbooot.jar
ADD blog-springboot-1.0.jar /home/blog-springboot.jar
# 开发端口
EXPOSE 8608
# 容器执行命令
ENTRYPOINT ["java","-jar","/home/blog-springboot.jar"]

3. 使用Dockerfile生成镜像

docker build -t blog-springboot /usr/local/e5bb96-blog/boot
// 附加：删除镜像
docker rmi -f blog-springboot:latest

Successfully built 99d9b8bf0821
Successfully tagged blog-springboot:latest
[root@VM-12-8-centos e5bb96-blog]# docker images
REPOSITORY                               TAG            IMAGE ID       CREATED          SIZE
blog-springboot                          latest         99d9b8bf0821   14 minutes ago   464MB

4. 运行容器

docker run -d -p 8608:8608 --name blog-springboot blog-springboot
// 查看容器日志
docker logs 容器ID

5. Docker部署nginx（跳过）

# 拉取镜像
docker pull nginx

# 创建 Nginx 容器，因为要拷贝一些文件以及设置挂载目录，需要先启动一个nginx容器
docker run -di --name nginx -p 80:80 --privileged=true nginx

6. vue项目部署：在/usr/local/e5bb96-blog/nginx/目录下创建Dockerfile

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER wuze <xxx@qq.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

7. 用指令 npm run build 打包 vusjs 项目。打包成功后会生成一个目录 dist，放入/usr/local/e5bb96-blog/nginx/所在文件
8. 在放入/usr/local/e5bb96-blog/nginx/目录创建nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;


    server {
        listen       80;
        server_name  服务器IP;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
	          try_files $uri $uri/ /index.html;      
        }
        
        location /api/ {        
		        proxy_pass http://服务器IP:8608/; 
		    }
        
    }

    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}
}

9. 创建vue镜像

docker build -t blog-vue /usr/local/e5bb96-blog/nginx/

10. 运行容器

docker run -p 86:80 --name blog-vue -d blog-vue

11. 重启 Nginx 容器

docker restart nginx
# 查看日志
docker logs -f nginx

12. 注意：如果图片相关存储到服务器本地，存储的位置不是宿主机，而是容器内

图片映射的IP地址应为容器IP

nginx.conf

location /img/ {        
        proxy_pass http://服务器IP:8608/img/; 
}

重新打包镜像发布即可。