Docker部署SpringBoot+Vue前后端分离项目——Dockerfile篇(三)

文章目录

  • 前后端分离项目部署
    • 环境文件准备
      • 服务端DockerFile-server
      • 前端DockerFile-web
      • nginx配置文件
    • 部署流程图
    • 后端部署流程
    • 前端部署流程
    • Nginx相关配置
  • 问题

前后端分离项目部署

环境文件准备

服务端DockerFile-server

FROM centos:7
RUN yum -y update \
    && yum -y install vim \
    && yum -y install git \
    && yum -y install java-1.8.0-openjdk-devel.x86_64 \
    && yum install -y maven \
    && mkdir ~/.m2

前端DockerFile-web

# 依赖ce:ntos环境
FROM centos:7

#安装vim、git和nvm环境
RUN yum -y update \
    && yum -y install vim \
	&& yum -y install git \
	&& git --version \
	&& cd ~/ \
	&& git clone https://github.com.cnpmjs.org/nvm-sh/nvm.git .nvm \
	&& cd ~/.nvm && git checkout v0.35.3 \
	&& echo "source ~/.nvm/nvm.sh" >> ~/.bashrc && source ~/.bashrc

nginx配置文件

# 定义后端接口地址
upstream myserver{
    server 172.109.0.3:8000;
}


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

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

    location / {
        root   /myproject/anquanjiaoyu/anquanjiaoyu_web/dist;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }

    # 后端接口配置
    location /api {
         proxy_set_header Host $http_host;
	     proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://myserver;  # 后端接口地址,通常为docker服务端的ip地址。
	}


    # swagger 配置
    location /swagger-ui.html {
        proxy_pass http://myserver;
        index  index.html index.htm;
    }

    location /webjars {
	proxy_pass http://myserver;
        index  index.html index.htm;
    }

    location /swagger-resources {
      proxy_pass http://myserver;
      index  index.html index.htm;
    }

    # 静态资源配置
    location ^~ /resource {
	 alias  /myproject/anquanjiaoyu/resource/SafeCaseSource/;
  	 autoindex on;
    }
    #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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}


部署流程图

Docker部署SpringBoot+Vue前后端分离项目——Dockerfile篇(三)_第1张图片

后端部署流程

  1. 宿主机创建zhqfile文件夹,之后的所有文件够保存在该目录下

  2. 构建Dockerfile-server镜像

    1. 服务器引入Dockerfile-server文件
    2. 进入Dockerfile-server所在目录,构建镜像
      1. docker build -f Dockerfile-server -t centos-server .
  3. 上传后端项目(完整项目)

  4. 创建docker容器,用于后端的服务管理。

    1. docker run -t -i --name safeedu-server -v /zhqfile/anquanjiaoyu_server:/myproject centos-server
    2. -t -i 启动后直接进入容器。 问题:退出容器后,容器自动停止。(使用ctrl + p +q 可解决)
    3. 容器名称 safeedu-server
    4. 挂载目录 挂载容器中的myproject目录到宿主机的后端项目文件
    5. 不分配端口号,并使用docker默认分配的ip地址(后端服务的真实地址不暴露,端口号使用项目中配置的端口号)
  5. 进入项目所在目录进行打包 mvn package

  6. 运行项目 java -jar jar包名称 如: java -jar smpe-system-1.0.0-RELEASE.jar

    1. 指定项目环境,如果不指定为项目中yml的设置。

      1. java -jar smpe-system-1.0.0-RELEASE.jar --spring.prifiles.active=dev
    2. 指定项目端口,如果不指定为项目中yml的设置。

      1. java -jar smpe-system-1.0.0-RELEASE.jar --server.port = 8080
  7. 附:

    1. 已安装git,可在容器中进行git操作。之后拉代码可在容器中直接进行拉取运行。
    2. 已安装maven,可在容器中进行maven的操作。拉取代码后可以直接在容器中打包
    3. 查看当前容器的ip地址:docker inspect --format=’{{.NetworkSettings.IPAddress}}’ 容器号
    4. 查看当前容器的详情信息:docker inspect 容器号
  8. 至此,后端服务已经启动好。

  9. 遗留:nginx反向代理到后端服务地址(下方nginx相关配置提到)

