docker+docker-compose+nginx前后端分离项目部署

news2024/11/18 3:19:50

文章目录

  • 1.安装docker
    • 1.1 基于centos的安装
    • 1.2 基于ubuntu
  • 2.配置国内加速器
    • 2.1 配置阿里云加速器
      • 🍀 找到相应页面
      • 🍀 创建 docker 目录
      • 🍀 创建 daemon.json 文件
      • 🍀 重新加载服务配置文件
      • 🍀 重启 docker 引擎
    • 2.2 配置网易云加速器
  • 3.离线安装docker-compose
    • 3.1 下载安装包
    • 3.2 添加可执行权限
    • 3.3 测试
  • 4.打包后端项目
    • 4.1 修改application.yml配置文件
    • 4.2 打包成jar
    • 4.3 上传至linux
  • 5.编写Dockerfile文件
  • 6.打包前端项目
    • 6.1 前端配置与打包
      • 🍀 配置后端调用路径
      • 🍀 配置项目资源引用路径
      • 🍀 安装与打包
      • ⚠️ 打包问题分析
    • 6.2 上传至linux
    • 6.3 设置nginx配置文件
  • 7.编写compose.yml文件
  • 8.容器编排
  • 9.数据库与表创建
  • 10.测试访问
  • 11.注意事项与细节说明

1.安装docker

1.1 基于centos的安装

  1. 安装yum-utils

    sudo yum install -y yum-utils
    
  2. 从国内服务器上下载docker

    sudo yum-config-manager \
        --add-repo \
        http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    
  3. 安装docker

    sudo yum install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
    
  4. 验证是否成功

    sudo docker --version
    

1.2 基于ubuntu

  1. 安装需要的包

    sudo apt-get update
    
  2. 安装依赖包

    sudo apt-get install \
       apt-transport-https \
       ca-certificates \
       curl \
       gnupg-agent \
       software-properties-common
    
  3. 添加 Docker 的官方 GPG 密钥

    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
    
  4. 设置远程仓库

    sudo add-apt-repository \
       "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
      $(lsb_release -cs) \
      stable"
    
  5. 安装 Docker-CE

    sudo apt-get update
    
    sudo apt-get install docker-ce docker-ce-cli containerd.io
    
  6. 验证是否成功

    sudo docker --version
    

2.配置国内加速器

国内镜像中心常用的为阿里云与网易云,选择其中一个加速器进行配置即可。在本地 Docker 中指定要使用的国内加速器地址后,就可以直接从国内镜像中心下载镜像了。

2.1 配置阿里云加速器

🍀 找到相应页面

若要配置阿里云加速器,必须首先要有阿里云的账号。登录阿里云后,打开阿里云的容器镜像服务页面 https://cr.console.aliyun.com ,然后找到如下页面,可以查看到你的 registry-mirrors

image-20230403005624117

🍀 创建 docker 目录

sudo mkdir -p /etc/docker

🍀 创建 daemon.json 文件

注意,该 json 数据中的 URL 地址是与用户登录账号绑定的,不同的用户所生成的地址是不同的。

sudo vim /etc/docker/daemon.json
{
  "registry-mirrors": ["https://******.mirror.aliyuncs.com"]
}

🍀 重新加载服务配置文件

sudo systemctl daemon-reload

🍀 重启 docker 引擎

sudo systemctl restart docker

2.2 配置网易云加速器

配置网易云加速器,无需注册网易云用户。只需将前面的 daemon.json 文件中的那个URL 替换为如下 URL 即可。

{
  "registry-mirrors": ["http://hub-mirror.c.163.com"]
}

当然,替换过后,仍需重新加载服务配置文件,重启 docker 引擎。

3.离线安装docker-compose

3.1 下载安装包

🏠 所有版本预览:Releases · docker/compose (github.com)

选择一个版本:

image-20230328103210297

进入后往下拉,选择对应版本:

image-20230328103251367

将文件上传到linux后,移动到与环境变量相关的指定位置:

