使用docker部署springboot+vue项目

一、前言

经过一段时间的实战学习，先后对SSM项目开发以及使用docker部署上线后，继而对springboot+vue项目进行开发以及使用docker部署上线。OK，无需多言，直接撸起袖子干！

二、docker部署springboot

1、将springboot项目打成jar包

注：记得修改部署的服务器地址

2、将jar包上传到服务器

3、构建镜像

# 1.在/usr/local目录下创建目录springboot_exam
mkdir /usr/local/springboot_exam

# 2.复制jar包到springboot_exam目录
cp ~/exam.jar /usr/local/springboot_exam/exam.jar

# 3.在此目录下创建并编辑Dockerfile文件
vi Dockerfile

# 4.编辑内容
# 依赖的镜像
FROM jdk1.8
 # 将当前目录下的所有jar包拷贝到指定文件springboot_exam_app.jar中，就类似于修改名字
 COPY *.jar /usr/local/springboot_exam/springboot_exam_app.jar
# 指定镜像创建者信息
MAINTAINER Henley
# 运行的端口,与上传的jar包的端口一致
CMD ["--server.port=8080"]
# 暴露所设置的端口，与上传的jar包的端口一致
EXPOSE 8080
# 自动运行jar包，这样在启动容器的时候就能自动运行jar包了
ENTRYPOINT ["java","-jar","/usr/local/springboot_exam/springboot_exam_app.jar"]

# 5.构建镜像,注意后面的空格和点，不要省略，（重复一遍）
docker build -t='exam' .

# 6.检查镜像是否创建成功
docker images

4、根据镜像创建容器

docekr run -di --name=exam_web -p 8080:8080 exam

此时，springboot项目部署成功，通过http://39.98.206.240:8080就可以进行访问

三、docker部署nginx

1、拉取镜像

docker pull nginx

2 、先创建容器，为挂载做准备

docker run -di --name=nginx -p 80:80 nginx

注：docker中的nginx默认无法访问80以外的端口，解决方法参考https://blog.csdn.net/lbd_123/article/details/126539982?spm=1001.2014.3001.5506

3、为挂载目录做准备

docker cp nginx:/etc/nginx /root/nginx_exam/nginx 

docker cp nginx:/usr/share/nginx/html /root/nginx_exam

4、创建容器并挂载目录

docker rm -f nginx

docker run --name nginx_exam -v /root/nginx_exam/nginx/html:/usr/share/nginx/html -v /root/nginx_exam/nginx:/etc/nginx -p 80:80 -di nginx

5、然后将vue打包后的dist目录放到本地的/root/nginx_exam/html目录中，这样就相当于放到了nginx容器内部中

6、修改root/nginx_exam/nginx/conf.d中default.conf文件

​ 进到该目录输入vi default.conf进行编辑

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

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

    location / {
        #根指定为我们自定义的目录（位于Nginx安装目录下）
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;

        # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
        try_files $uri $uri/ @router;
    }


    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }

    # 关键步骤，这里表示将所有的 /api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
    # 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
        location /api/ {
          # 后端的真实接口
          proxy_pass http://39.98.206.240:8080/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
        }
    

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    
}

在这里已经部署成功。进行测试