前端部署流程

  1. 宿主机创建zhqfile文件夹,之后的所有文件够保存在该目录下
  2. 构建Dockerfile-web镜像
    1. 服务器引入Dockerfile-web文件
    2. 进入Dockerfile-web所在目录,构建镜像
      1. docker build -f Dockerfile-web -t centos-web .
  3. 上传前端项目(完整项目,node_modules可以不上传,文件大,我们可以在容器内打包)
  4. 创建docker容器,用于前端的服务管理。
    1. docker run -t -i -p 80:80 --name safeedu-web -v /zhqfile/anquanjiaoyu_web:/myproject centos-server
  5. 进入容器,安装node(node是一个运行环境,是一个js语言解释器)
    1. 查看node版本 nvm list -remote
    2. 安装node nvm install v14.1.0
  6. 进入容器中前端项目所在文件夹。
    1. npm install 安装依赖
    2. npm run build 打包
  7. 附:
    1. 已安装git,可在容器中进行git操作。之后拉代码可在容器中直接进行拉取运行。
    2. 已安装nvm,可以实现不同的node版本切换,适应不同的项目。
  8. 至此,前端服务已经启动好。
  9. 遗留:nginx监听前端项目端口。

Nginx相关配置

  1. 下载nginx最新版 docker pull nginx

  2. 创建nginx容器并运行

    1. docker run -it --name nginx --net host -v /zhqfile/project:/myproject -v /zhqfile/nginx:/nginx_conf -d nginx
      1. –net = host时,它告诉容器使用主机网络堆栈.因此,您无法将端口暴露给主机,因为它是主机(就网络堆栈而言).
      2. /zhqfile/project:/myproject 挂载项目文件
      3. /zhqfile/nginx:/nginx_conf 挂载nginx的配置文件
  3. 配置nginx容器

    1. 建立配置文件与nginx_conf的链接(软连接可以实现数据共享)
      1. 建立conf.d与nginx_conf的软连接(直接建立软连接,在宿主机访问会找不到文件,替代方案:将/etc/nginx/conf.d移动到/nginx_conf,在/nginx_conf/conf.d建立与/etc/nginx的软连接)
        1. mv /etc/nginx/conf.d /nginx_conf
        2. ln -s /nginx_conf/conf.d /etc/nginx
      2. 建立nginx.conf与nginx_conf的软连接
        1. mv /etc/nginx/nginx.conf /nginx_conf
        2. ln -s /nginx_conf/nginx.conf /etc/nginx
    2. 目的:方便在宿主机统一管理nginx.conf和conf.d下各项目的配置文件
  4. 修改default.d的名称为safeedu.d(项目名称,方便管理)

    1. vm 旧 新
  5. 配置safeedu.d

    1. server {
          listen       8001;
          listen  [::]:8001;
          server_name  localhost;
      
          #access_log  /var/log/nginx/host.access.log  main;
      
          location / {
              root   /myproject/anquanjiaoyu/anquanjiaoyu_web/dist;
              index  index.html index.htm;
              try_files  $uri $uri/ /index.html;
          }
      
          #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 {
      
      
  6. 重启nginx容器

  7. 浏览器搜索ip地址:8001 前端部署成功。但接口不能访问,需要配置nginx反向代理到真实的后端接口地址。

  8. 前后端交互,配置nginx的反向代理,代理到后端服务。配置safeedu.d

    # 定义后端接口地址
    upstream myserver{
        server 172.109.0.3:8000;
    }
    
    
    # /api表示后端接口的统一标识,访问/api时,会自动帮我们代理到真实的服务器172.109.0.5:8000
        # 后端接口配置
        location /api {
             proxy_set_header Host $http_host;
    	     proxy_set_header X-Real-IP $remote_addr;
    		proxy_set_header REMOTE-HOST $remote_addr;
    		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    		proxy_pass http://myserver;  # 后端接口地址,通常为docker服务端的ip地址。
    	}
    
    
        # swagger 配置
        location /swagger-ui.html {
            proxy_pass http://myserver;
            index  index.html index.htm;
        }
    
        location /webjars {
    	proxy_pass http://myserver;
            index  index.html index.htm;
        }
    
        location /swagger-resources {
          proxy_pass http://myserver;
          index  index.html index.htm;
        }
    
    
  9. 重启nginx

  10. 至此,前后端服务部署完成。

  11. 配置静态资源

    1. 静态资源放在当前项目的目录下,与前后端项目放在一起

    2. location ^~ /resource {
        alias  /myproject/anquanjiaoyu/resource/SafeCaseSource/;
        autoindex on;
          }
      
      
    3. 使用浏览器访问/resource时,会自动读取我们的静态资源

  12. 重启nginx: docker restart nginx

    1. 附:nginx -t 查看修改的配置文件是否可以测试成功(successful即可以)
  13. 至此,所有配置搞定。

问题

多个前端项目,如何监听端口号

  1. zhqfile目录下创建nginx/conf.d目录,并在conf.d文件内上传nginx配置文件default.d
  2. 使用–net = host时,它告诉容器使用主机网络堆栈.因此,您无法将端口暴露给主机,因为它是主机(就网络堆栈而言).

你可能感兴趣的:(vue.js,服务器,spring,boot)