当前位置:   article > 正文

Docker部署Vue+Springboot项目

docker部署vue+springboot

一、部署Springboot项目

  1.1先将本地的java项目打成jar包。

         再右上角进行maven操作。24386d7c3cf344f4887e71ea466c964c.png

fb0e759ccadd44f780f8137cfe1892bf.png

  1.2将jar包上传到服务器当中。

先再目录/home 下创建一个文件夹(classRoom)用于存放后端打镜像时需要的文件。

1139d2dc4c394b1385e1dd1c5220fab2.png

如果是服务器的话可以直接将文件拖拽到想要转移的地方。

8709bb9b6c05498aa0667795aebc7a9a.png

因为我们需要将这个jar包打成镜像放在docker上运行,那么我们需要一个配置文件用于镜像的运行。图片中的Dockerfile就是这个配置文件,要注意这个两个文件要放在同一目录下。那么现在就开始来编写配置文件。

DockerFile:(这里里面我只写了必须的配置,其他配置都走的是默认配置)

  1. #表示从名为 java 的官方镜像库中拉取标签为 8 的镜像作为基础镜像
  2. FROM java:8
  3. #表示将构建上下文中的 classroom-realtime-feedback-0.0.1-SNAPSHOT.jar 文件复制到镜像中的 #classroom-realtime-feedback.jar
  4. COPY classroom-realtime-feedback-0.0.1-SNAPSHOT.jar classroom-realtime-feedback.jar
  5. #声明镜像中的应用程序会监听 8080 端口
  6. EXPOSE 8080
  7. #表示定义镜像的入口点,即当容器启动时,会执行 java -jar classroom-realtime-feedback.jar 命令来运行应用程序
  8. ENTRYPOINT ["java","-jar","classroom-realtime-feedback.jar"]

1.3开始构建镜像并运行容器。

        要在classRom目录下执行这条语句,注意最后还有一个“ ”,这个点表示的是当前目目录,表示使用当前目录下的Dockerfile文件进行镜像的构建一个名字为classroom-realtime-feedback的镜像。

1bddee757c3f4981b9f5eb6ca096e12f.png

执行完语句之后我们可以看看有没有这个镜像。

d6393a7ed58d4f6bb4fd734db40dd3fb.png

那么后面我们就开始创建个容器执行这个镜像。执行下面这条语句,可以看到我写了三个端口映射,是因为我这个是websocket项目,有两个端口是websocket监听的。要注意如果你们项目有多个端口,那么一定要进行映射,不然请求就打不到后端。我之前就是只监听了一个端口导致没有ws请求没有建立连接。所以这个端口映射是因项目而异。

        这个语句的意思就是为名为classroom-realtime-feedback的镜像创建一个容器名为classroom-realtime-feedback并运行。

1a9b0509039749299cb91ae5f28e5782.png

 通过docker ps命令可以看到我们这个容器正在运行:

65c5e65b85e249a5bf09adba7af80249.png到此位置springboot项目已经部署成功。

二、部署vue项目(使用nginx配合转发)

注意vue项目部署有一个大坑!!!

        就是我正常部署完成后我的前端请求一直打不到后端,报post 405错误,然后我搁往上查了半天好多博客都说是什么nginx无法使用Post请求访问静态资源,要用GET请求。然后我按照他们的要求进行修改结果还是没成功,结果最后发现并不是他们说的那样。

        是因为我之前再vue项目中使用了路由转发。但是这个配置只有再开发环境时能生效,再生产环境时,无法生效,就是根本走不到这里来。所以导致url没有进行处理,后端没有对应的请求接口。再生产环境中我们要使用nginx进行转发。

f3115f4d170140849bad348bde70de29.png

下面我们进行正式的Vue项目的部署 :

  2.1 将本地vue项目使用npm run build项目进行构建。

    fa09cafc15d44f1dbb19689eb9a11087.png

 

2.2将本地的dist文件夹上传到服务器当中 

现在服务器中创建一个文件夹 vue -nginx用于存放关于前端的文件

478ca53c68e94cc0b46365ca6a41271c.png

然后将dist文件拉去到vue-nginx文件夹中。因为我们需要以nginx为基础镜像构建镜像,所以我们还得编写一下nginx的配置文件(default.conf),用在其中编写适合我们项目的转发规则:

07f4d0299f2446828551dbe56a905dfa.png

default.conf:

我再其中写的转发规则可以按照自己的路径规则进行改写

 

  1. server {
  2. listen 80;
  3. server_name 自己服务器的ip; # 修改为docker服务宿主机的ip
  4. #这是最后进行匹配的
  5. location / {
  6. root /usr/share/nginx/html;
  7. index index.html index.htm;
  8. try_files $uri $uri/ /index.html =404;
  9. #error_page 405 =200 @405;
  10. }
  11. #当url中有/test/的会将这个后面的和proxy_pass的路径进行拼接再进行转发
  12. #如/test/login会变成自己后端ip+端口/login,然后进行转发
  13. location ^~/test/ {
  14. proxy_set_header Host $host;
  15. proxy_set_header X-Real-IP $remote_addr;
  16. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  17. #ip为后端服务地址
  18. proxy_pass 自己后端ip+端口/;
  19. }
  20. error_page 500 502 503 504 /50x.html;
  21. location = /50x.html {
  22. root html;
  23. }
  24. }

编写完nginx配置文件那么我们需要编写镜像配置文件Dockerfile:

  1. FROM nginx
  2. # 设置维护者信息
  3. MAINTAINER wuing
  4. # 删除默认的配置文件
  5. RUN rm /etc/nginx/conf.d/default.conf
  6. # 添加你的配置文件到镜像中
  7. ADD default.conf /etc/nginx/conf.d/
  8. # 将dist文件夹下的内容复制到镜像的/usr/share/nginx/html/目录下
  9. COPY dist/ /usr/share/nginx/html/

这样文件都准备好了,可以开始镜像的创建了。

   2.3开始构建镜像并运行容器

注意前端构建也要再前端目录下进行构建,并需要“ ”,表示根据当前路径下的Dockerfile文件进行镜像的构建。

16f11c25b8814d7099d625345a081670.png

f78bd43612e94eebb3872c4f21b8e17c.png

然后还是创建容器,注意这里的80端口映射映射的是nginx的端口,要和那个配置文件了写的一致

6fec732aa5644e159e5433288b35095c.png

 

到此为止我也就构建完毕了,让我们来看看效果:

三、效果演示

访问服务器地址+9090端口就可以之间访问前端默认首页了。

c49772ce214e4374a850c42d51f51d9e.png

 我们试试和后端的交互,可以看出登录成功。

6c6d7a157419475c88767fd4930ddef3.png

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/186362?site
推荐阅读
相关标签
  

闽ICP备14008679号