sudo mv docker-compose-linux-x86_64 /usr/local/bin/docker-compose

3.2 添加可执行权限

为 docker-compose 文件添加可执行权限。

sudo chmod +x /usr/local/bin/docker-compose

3.3 测试

通过 docker-compose version 测试安装是否成功。

sudo docker-compose version

4.打包后端项目

4.1 修改application.yml配置文件

image-20230403014425534

同时对于mysql配置的 password 在 后面编写的 compose.yml 中也要与 application.yml 中保持一致。

4.2 打包成jar

image-20230403014605831

image-20230403014820842

4.3 上传至linux

# 1.创建一个新目录,项目的所有东西放在这个目录下
sudo mkdir /blog

# 2.移动至该目录下
cd /blog

将打包生成的jar文件放到该blog目录下。

image-20230403015438506

5.编写Dockerfile文件

# 1.移动至blog目录下
cd /blog

# 2.编写后端的 Dockerfile 文件
sudo vim Dockerfile
# 使用 Java 8 作为基础镜像。
FROM openjdk:8u102
# 只是声明:将容器的 8080 端口暴露出来,这个值对应在 application.yml 中指定的端口号
EXPOSE 8080
# 将 vueblog-0.0.1-SNAPSHOT.jar 文件添加到镜像中,并重命名为 app.jar。
ADD vueblog-0.0.1-SNAPSHOT.jar app.jar
# 设置容器启动时执行的命令,即运行 /app.jar 文件
ENTRYPOINT ["java", "-jar", "/app.jar"]

6.打包前端项目

6.1 前端配置与打包

🍀 配置后端调用路径

由于这里是将前后端项目都部署在同一台服务器主机上,所以在src目录下的axios.js中,进行如下配置:

// 前端访问后端的ip为部署的服务器的地址,port为访问后端接口的端口
axios.defaults.baseURL = "http://8.130.97.145:8080"

🍀 配置项目资源引用路径

项目根目录下添加一个 vue.config.js 文件:

module.exports = {
  publicPath: '/'
}

🍀 安装与打包

# 1.安装命令
npm install

# 2.打包命令
npm run build

⚠️ 打包问题分析

1️⃣ Building for production…Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10)

这个错误通常是由于 Node.js v17 和更高版本使用的 OpenSSL v3.0 引起的,而 OpenSSL v3.0 对允许的算法和密钥大小增加了严格的限制。为了解决这个问题,你可以在运行开发服务器时将 NODE_OPTIONS 环境变量设置为 --openssl-legacy-provider。这将使用旧版的 OpenSSL 提供程序,从而解决此问题。

set NODE_OPTIONS=--openssl-legacy-provider

2️⃣ Building for production…Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db / Building for production…

# 更新你的 caniuse-lite 包到最新版本
npx browserslist@latest --update-db

6.2 上传至linux

# 1.在blog文件夹下创建多级目录 html 与 conf
sudo mkdir -p /blog/nginx/html/ /blog/nginx/conf/

# 2.将打包后得到的dist目录下的所有文件上传到新创建的 html 目录下

image-20230403020608504

image-20230403020723252

6.3 设置nginx配置文件

# 在新创建的 conf 目录下创建配置文件
sudo vim /blog/nginx/conf/nginx.conf
#user  root;
error_log  /var/log/nginx/error.log notice;
worker_processes  1;

pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  localhost;
      location / {
          # 将所有请求都重定向到 /usr/share/nginx/html 目录下
          root   /usr/share/nginx/html;
          # 尝试使用 $uri、$uri/ 和 /index.html 文件来处理请求。如果这些文件都不存在,就使用 last 参数来处理请求。
          try_files $uri $uri/ /index.html last;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

7.编写compose.yml文件

# 1.移动至blog目录下
cd /blog

# 2.编写 compose.yml 文件
sudo vim compose.yml
services:
  blognginx: # 服务名称,用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 80:80  # 暴露端口
    volumes: # 挂载
      - /blog/nginx/html:/usr/share/nginx/html
      - /blog/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要,解决nginx的文件调用的权限问题
  blogmysql:
    image: mysql:5.7.27
    ports:
      - 3306:3306
    environment: # 指定用户root的密码,与application.yml中保持一致
      - MYSQL_ROOT_PASSWORD=admin
  blogredis:
    image: redis:latest
    ports:
      - 6379:6379
  vueblog:
    image: vueblog:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8080:8080
    depends_on: # 依赖与mysql、redis,其实可以不填,默认已经表示可以
      - blogmysql
      - blogredis

8.容器编排

# 1.移动到blog目录
cd /blog

# 2.容器编排
sudo docker-compose up -d

9.数据库与表创建

由于刚创建的mysql容器内的数据为空,因此要连接该mysql增加后端项目所需要的数据库和表。

10.测试访问

🏠 访问:http://【服务器ip】

11.注意事项与细节说明

  1. 注意需要保证防火墙打开80端口,nginx的默认端口为80。
  2. 如果需要远程连接数据库,需要将防火墙3306端口打开。

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

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

相关文章

OJ系统刷题 第八篇

13415 - 津津的储蓄计划 时间限制 : 1 秒 内存限制 : 128 MB 津津的零花钱一直都是自己管理。每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同。 为了让津津学习如何储蓄,妈妈提出,津…

计算机组成原理---第四章 指令系统

一、指令系统的发展与性能要求 指令系统的概述 指令就是要计算机执行某种操作的命令。可分为:①微指令,属于硬件;②机器指令,简称指令,完成算术逻辑操作;③宏指令,由若干条机器指令组成&#xf…

[Java]JSTL标签库

EL表达式https://blog.csdn.net/m0_71229255/article/details/130173486?spm1001.2014.3001.5501 JSTL标签的使用 Java Server Pages Standard Tag Libray(JSTL): JSP标准标签库,是一个定制标签类库的集合,用于解决一些常见的问题,例如迭代…

【2023 年第十三届 MathorCup 高校数学建模挑战赛】C 题 电商物流网络包裹应急调运与结构优化问题 建模方案及代码实现

更新信息:2023-4-15 更新了代码 【2023 年第十三届 MathorCup 高校数学建模挑战赛】C 题 电商物流网络包裹应急调运与结构优化问题 1 题目 电商物流网络由物流场地(接货仓、分拣中心、营业部等)和物流场 地之间的运输线路组成,如…

Java项目架构分层改造-项目亮点

服务分层改造 时间操作人员2023年04月12日23:04:00创建文档Cheems 原始项目结构 所有文件糅杂在一起(大多数公司如此),没有分层开,功能增加代码复杂不清晰 分层改造后 先确定思路,后续把功能搬过来即可!&…

关于GNSS技术介绍(一)

什么是GNSS? GNSS的全称是全球导航卫星系统(Global Navigation Satellite System),它是泛指所有的卫星导航系统,包括全球的、区域的和增强的。GNSS是覆盖全球的自主地利空间定位的卫星系统,用于导航与定位…

Stable Diffusion成为生产力工具(四):制作食品安全PPT所用的相关图片png、图标icon

S:你安装stable diffusion就是为了看小姐姐么? I :当然不是,当然是为了公司的发展谋出路~~ 预先学习: 安装webui《Windows安装Stable Diffusion WebUI及问题解决记录》。运行使用时问题《Windows使用Stable Diffusion时…

【C语言】 数据的存储 -- 数据类型介绍 -- 存储 -- 浮点型在内存中的存储,很详细也很重要,不明白的一定要看

目录 1、数据类型介绍 1.1 类型的基本归类 2、整型在内存中的存储 2.1 原码、反码、补码 2.2 大小端介绍 2.3 练习 3、浮点型在内存中的存储 3.1 举一个例子 3.2 浮点数存储规则 *************************************************正文开始*************************…

一文了解MongoDB的各种部署模式

单节点模式(Standalone,不推荐用于生产环境) standalone模式即单节点模式,指在服务器上只部署一个 mongod 进程用于读写数据。优点是部署简单,可以快速完成部署,缺点是无容灾。只推荐用于日常的开发、测试…

线程(Thread)的三种等待唤醒机制详解

1、为什么需要线程的等待和唤醒 线程的等待唤醒机制是一种经典的“生产者和消费者”模型。例如食品加工厂,食品加工人员和原料补给人员,在有充足原料时,补给人员是在等待,等到原料不够时,食品加工人员通知补给人员&am…

linux实时性分析

什么是实时操作系统 操作系统的实时性是指执行一个特定任务的时间是确定的和可预测的,这个任务执行时限需要考虑任何的情况,包括最恶劣的情况。或者说操作系统能够在规定的时间点内完成指定的任务操作,一旦超过这个时间点会对整个系统带来不…

【探花交友】day01—项目介绍与环境搭建

目录 1、项目介绍 1.1、功能列表 1.2、项目背景 1.3、功能概述 1.4、技术方案 1.5、技术解决方案 2、前后端分离 2.1、前后端分离的概述 2.2、YAPI介绍 3、开发工具 3.1、虚拟机配置 3.2、Android模拟器 3.3、调试工具PostMan 4、环境搭建 4.1、MYSQL数据库 4.…

【JAVA程序设计】(C00127)基于SSM+vue开发的音乐播放管理系统-有文档

基于SSMvue开发的音乐管理系统-有文档项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架vue以及html前台的开发的音乐管理系统共分为二个角色:管理员、用户 管理员角色包含以下功能: 登录、个人中心(修改密码、个人信息修改&am…

溯源取证-内存取证 高难度篇

今天的场景依然是windows场景,只不过此次场景分为两个镜像,本次学习主要学习如何晒别钓鱼邮件、如何提取钓鱼邮件、如何修复损坏的恶意文件、如何提取DLL动态链接库文件 本次需要使用的工具: volatility_2.6_lin64_standalone readpst clams…

c++11 标准模板(STL)(std::unordered_multimap)(十三)

定义于头文件 <unordered_map> template< class Key, class T, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator< std::pair<const Key, T> > > class unordered…

交互式电子沙盘数字沙盘大数据系统开发第8课

交互式电子沙盘数字沙盘大数据系统开发第8课 这次我们完成的功能为拖动一个外部的UI对象到球球上&#xff1a; private void Button_PreviewMouseMove(object sender, MouseEventArgs e) { if(e.LeftButton MouseButtonState.Pressed) DragDr…

Vue简易便签实现

Vue简易便签实现 html部分 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Comp…

ChatGPT这么强,你该怎么办?

总编说&#xff1a;《生命3.0》给未来选择工作的人提出的建议显得更加重要。泰格玛克认为&#xff0c;未来选择工作前需要询问三个问题&#xff1a;是否需要与人打交道&#xff0c;运用社交智慧&#xff1f;是否需要创造力&#xff0c;解决复杂问题&#xff1f;是否需要在不确定…

leetcode1306.跳跃游戏

跳跃游戏 -这里有一个非负整数数组 arr&#xff0c;你最开始位于该数组的起始下标 start 处。当你位于下标 i 处时&#xff0c;你可以跳到 i arr[i] 或者 i - arr[i]。 请你判断自己是否能够跳到对应元素值为 0 的 任一 下标处。 注意&#xff0c;不管是什么情况下&#xff…

不会吧?该不会还有企业没实现员工赋能吧!要我说,选低代码就对了!

员工作为企业的重要生产力要素&#xff0c;员工赋能一直是企业经营者重点关注的领域。 在大部分企业经营实践中&#xff0c;员工赋能由人力资源部门负责&#xff0c;赋能的主要形式是集中培训&#xff0c;其结果往往是业务繁忙时&#xff0c;人力组织难度大、业务部门参与意愿低…