Docker部署SpringBoot +Vue项目流程详解（含域名 + HTTPS）

news2024/10/6 18:36:29

文章目录

      • 前言
      • 1、选购服务器
      • 2、部署 Docker
      • 3、前端、后端项目打包
      • 4、配置 Dockerfile
      • 5、配置 Nginx
      • 6、配置 DockerCompose
      • 6、启动 DockerCompose 完成部署
      • 7、【可选】域名 + SSL证书

前言

本次整体部署操作使用阿里云服务器，这里我选择的是香港地区的2核2G ECS（可以省略域名备案操作）。

涉及到的中间件如下：

  • Nginx
  • MySQL
  • Redis
  • 后端项目
  • 前端项目

在这里插入图片描述

1、选购服务器

首先登录到阿里云的官网，选购一台公网服务器，由于本次我部署项目体量比较小，所以这里选择的ECS服务器配置如下：

  • 系统：CentOS 7.9
  • 配置：2核2G（按量） + 公网ip
  • 地区：中国香港

选购完毕服务器后，将本次部署需要的安全组进行开放：
在这里插入图片描述

2、部署 Docker

首先在阿里云服务器上安装好Docker和DockerCompose，在后续部署过程中需要通过Docker方式，具体安装步骤参考下述文章第1节：

https://blog.csdn.net/weixin_46594796/article/details/122750009

通过下述命令可以判断是否安装成功：
在这里插入图片描述

3、前端、后端项目打包

前端后端打包之前，需要将项目配置信息进行调整，主要是将前后端项目配置文件中的本地地址调整为你申请的阿里云ECS公网ip地址，后端配置举例：
在这里插入图片描述
配置调整完毕后，需要前端代码和后端代码进行打包操作。

  • 针对前端：执行npm run build
    打包完成后，可以看到前端dist文件
    在这里插入图片描述

  • 针对后端：执行mvn clean package -Dmaven.test.skip=true
    打包完成后，可以看到后端jar文件
    在这里插入图片描述

将后端jar和前端dist文件夹中的内容上传到阿里云ECS根目录（~），然后按照下述操作进行：

# 创建文件夹
mkdir /opt/project
mkdir /opt/project/backend
mkdir /opt/project/ssl

mkdir /opt/project/nginx
mkdir /opt/project/nginx/html
mkdir /opt/project/nginx/log

mkdir /opt/project/mysql
mkdir /opt/project/mysql/conf
mkdir /opt/project/mysql/data

mkdir /opt/project/redis
mkdir /opt/project/redis/conf
mkdir /opt/project/redis/data

# 移动前后端项目文件
cd ~
mv project-test.jar /opt/project/backend
mv index.html /opt/project/nginx/html
mv static /opt/project/nginx/html

4、配置 Dockerfile

Dockerfile的作用是将后端SpringBoot的项目Jar包build成Docker镜像。
首先创建Dockerfile文件：

# 进入到backend目录
cd /opt/project/backend

# 创建Dockerfile文件
vim Dockerfile

将下述内容同步到Dockerfile中：

# 基础镜像：构建JDK8镜像依赖
FROM openjdk:8

# 作者
MAINTAINER 徐志斌

# 宿主机文件 COPY 镜像（类似COPY，不过COPY不能自动解压文件、访问网络资源）
ADD project-test.jar /project-test.jar

# 运行成容器时的端口
EXPOSE 9999

# 容器启动时执行（类似CMD）
ENTRYPOINT ["java", "-jar", "project-test.jar"]

构建SpringBoot项目jar镜像：

# docker build -t 镜像名 -f 文件名 工作目录
docker build -t project-test -f Dockerfile /opt/project/backend

构建成功后，通过命令docker images查看刚刚生成的镜像：
在这里插入图片描述
这样就说明Dockerfile没有任何的问题，此时就可以通过命令将SpringBoot项目JAR镜像删除：

docker rmi 镜像id

5、配置 Nginx

进入目标目录，创建好Nginx配置文件：

