Docker部署前后端分离项目

1.通过GIT将前后端代码clone到本地并打包1.1.克隆前端代码并打包1.1.1.克隆代码git clone https://github.com/renrenio/renren-fast-vue.git代码克隆完毕后，请执行以下操作：修改renren-fast-vue/config/index.js中的port为9527；修改renren-fast-vue/static/...

大爱我小宝哥

3943人浏览 · 2019-04-22 21:20:50

大爱我小宝哥 · 2019-04-22 21:20:50 发布

1.通过GIT将前后端代码clone到本地并打包

1.1.克隆前端代码并打包

1.1.1.克隆代码

git clone https://github.com/renrenio/renren-fast-vue.git

代码克隆完毕后，请执行以下操作：

修改renren-fast-vue/config/index.js中的port为9527；
修改renren-fast-vue/static/config/index-prod.js中的api接口请求地址中的localhost为你的后台服务器IP；

1.1.2.打包代码

cd renren-fast-vue
# 安装依赖
npm install --registry=https://registry.npm.taobao.org
# 如果直接 【安装依赖】 报错的话，请先单独安装 【chromedriver】，单独安装前请先删除项目下的**node_modules**文件夹，若能直接安装成功，则可以跳过此步骤
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
# 安装依赖成功后，打包项目
npm run build

至此，renren-fast-vue目录下就会生成dist文件夹，这就是打包好的前端代码；

1.2.克隆后端代码并打包

1.2.1.克隆代码

操作指令：

git clone https://gitee.com/renrenio/renren-fast.git

由于application.yml中环境配的是dev，由spring: profiles: active: dev中可以看出，代码克隆完毕后，请执行以下操作：

修改由于application-dev.yml中的spring: datasource: druid: username: renren为spring: datasource: druid: username: root
修改由于application-dev.yml中的spring: datasource: druid: password: 123456为spring: datasource: druid: password: root

1.2.2.打包代码

操作指令：

mvn clean install -Dmaven.test.skip=true

操作命令说明：

clean 清除之前的打包
install 本地打包
-Dmaven.test.skip=true 跳过测试代码

至此，renren-fast目录下就会生成target文件夹，文件夹中的renren-fast.jar就是打包好的后端代码；

2.在 CentOS 7 服务器上安装docker

具体操作请参考：CentOS 搭建 Docker 环境

3.使用docker安装mysql

3.1.拉取指定版本的mysql镜像

操作指令：

# 拉取mysql
docker pull mysql:5.7.25
# 查看已拉取的本地镜像
docker images

3.2.创建data，conf，logs目录以及配置文件my.cnf

3.2.1.创建data，conf，logs目录

操作指令：

mkdir /home/soft/renren/mysql/data -p
mkdir /home/soft/renren/mysql/conf
mkdir /home/soft/renren/mysql/logs

3.2.2.创建my.cnf配置文件

操作指令：

# 进入mysql目录
cd /home/soft/renren/mysql
# 创建配置文件
touch my.cnf
# 编辑文件
vim my.cnf
# 将下方my.cnf文件的内容复制然后粘贴到服务器上的my.cnf中；
# 按键盘上的esc退出编辑模式，输入英文分号，输入wq保存并退出；

配置文件my.cnf

# Copyright (c) 2014, 2015, Oracle and/or its affiliates. All rights reserved.
#
# This program is free software; you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation; version 2 of the License.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA

#
# The MySQL Community Server configuration file.
#
# For explanations see
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html

[client]
port		= 3306
socket		= /var/run/mysqld/mysqld.sock

[mysqld_safe]
pid-file	= /var/run/mysqld/mysqld.pid
socket		= /var/run/mysqld/mysqld.sock
nice		= 0

[mysqld]
user		= mysql
pid-file	= /var/run/mysqld/mysqld.pid
socket		= /var/run/mysqld/mysqld.sock
port		= 3306
basedir		= /usr
datadir		= /var/lib/mysql
tmpdir		= /tmp
lc-messages-dir	= /usr/share/mysql
explicit_defaults_for_timestamp

# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
#bind-address	= 127.0.0.1

#log-error	= /var/log/mysql/error.log

# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0

# * IMPORTANT: Additional settings that can override those from this file!
#   The files must end with '.cnf', otherwise they'll be ignored.
#
!includedir /etc/mysql/conf.d/

3.2.运行mysql容器，初始化renren-fast项目的数据库表

3.2.1.运行mysql容器

操作指令：

