手把手通过Docker部署前后端分离项目（亲测可用）

àì夳堔傛蜴生んèń 2023-10-14 00:29 47阅读 0赞

> 前言：这里我用的是华为云的服务器，环境是CentOS7！
> 
> 分享一些自己在学习路上的一些笔记，欢迎大家共同交流与探讨！

#### 文章目录 ####

*  一、安装Docker
 *  二、安装Nginx
 *  三、安装Mysql
 *  四、部署SpringBoot项目
 *  五、部署Vue项目

## 一、安装Docker ##

1、安装：

yum install docker

2、启动/停止/重启docker服务

service docker start
    service docker stop
    service docker restart

3、查看docker版本信息

docker version

4、运行helloword，因为不存在此镜像，docker会自动下载运行本镜像

docker run hello-world

5、查看所有docker镜像

docker images

## 二、安装Nginx ##

1、拉取nginx镜像文件

docker pull nginx

2、创建并运行nginx容器

docker run -d --name nginx -p 3344:80 nginx

**注：放行3344和80端口号**

**命令详解**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">docker run</td> 
   <td align="left">启动一个镜像</td> 
  </tr> 
  <tr> 
   <td align="left">-d</td> 
   <td align="left">后台运行</td> 
  </tr> 
  <tr> 
   <td align="left">–name nginx</td> 
   <td align="left">表示为当前容器起一个别名</td> 
  </tr> 
  <tr> 
   <td align="left">-p 3344:80</td> 
   <td align="left">表示将本机的3344端口映射到nginx镜像的80端口</td> 
  </tr> 
 </tbody> 
</table>

3、查看正在运行的容器

docker ps

![img][]

5、检查nginx是否部署成功

curl localhost:3344

![img][img 1]

6、创建挂载目录

mkdir -p /home/nginx/conf
    mkdir -p /home/nginx/log
    mkdir -p /home/nginx/html

7、将名为nginx容器中的相应文件copy到刚创建的管理目录中

# 将容器nginx.conf文件复制到宿主机
    docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
    # 将容器conf.d文件夹下内容复制到宿主机
    docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
    # 将容器中的html文件夹复制到宿主机
    docker cp nginx:/usr/share/nginx/html /home/nginx/
    # 将容器中的log文件夹复制到宿主机
    docker cp nginx:/var/log/nginx /home/nginx/log

8、停止名为nginx的容器

docker stop nginx

9、删除名为nginx的容器

docker rm nginx

10、重启名为nginx容器并作目录挂载

docker run -p 3344:80 --name nginx -v 
    /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v 
    /home/nginx/conf/conf.d:/etc/nginx/conf.d -v /home/nginx/log:/var/log/nginx -v
     /home/nginx/html:/usr/share/nginx/html -d nginx:latest

**命令详解**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">-p 3344:80</td> 
   <td align="left">将容器内部的80端口映射到宿主机的3344端口</td> 
  </tr> 
  <tr> 
   <td align="left">–name nginx</td> 
   <td align="left">将容器命名为nginx</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf</td> 
   <td align="left">将宿主机路径/home/nginx/conf/nginx.conf挂载到容器内部的/etc/nginx/nginx.conf，用于提供nginx配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/nginx/conf/conf.d:/etc/nginx/conf.d</td> 
   <td align="left">将宿主机路径/home/nginx/conf/conf.d挂载到容器内部的/etc/nginx/conf.d，用于提供nginx额外的配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/nginx/log:/var/log/nginx</td> 
   <td align="left">将宿主机路径/home/nginx/log挂载到容器内部的/var/log/nginx，用于保存nginx日志文件</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/nginx/html:/usr/share/nginx/html</td> 
   <td align="left">将宿主机路径/home/nginx/html挂载到容器内部的/usr/share/nginx/html，用于提供静态资源文件</td> 
  </tr> 
  <tr> 
   <td align="left">-d</td> 
   <td align="left">后台运行容器</td> 
  </tr> 
  <tr> 
   <td align="left">nginx:latest</td> 
   <td align="left">使用nginx最新版本的镜像</td> 
  </tr> 
 </tbody> 
</table>

11、检查容器运行正常

docker ps

![img][img 2]

12、检查是否部署成功

curl localhost:3344

![img][img 3]

## 三、安装Mysql ##

1、下拉mysql镜像文件

docker pull mysql  #默认最新版本
     
    docker pull mysql:xxx  #指定版本号

2、启动mysql容器

docker run --restart=always --privileged=true -d -v 
    /home/mysql/data:/var/lib/mysql -v /home/mysql/conf:/etc/mysql/conf.d -v 
    /home/mysql/my.cnf:/etc/mysql/my.cnf -p 3310:3306 --name mysql -e 
    MYSQL_ROOT_PASSWORD=root mysql

***\*注：放行3306和3310端口号\****