# 进入目录
cd /opt/project/nginx

# 创建配置文件
vim nginx.conf

将下述配置复制到nginx.conf文件中（注意换成自己的公网ip）：

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  8.210.65.213;

      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
      }

      location /user/ {
          proxy_pass http://8.210.65.213:9999;
          proxy_redirect default;
          rewrite ^/user/(.*) /$1 break;
      }

      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

6、配置 DockerCompose

DockerCompose的作用是批量操作Docker容器，这样就可以一键部署好我们的环境了。

首先进入到目标目录，创建docker-compose.yml文件：

# 进入目标目录，创建文件
cd /opt/project
vim docker-compose.yml

将下述内容复制到文件中：

version: '3'
 
services:
  # Nginx
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /opt/project/nginx/html:/usr/share/nginx/html
      - /opt/project/nginx/log:/var/log/nginx
      - /opt/project/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /opt/project/ssl:/etc/nginx/ssl
    privileged: true

  # MySQL
  mysql:
    image: mysql:8.0.27
    container_name: mysql
    environment:
      TZ: Asia/Shanghai
      MYSQL_ROOT_PASSWORD: Xuzhibin123.
      MYSQL_DATABASE: bingo
    ports:
       - 3306:3306
    volumes:
       - /opt/project/mysql/data:/var/lib/mysql
       - /opt/project/mysql/conf:/etc/mysql/conf.d
    privileged: true
    restart: always

  # Redis
  redis:
    image: redis:6.2.6
    container_name: redis
    ports:
      - 6379:6379
    environment:
      TZ: Asia/Shanghai
    privileged: true
    restart: always

  # 后端JAR
  backend-project:
    image: backend-project
    container_name: backend-project
    build: ./backend # 运行Dockerfile
    ports:
      - 9999:9999
    depends_on:  # mysql,redis启动后在启动
      - mysql
      - redis

6、启动 DockerCompose 完成部署

# 运行 docker-compose.yml
cd /opt/project
docker-compose up -d

此时就可以通过输入ip地址访问到部署完毕的SpringBoot + Vue项目了：
在这里插入图片描述

7、【可选】域名 + SSL证书

注意：国内ECS服务器想要配置域名需要进行备案操作（时间非常久），所以我本篇文章我选择的ECS服务器地区为香港，这样可以省略掉域名备案操作！

关于配置域名和SSL证书流程请参考如下文章：
https://blog.csdn.net/weixin_46594796/article/details/130446464

注意：配置好域名后，需要将前端项目中的公网ip切换成域名地址！

最后 Nginx 大致如下：

worker_processes  1;