docker run --restart=always -p 3306:3306 -d --name mysql -e MYSQL_ROOT_PASSWORD=root -v /home/soft/renren/mysql/conf:/etc/mysql/conf.d -v /home/soft/renren/mysql/logs:/var/log/mysql -v /home/soft/renren/mysql/data:/var/lib/mysql mysql:5.7.25

运行完毕后，请等待大约两分钟，因为mysql的初始化比较耗时间；通过mysql的客户端工具能连上mysql，则说明启动完成；

3.2.2.初始化renren-fast项目的数据库表

通过mysql的客户端工具能连上mysql，则说明启动完成；

4.使用docker安装redis

4.1.拉取redis镜像并运行容器

docker pull redis
docker run --restart=always --name redis -p 6379:6379 -d redis

4.使用docker运行后端项目renre-fast.jar

4.1.拉取后端项目运行所需的java镜像并运行

# 拉取Java容器
docker pull java
# 创建映射所用的文件夹
mkdir /home/soft/renren/back-end -p
# 通过FTP工具将renre-fast.jar上传到back-end文件夹下后执行以下操作
# 运行Java容器
docker run -it -d --name renren-fast -v /home/soft/renren/back-end:/home/soft --net=host java

运行容器时使用 -v 做了文件映射，把真实主机上的/home/soft/renren/back-end目录下的文件和文件夹映射到容器内的/home/soft目录下；–net=host是虚拟机与主机共享IP；

4.2.部署后端项目renre-fast.jar

使用Xshell的复制当前会话功能，在新打开的窗口中执行以下命令；

# 进入Java容器
docker exec -it renren-fast bash
# 进入jar包所在目录
cd /home/soft
# 后台运行jar包并将日志输出到文件nohup.out中
nohup java -jar renre-fast.jar > nohup.out

注意：此时切勿按Ctrl+C，否则会直接终止正在运行的进程；此时直接点击标签栏上的关闭按钮关闭该窗口，切勿输入命令exit退出容器，因为exit会停止当前运行的容器并退出；

4.3.查看后端项目renre-fast.jar运行结果

由于做了虚拟机和真实宿主机之间的映射，可以直接通过以下命令查看日志

tail -fn 200 /home/soft/renren/back-end/nohup.out

访问http://你的IP:8080/swager/index.html，如果能正常访问，则说明后台项目配置完毕；如果不能访问，但是日志中又显示启动完成，请查看下是否关闭防火墙或者修改防火墙策略，如果是云服务，请查看是否在安全组中允许该端口出入站；

5.使用docker运行前端项目renre-fast-vue

5.1.拉取后端项目运行所需的nginx镜像并创建映射目录，nginx配置文件

# 拉取nginx
docker pull nginx
# 创建conf，logs
mkdir /home/soft/renren/nginx/conf -p
mkdir /home/soft/renren/nginx/logs
# 进入nginx配置文件夹
cd /home/soft/renren/nginx/conf
# 创建nginx配置文件
touch nginx.conf
# 编辑nginx配置文件
vim nginx.conf
# 将下方nginx.conf文件的内容复制然后粘贴到服务器上的nginx.conf中；
# 按键盘上的esc退出编辑模式，输入英文分号，输入wq保存并退出；

配置文件：nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
	
	proxy_redirect          off;
	proxy_set_header        Host $host;
	proxy_set_header        X-Real-IP $remote_addr;
	proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
	client_max_body_size    10m;
	client_body_buffer_size   128k;
	proxy_connect_timeout   5s;
	proxy_send_timeout      5s;
	proxy_read_timeout      5s;
	proxy_buffer_size        4k;
	proxy_buffers           4 32k;
	proxy_busy_buffers_size  64k;
	proxy_temp_file_write_size 64k;
	
	server {
		listen 9527;
		server_name  localhost;
		location  /  {
			root  /home/soft/renren-vue;
			index  index.html;
		}
	}
}

5.2.上传前端项目到服务器并运行项目

# 创建前端项目存放的文件夹
mkdir /home/soft/renren/fore-end
# 通过FTP工具将前端项目打包好的dist文件夹下的所有文件放到fore-end目录中，然后执行以下命令
docker run -it -d --name renren-vue -v /home/soft/renren/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/soft/renren/nginx/logs:/var/log/nginx/ -v /home/soft/renren/fore-end:/home/soft/renren-vue --privileged --net=host nginx

此时访问http://你的IP地址:9527，看看能否正常访问，登录界面的验证码是否正确显示，如果正确显示，则表明你所搭建的前后端分离项目成功；

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^