Docker部署前后端分离项目的实现示例

目录
  • 一、环境准备
  • 二、运行镜像
    • 解决问题
    • Redis安装
    • Nginx安装
  • 三、打包项目
  • 四、部署

一、环境准备

服务器

阿里云服务器 1核+2GB即可

软件

本次部署采用的是 docker,因此软件环境都在 docker 上

我们需要 MySQL 8.0.x版本,Redis,Nginx,提前下好镜像即可

二、运行镜像

MySQL安装

MySQL我用的是8.0.x的版本,在部署过程中出现了一些问题,在这里跟大家分享一下

docker run \
-p 3306:3306 \
--name mysql \
--privileged=true \
--restart unless-stopped \
-v /home/mysql8.0.20/mysql:/etc/mysql \
-v /home/mysql8.0.20/logs:/logs \
-v /home/mysql8.0.20/data:/var/lib/mysql \
-v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files \
-v /etc/localtime:/etc/localtime \
-e MYSQL_ROOT_PASSWORD=123456 \
-d mysql:8.0.20 \
--lower_case_table_names=1

命令解释:

 -p 端口映射
--privileged=true  挂载文件权限设置
--restart unless-stopped  设置 开机后自动重启容器
-v /home/mysql8.0.20/mysql:/etc/mysql    挂载配置文件
-v /home/mysql8.0.20/logs:/logs \      挂载日志
-v /home/mysql8.0.20/data:/var/lib/mysql \  挂载数据文件 持久化到主机
-v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files	MySQL8之后需要同步这个文件夹
-v /etc/localtime:/etc/localtime    容器时间与宿主机同步
-e MYSQL_ROOT_PASSWORD=123456    设置密码
-d  mysql:8.0.20   后台启动,mysql
--lower_case_table_names=1	  让MySQL不区分大小写(0:大小写敏感;1:大小写不敏感)

在没有配置 --lower_case_table_names=1 前出现 Table XX.QRTZ_LOCKS doesn‘t exist 的问题

百度一番后发现 MySQL 5.x 和 8.x 的这个配置还有些不同

PS:MySQL8.0.2启动报Different lower_case_table_names settings for server ('1') and data dictionary ('0').

记录在安装了MySQL 8.0.20之后,初始化的时候在my.cnf里设置了lower_case_table_names=1,启动报错:

如下

查看MySQL官方文档,有记录:

lower_case_table_names can only be configured when initializing the
server. Changing the lower_case_table_names setting after the server
is initialized is prohibited.

只有在初始化的时候设置 lower_case_table_names=1才有效,比如:

--initialize --lower-case-table-names=1

详见

https://bugs.mysql.com/bug.php?id=90695

解决问题

做好备份,删除原来的 MySQL 容器,重新运行 MySQL,在命令结尾加入 --lower_case_table_names=1

因为 MySQL 8 之后,这一步需要在初始化的时候设置

Redis安装

docker run -p 6379:6379 --name redis -v /home/redis/data/:/data -d redis:3.2 redis-server --appendonly yes

命令解释

-v /home/redis/data/:/data		挂载数据目录
--appendonly yes	开启redis 持久化

Nginx安装

因为我需要挂载目录,所以我运行了下面的命令

docker run \
-d \
-p 80:80 \
--name nginx \
-v /home/nginx/conf:/etc/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
nginx

运行完之后,发现总是会自动退出,查看日志信息后百度无果,一番搜索后发现 nginx 启动时需要先将要挂载的目录先创建出来,否则就会出现自动退出的情况。

因此,我们需先创建挂载目录,然后再运行命令

三、打包项目

前端

修改vue.config.jsdevServer节点映射端口,与后端端口一致

运行以下命令:

npm run build:prod

会在本地生成 dist 目录

后端

  • 修改 application.yml 端口、文件上传路径
  • 修改logback.xml 日志生成路径log.path
  • 修改 MySQL、Redis地址

运行以下命令:

mvn clean
mvn package

ruoyi-admintarget下生成了一个 jar 包,那就是我们需要的

四、部署

前端

配置 nginx,这里开始我在 /nginx/conf/conf.d/default.conf下配置,发现配置不生效。后来在/nginx/conf/conf.d/nginx.conf下配置就好了,具体配置如下:

 server {
        listen       80;
        server_name  localhost;		# 可以用服务器ip代替

        location / {
            root   /usr/share/nginx/html/dist/;
            index  index.html index.htm index login;
            try_files $uri $uri/ /index.html last;
        }
        location /prod-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://localhost:7777/;		# 可以用服务器ip代替
        }
     }

在我部署完成后发现不是在根目录下 刷新 就会出现 404 Not Found,找到以下解决方案:

在配置 location 的时候加上try_files $uri $uri/ /index.html last;

后端

我使用的是 Dockerfile + jar 打包成镜像的部署方式