events {
  use epoll;
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
 
  upstream backend {
     server 8.210.65.213:9999 max_fails=2 fail_timeout=30s;
  }

  # HTTP转为HTTPS
  server {
    listen       80;
    server_name  www.xuzhibin.top;
    rewrite ^(.*) https://www.xuzhibin.top;
  }

  server {
      listen       443 ssl;
      server_name  www.xuzhibin.top;

      ssl_certificate      /etc/nginx/ssl/xuzhibin.top.pem;
      ssl_certificate_key  /etc/nginx/ssl/xuzhibin.top.key;
      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;
      ssl_ciphers  HIGH:!aNULL:!MD5;
      ssl_prefer_server_ciphers  on;

      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
      }

      location ^~/user/ {
          proxy_pass http://backend;
      }

      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1121590.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

打击勒索病毒：防御.kat6.l6st6r勒索病毒的最佳策略

打击勒索病毒：防御.kat6.l6st6r勒索病毒的最佳策略

导言： 我们日常生活和工作的方方面面都离不开数字化，但这也意味着面临日益复杂的网络威胁。.kat6.l6st6r勒索病毒就是其中之一，如果你的计算机感染了这种恶意软件，你的数据可能会遭到加密并要求支付赎金才能解锁。在这篇终极指南…
阅读更多...
STM32F4_音乐播放器

STM32F4_音乐播放器

目录 前言 1. WAV简介 1.1 WAVE文件的内部结构 2. WM8978简介 3. I2S简介 4. 硬件设计 5. 实验程序 5.1 main.c 5.2 I2S.c 5.3 I2S.h 5.4 WM8978.c 5.5 WM8978.h 前言 STM32F4开发板拥有全双工I2S（也就是可以同时双向进行传输，A到B传输信息的…
阅读更多...
强化学习问题（7）--- Python和Pytorch，Tensorflow的版本对应

强化学习问题（7）--- Python和Pytorch，Tensorflow的版本对应

1.问题 之前下载的python3.8，在对应Pytorch和Tensorflow时没太在意版本，在运行一些代码时，提示Pytorch和Tensorflow版本过高，直接降下来，有时候又和Python3.8不兼容，所以又在虚拟环境搞一个Pyhon3.7&#x…
阅读更多...
Brachistochrone：使用变分法找到最快下降曲线

Brachistochrone：使用变分法找到最快下降曲线

一、说明 对于任何对数学和科学感兴趣的人，您可能已经知道了急速线，因为它经常在各种流行的教学频道（例如 Vsauce 和 3Blue1Brown）上谈论。虽然有多种方法可以解决急速线问题，但在这篇文章中，本文将使用变分…
阅读更多...
【C++】哈希应用——海量数据面试题

【C++】哈希应用——海量数据面试题

哈希应用——海量数据面试题 一、位图应用1、给定100亿个整数，设计算法找到只出现一次的整数？2、给两个文件，分别有100亿个整数，我们只有1G内存，如何找到两个文件交集？（1）用一个位图…
阅读更多...
Mac安装nginx（Homebrew）

Mac安装nginx（Homebrew）

查看需要安装 nginx 的信息 brew info nginxDocroot 默认为 /usr/local/var/www 在 /opt/homebrew/etc/nginx/nginx.conf 配置文件中默认端口被配置为8080，从而使 nginx 运行时不需要加 sudo nginx将在 /opt/homebrew//etc/nginx/servers/ 目录中加载所有文件 …
阅读更多...
Springboot+vue的学生考勤管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

Springboot+vue的学生考勤管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

演示视频： Springbootvue的学生考勤管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。 项目介绍： 本文设计了一个基于Springbootvue的前后端分离的学生考勤管理系统，采用M（model&a…
阅读更多...
Gin框架--参数接收函数

Gin框架--参数接收函数

1.get 请求 穿参数 #根据返回的bool 判断是否正确传值 _p, err : c.GetQuery("pkg") if !err {p.ReError(c, http.StatusBadRequest, "params pkg empty", "")return} #默认值接收方法_p : c.DefaultQuery("pkg", "hmf") …
阅读更多...
【java计算机毕设】高校奖学金管理系统 java springmvc vue mysql 送文档+ppt

【java计算机毕设】高校奖学金管理系统 java springmvc vue mysql 送文档+ppt

目录 1.项目功能截图 2.项目简介 3.源码下载地址 1.项目功能截图 2.项目简介 ssm奖学金系统 医院系统 idea mysql5.7/8 tomcat8 html jdk1.8 奖学金管理系统。基于SpringBootVue框架开发，方便学生直观得查看学校奖学金的评选时间、评选资格和评选内容&#xff0…
阅读更多...
C语言学习系列-＞动态内存管理

C语言学习系列-＞动态内存管理

文章目录 前言概述🚩malloc and free🔜malloc🔜free 🚩calloc and realloc🔜calloc🔜realloc 前言 要想学好数据结构，在C语言学习过程中就需要把指针、结构体和动态内存管理学好。在前面的文章&…
阅读更多...
2006-2019年全国30省绿色创新效率、绿色投资效率：基于SBM-DEA测算面板数据（数据+Stata代码）

2006-2019年全国30省绿色创新效率、绿色投资效率：基于SBM-DEA测算面板数据（数据+Stata代码）

1、来源：各省年鉴、统计局、科技年鉴 2、时间：2006-2019 3、范围：全国 30 个省份 4、指标： 原始数据指标：R&D 全时人员当量 (万人年)、R&D 资本存量 (亿元；利用以 1999 年为初期永续存量法&a…
阅读更多...
css之Flex弹性布局（父项常见属性）

css之Flex弹性布局（父项常见属性）

文章目录 🐕前言：🏨定义flex容器 display:flex🏨在flex容器中子组件进行排列🪂行排列 flex-direction: row🪂将行排列进行翻转排列 flex-direction: row-reverse🏅按列排列 flex-direction: col…
阅读更多...
postman自动化运行接口测试用例

postman自动化运行接口测试用例

做过接口测试的人，应该都知道postman ，我们在日常的时候都可以利用postman做接口测试，我们可以把接口的case保存下来在collection里面，那么可能会有这样的需求，我们怎么把collection的用例放到jenkins中定时执行呢&…
阅读更多...
C++STL的迭代器（iterator）

C++STL的迭代器（iterator）

一、定义 迭代器是一种检查容器内元素并且遍历容器内元素的数据类型。 【引用自：C迭代器（iterator）_c iterator_NiUoW的博客-CSDN博客】迭代器是一个变量，相当于容器和操纵容器的算法之间的中介。C更趋向于使用迭代器而不是数组下…
阅读更多...
【GESP】2023年06月图形化三级 -- 自幂数判断

【GESP】2023年06月图形化三级 -- 自幂数判断

文章目录 自幂数判断【题目描述】【输入描述】【输出描述】【参考答案】其他测试用例 自幂数判断 【题目描述】 自幂数是指N位数各位数字N次方之和是本身，如153是3位数，其每位数的3次方之和是153本身，因此153是自幂数，1634是4位数…
阅读更多...
STM32进行LVGL裸机移植

STM32进行LVGL裸机移植

本文的移植参考的是正点原子的课程《手把手教你学LVGL图形界面编程》 基于该课程和《LVGL开发指南_V1.3》“第二章 LVGL 无操作系统移植”，然后结合自身的实际情况进行整理。 先根据自己的习惯，创建基础的单片机工程，然后在APP业务层和DRIVE…
阅读更多...
cdm解决‘ping‘ 或者nslookup不是内部或外部命令，也不是可运行的程序或批处理文件的问题

cdm解决‘ping‘ 或者nslookup不是内部或外部命令，也不是可运行的程序或批处理文件的问题

当我们在执行cmd时，会出现不是内部或外部命令，也不是可运行的程序的提示。 搜索环境变量 点开高级 >> 环境变量 打开Path，看是否在Path变量值中存在以下项目： %SystemRoot%/system32; %SystemRoot%; %SystemRoot%/Syste…
阅读更多...
【JVM系列】- 探索·运行时数据区的私有结构

【JVM系列】- 探索·运行时数据区的私有结构

探索运行时数据区的私有结构 文章目录 探索运行时数据区的私有结构运行时数据区的结构与概念认识线程了解守护线程和普通线程JVM系统线程 程序计数器（PC寄存器）概述PC寄存器的特点PC寄存器的作用 透过案例了解寄存器为什么需要用PC寄存器来存放字节码的指…
阅读更多...
C语言基础-循环与数组

C语言基础-循环与数组

目录 循环 while 循环： for 循环： do while 循环： 中断循环： break continue： 数组 数组：用来装一组数的类型。声明形式如下： 定义数组类型变量： 下标：即各元素…
阅读更多...
初出茅庐的小李博客之ESP8266获取自己B站粉丝数据

初出茅庐的小李博客之ESP8266获取自己B站粉丝数据

获取方式 ESP8266发起HTTP请求解析json数据 获取粉丝API: https://api.bilibili.com/x/relation/stat?vmid349513188API浏览器测试返回结果 {"code": 0,"message": "0","ttl": 1,"data": {"mid": 349513188, …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023