docker部署前后端分离项目

目录

工具准备

工具连接

目录

 工具准备

工具连接

安装Docker

部署MySQL数据库

部署后端服务 

部署前端服务

---

 工具准备

        一台云服务器，阿里云、百度云、腾讯云都可以。

        一个远程连接工具，Xshell、finalshell都可以。

        本地数据库，navicat、mysqlworkbench、甚至idea都可以。

本文采用百度云服务器、finalshell和navicat。

工具连接

        打开finalshell

安装Docker

1、卸载旧版（如果是新的服务器，可不用执行这一步）

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2、安装yum-utils 工具包

sudo yum install -y yum-utils

3、设置阿里云仓库

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

4、更新依赖（切换到你想安装的目录下，也可新建目录）

sudo yum update

5、安装docker（最新版）

sudo yum install docker-ce docker-ce-cli containerd.io

6、验证是否安装成功

docker version

7、启动docker

sudo systemctl start docker

部署MySQL数据库

1、用docker运行mysql镜像

 docker run --name test-mysql -p 3310:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql

test-mysql：容器名
mysql：镜像名
-p 3310:3306：把服务器的3310端口映射到容器的3306端口，后面通过3310端口访问数据库
MYSQL_ROOT_PASSWORD=root：设置root账户的密码为root

查看刚创建的镜像

2、进入test-mysql容器内

docker exec -it test-mysql bash

3、登录root账号，输入密码

mysql -uroot -p

4、赋予root账号 从外部连接所有数据库的权限

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

//如果只想赋予某个数据库的外部访问权限，就把*.*改成sqlname.*

FLUSH PRIVILEGES;  //让该设置生效

输入exit退出镜像
输入exit退出容器

5、打开navicat连接数据库

新建连接

 新建数据库

导入sql文件

部署后端服务 

1、1、使用maven package把项目打包，在生成的target文件夹下找到jar包，把该jar包上传到云服务器的任意目录下。

2、在任意目录下创建一个新目录，并把jar包上传到该目录下

3、在jar包存放的目录下创建Dockerfile文件

cd /home/crm-backend

touch Dockerfile

 Dockerfile文件的内容如下：

FROM java:8
VOLUME /tmp
ADD *.jar /app.jar
EXPOSE 56000
 
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

4、在包含jar包和Dockerfile文件的目录下，创建crm-backend镜像

docker build -t crm-backend .

//把crm-backend改成你想要起的镜像名

5、创建crm-backend容器并运行crm-backend镜像（镜像名可以和容器名一致），指定该镜像在服务器和容器内运行的端口都是56000

docker run -d -p 56000:56000 --name crm-backend crm-backend

部署前端服务

1、在前端的配置文件中修改配置

2、在idea中，点击前端项目名，右键，选择打开于终端，在终端执行npm run build，然后目录中会生成dist文件夹。

3、在服务器上任意位置新建一个文件夹，把dist文件夹上传到该文件夹下。

4、在这个dist的同一目录下创建default.conf文件

文件内容如下（记得把#注释的内容删掉）：

server {
    listen       8092;    #前端在容器里运行的端口号
    server_name  182.61.132.29;   #服务器的IP地址

    location /admin/ {
      proxy_pass http://182.61.132.29:56000;     #后端服务的地址
    }
    
#    location / {
#        root   /usr/share/nginx/html;
#        index  index.html index.htm;
#        try_files $uri $uri/ /index.html =404;
#    }

	location / {
	        root   /usr/share/nginx/html;
	        index  index.html;
	        try_files $uri $uri/ /index.html;
	}
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

5、在同一目录下新建Dockerfile文件，内容如下：

# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER hxx
# 添加时区环境变量，亚洲，上海
ENV TimeZone=Asia/Shanghai
# 将前端dist文件中的内容复制到nginx目录
COPY dist  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf /etc/nginx/conf.d
# 声明容器内部要监听的端口
EXPOSE 8092

6、然后创建crm-front容器

docker build -t crm-front .

7、创建并运行crm-front镜像

docker run -d -p 8092:8092 --name crm-front crm-front

8、查看运行情况

docker ps

9、打开浏览器，输入前端的地址访问前端 ,成功。（如果前端无法访问后端，有可能是nignx反向代理无效，可参考我的另一篇文章。nginx反向代理失效，前端无法获取后端的数据，前后端连接不上