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

news/2024/7/10 2:52:09 标签: docker, nginx, 运维, springboot, vue

docker_0">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__92">🍀 创建 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__118">🍀 重启 docker 引擎

sudo systemctl restart docker

2.2 配置网易云加速器

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

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

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

dockercompose_136">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

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

nginx_284">6.3 设置nginx配置文件

# 在新创建的 conf 目录下创建配置文件
sudo vim /blog/nginx/conf/nginx.conf

nginx">#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.niftyadmin.cn/n/201112.html

相关文章

详解Spring事务

详解Spring事务

目录 1.声明式事务 1.1.概述 1.2.使用 1.2.1.建表 1.2.2.maven依赖 1.2.3.配置 1.2.4.业务 1.2.5.测试 2.事务的传播行为 1.声明式事务 1.1.概述 spring中事务分为两种： 1.编程式事务，通过写代码来实现，每一步。 2.声明式事务&am…
阅读更多...
Spring详解简介

Spring详解简介

1、Spring的简介 Spring的英文翻译为春天，可以说是给Java程序员带来了春天，因为它极大的简化了开发。我得出一个公式：Spring 春天 Java程序员的春天 简化开发。最后的简化开发正是Spring框架带来的最大好处。 Spring是一个开放源代码的设计…
阅读更多...
【Spring Cloud Alibaba】4.创建服务消费者

【Spring Cloud Alibaba】4.创建服务消费者

文章目录简介开始搭建创建项目修改POM文件添加启动类添加配置项添加Controller添加配置文件启动项目测试访问Nacos访问接口查看端点检查简介 接下来我们创建一个服务消费者，本操作先要完成之前的步骤，详情请参照【Spring Cloud Alibaba】Spring Cloud A…
阅读更多...
Linux Redis主从复制 | 哨兵监控模式 | 集群搭建 | 超详细

Linux Redis主从复制 | 哨兵监控模式 | 集群搭建 | 超详细

Linux Redis主从复制 | 哨兵监控模式 | 集群搭建 | 超详细一 Redis的主从复制二 主从复制的作用三 主从复制的流程四 主从复制实验4.1 环境部署4.2 安装Redis（主从服务器）4.3 修改Master节点Redis配置文件 (192.168.163.100)4.4 修改Slave节点Redis配置文…
阅读更多...
chatgpt+机器人控制器融合（一）

chatgpt+机器人控制器融合（一）

当今机器人技术面临的挑战，以及 ChatGPT 能提供的帮助 目前机器人的操作流是从工程师或技术用户开始，需要他们将任务需求转换为系统代码。工程师会处于工作流程的回路中，他们需要不断编写新的代码和规范来纠正机器人的行为。总得来说&#x…
阅读更多...
多模态模型学习1——CLIP对比学习 语言-图像预训练模型

多模态模型学习1——CLIP对比学习 语言-图像预训练模型

多模态模型学习1——CLIP对比学习 语言-图像预训练模型学习前言什么是CLIP模型代码下载CLIP实现思路一、网络结构介绍1、Image Encodera、PatchPosition Embeddingb、Transformer EncoderI、Self-attention结构解析II、Self-attention的矩阵运算III、MultiHead多头注意力机制IV…
阅读更多...
SeNet论文解读/总结

SeNet论文解读/总结

此文章为深度学习在计算机视觉领域的图片分类经典论文SeNet（Squeeze-and-Excitation Networks）论文总结。 此系列文章是非常适合深度学习领域的小白观看的图像分类经典论文。系列文章如下： AlexNet：AlexNet论文解读/总结_alexnet…
阅读更多...
【语音唤醒】TC-ResNet：移动设备上实时关键词检测的时域卷积算法

【语音唤醒】TC-ResNet：移动设备上实时关键词检测的时域卷积算法

Github开源仓库：https://github.com/hyperconnect/TC-ResNet论文下载链接：https://arxiv.org/abs/1904.03814 本文提出了一种适用于移动设备上实时语音唤醒的时域卷积。与大多数基于2D卷积的KWS方法不同，KWS方法需要深度架构来完全捕获低频域…
阅读更多...
最新文章

Copyright @ 2022~2023