**命令详解**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">–restart=always</td> 
   <td align="left">代表开启启动</td> 
  </tr> 
  <tr> 
   <td align="left">–privileged=true</td> 
   <td align="left">代表进入容器内部为管理员身份</td> 
  </tr> 
  <tr> 
   <td align="left">-d</td> 
   <td align="left">表示后台运行容器，并返回容器id</td> 
  </tr> 
  <tr> 
   <td align="left">-v</td> 
   <td align="left">把mysql产生的数据同步到本地，防止数据丢失</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/mysql/data:/var/lib/mysql</td> 
   <td align="left">数据目录映射，将主机/home/mysql/data目录映射到容器内/var/lib/mysql，用于保存mysql数据</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/mysql/conf:/etc/mysql/conf.d</td> 
   <td align="left">配置文件目录映射，将主机/home/mysql/conf目录映射到容器内/etc/mysql/conf.d，可添加mysql配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">-v /home/mysql/my.cnf:/etc/mysql/my.cnf</td> 
   <td align="left">主配置文件映射，将主机my.cnf覆盖容器内的默认my.cnf</td> 
  </tr> 
  <tr> 
   <td align="left">-p 3310:3306</td> 
   <td align="left">端口映射，将容器内3306端口映射到主机3310端口</td> 
  </tr> 
  <tr> 
   <td align="left">-e MYSQL_ROOT_PASSWORD=root</td> 
   <td align="left">设置环境变量，初始化root用户密码为root</td> 
  </tr> 
  <tr> 
   <td align="left">–name mysql</td> 
   <td align="left">设置容器名称为mysql</td> 
  </tr> 
  <tr> 
   <td align="left">mysql</td> 
   <td align="left">镜像名称，这里使用官方的mysql镜像</td> 
  </tr> 
 </tbody> 
</table>

3、查看正在运行的容器

docker ps

![img][img 4]

4、测试数据库连接

![img][img 5]

## 四、部署SpringBoot项目 ##

1、整合后端成Jar包（mvn package）并编写Dockerfile文件（无后缀名）

![img][img 6]

2、Dockerfile内容详解

FROM openjdk:8  #工程java版本
     
    COPY *.jar /app.jar  #将所有的jar包整合为app.jar
     
    EXPOSE 9099  #暴露后端端口号
     
    ENTRYPOINT ["java","-jar","app.jar"]  #执行jar包

3、上传这两个文件到Linux服务器的同一个文件夹当中，务必放在一起！

![img][img 7]

4、构建镜像

docker build -t api .  #点千万别漏了，这里取名镜像为api，可以随便取名！

![img][img 8]

5、查看当前镜像

docker images

![img][img 9]

6、创建一个新的容器并运行

docker run -d -p 9090:9090 --name httapi api

**注：放行9090端口号**

**命令详解**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">-p 9090:9090</td> 
   <td align="left">将外部9090端口映射到容器内部的9090端口</td> 
  </tr> 
  <tr> 
   <td align="left">httapi</td> 
   <td align="left">自定义容器名字</td> 
  </tr> 
  <tr> 
   <td align="left">api</td> 
   <td align="left">镜像名字</td> 
  </tr> 
 </tbody> 
</table>

7、查看正在运行的容器

docker ps

![img][img 10]

8、使用postman测试接口

![img][img 11]

## 五、部署Vue项目 ##

1、打包Vue工程（npm run build命令）并同时编写default.conf文件和Dockerfile文件

![img][img 12]

2、default.conf文件和Dockerfile文件详细

default.conf配置

server {
        
        listen       80;
        server_name  ip地址; # 修改为docker服务宿主机的ip
     
        location / {
        
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }
     
        location /api/ {
        
          proxy_pass http://ip:端口/;
        }
     
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        
            root   html;
        }
    }

Dockerfile配置

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

3、上传这三个文件到Linux服务器的同一个文件夹当中，务必放在一起！

![img][img 13]

4、构建镜像

docker build -t vue . #点千万别漏了，这里取名镜像为vue，可以随便取名！

![img][img 14]

5、查看当前镜像

docker images

![img][img 15]

6、创建一个新的容器并运行

docker run -d -p 8088:80 --name httvue vue

**注：放行8088端口号**

7、查看正在运行的容器

docker ps

![img][img 16]

8、访问前端页面并测试接口

![img][img 17]

大功告成！

[img]: https://img-blog.csdnimg.cn/918b90b4e8a74501ad270c91f4253d67.png
[img 1]: https://img-blog.csdnimg.cn/55e4e9cc2f594e8784ae2c80adf2a5c4.png
[img 2]: https://img-blog.csdnimg.cn/d8abd8c16ce74475b6a481ff77b46d03.png
[img 3]: https://img-blog.csdnimg.cn/5ce50b35caa84c56a8a3715f60093a05.png
[img 4]: https://img-blog.csdnimg.cn/3b05f948cc594d90a4175d910c6ed682.png
[img 5]: https://img-blog.csdnimg.cn/c6c3c8c0ec3641b89f675d38afa9cd43.png
[img 6]: https://img-blog.csdnimg.cn/60a79f95e7f7451aa269776cf42d5565.png
[img 7]: https://img-blog.csdnimg.cn/bef20ee4efeb41c79465720ab54e4a5f.png
[img 8]: https://img-blog.csdnimg.cn/6490a5882384497cb82760ae1daf184a.png
[img 9]: https://img-blog.csdnimg.cn/df75a4e8952c4432ae20fb4e93b3fc00.png
[img 10]: https://img-blog.csdnimg.cn/c53c5390bc8c4b5a86f8039940918a93.png
[img 11]: https://img-blog.csdnimg.cn/84635d9cb8f04a17b0b7fe15e3a49876.png
[img 12]: https://img-blog.csdnimg.cn/ed369d4581474deda884800654f48892.png
[img 13]: https://img-blog.csdnimg.cn/2fa6e9c09cc346b98297703d5ace24dc.png
[img 14]: https://img-blog.csdnimg.cn/ba6feeb1631545a2b0b7af4a5dfc87ee.png
[img 15]: https://img-blog.csdnimg.cn/dc4616e8427446e6a6cbeca20fc07809.png
[img 16]: https://img-blog.csdnimg.cn/ec0ea9b7605d412fb800e0fd754aa8f2.png
[img 17]: https://img-blog.csdnimg.cn/6624a2f258a94165bc1ae4b4149efd5e.png