Dockerfile

FROM java:8

VOLUME /jiang

ADD ruoyi-admin.jar app.jar

EXPOSE 7777

ENTRYPOINT ["java","-jar","app.jar"]

在服务器里创建一个文件夹,放入 Dockerfile 和 jar包,运行如下命令生成镜像

docker build -t ruoyi-vue .

注意:最后还有一个 .

此时,我们只需运行生成的镜像即可

docker run -d -p 7777:7777 --name nflj-vue ruoyi-vue 

到此这篇关于Docker部署前后端分离项目的实现示例的文章就介绍到这了,更多相关Docker部署前后端分离项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 利用docker-compsoe部署前后端分离的项目方法

    说在前面 我们都知道,docker可以实现很简便的部署环境.现在我们有一个前后端分离的项目,前端基于Vue开发.利用Webpakc打包为dist文件夹.后端则是一个Node.js服务,提供API接口,前端和后端是分离的.所以我们肯定是前端项目一个container,后台项目也是一个container.那么如果是在生产环境,就会产生跨域问题.前端的请求要反向代理到后台.大家肯定首先想到的就是使用 Nginx 设置 proxy_pass .是的没有错.那么我们有了这些想法.我们如何通过 docker

  • Docker部署前后端分离项目的实现示例

    目录 一.环境准备 二.运行镜像 解决问题 Redis安装 Nginx安装 三.打包项目 四.部署 一.环境准备 服务器 阿里云服务器 1核+2GB即可 软件 本次部署采用的是 docker,因此软件环境都在 docker 上 我们需要 MySQL 8.0.x版本,Redis,Nginx,提前下好镜像即可 二.运行镜像 MySQL安装 MySQL我用的是8.0.x的版本,在部署过程中出现了一些问题,在这里跟大家分享一下 docker run \ -p 3306:3306 \ --name mys

  • docker-compose+nginx部署前后端分离的项目实践

    目录 安装docker 安装必要的系统工具 软件源信息切换 安装 配置镜像加速器 安装docker-compose 安装 权限修改 解决js.css文件404的情况 Vue项目配置 安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persistent-data lvm2 软件源信息切换 yum-config-manager --add-repo http://m

  • Docker+Nginx打包部署前后端分离步骤实现

    目录 问题描述 项目打包 前端项目打包 修改vue.config.js文件 router配置中添加base属性 打包前端项目 后端项目打包 将前端和后端的打包文件上传到服务器 nginx反向代理配置 后端通过Dockerfile打包成docker镜像 这里为什么使用docker? 构建Docker镜像 查看构建的镜像 运行容器 运行测试 问题描述 最近做了一个前后端分离的通用权限管理系统,今天想用自己的服务器部署下,本地部署测试是没问题的,但是部署在服务器上还是出现了许多小插曲,这里大概记录一下

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • Django + Taro 前后端分离项目实现企业微信登录功能

    目录 前言 两种方式 思路 企业微信应用配置 前端代码 参考资料 前言 还是最近在做的一个小项目,后端用的是Django搭配RestFramework做接口,前端第一次尝试用京东开源的Taro框架来做多端(目前需要做用于企业微信的H5端和微信小程序) 本文记录一下企业微信登录的流程,上周看文档看得头晕晕的,其实很简单,封装好了就几行代码的事~ 两种方式 一种是先拼接好登录要用的地址authorize_url,回调地址设置成h5应用的网页入口,然后把authorize_url设置为企业微信里的应用

  • Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • thinkphp5框架前后端分离项目实现分页功能的方法分析

    本文实例讲述了thinkphp5框架前后端分离项目实现分页功能的方法.分享给大家供大家参考,具体如下: 方法一 利用tp5提供的paginate方法实现自动分页 参数 page第几页,paginate分页方法会自动获取 size  每页数量 代码 /** * Notes:消费记录 * Date: 2019/6/25 * Time: 15:43 * @param Request $request * @return \think\response\Json */ public function g

  • 详解Flask前后端分离项目案例

    简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman 调试.git 重构部分: ken校验模块 auths认证模块 scope权限模块,增加全局扫描器(参考flask HTTPExceptions模块) 收获 我们可以接受定义时的复杂,但不能接受调用时的复杂 如果你觉得写代码厌倦,无聊,那你只是停留在功能的实现上,功能的实现很简单,你要追求的是更好的写法,抽象的艺术,不是机械的劳动而是要 创造 ,要有自己的

  • Nginx代理同域名前后端分离项目的完整步骤

    前后端分离项目,前后端共用一个域名.通过域名后的 url 前缀来区别前后端项目. 以 vue + php 项目为例.直接上 server 模块的 nginx 配置. server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name demo.com; # 配置项目域名 index index.html index.htm index.php; # 1.转给前端处理 location / { # 前端打包后的静态

随机推荐