基于springboot和vue前后端分离项目利用Docker部署到阿里云服务器

最近做的实训项目要求用Docker部署到阿里云服务器上，记录一下部署流程，方便大家借鉴和避雷。

一、购买阿里云服务器

购买阿里云服务器教程可参考博客:阿里云服务器如何购买？
高校学生可搜索飞天加速计划，通过认证可以免费领取7个月的云服务器使用资格。

二、安装远程软件

网上可以远程连接服务器的软件有很多，推荐使用xshell、secureCRT、MobaXterm等。这里用的是xshell远程连接的服务器，当然也可用阿里云服务器实例中的远程远程连接。

1.xshell连接服务器

xshell下载链接：https://www.xshell.com/zh/xshell/
网盘链接：https://pan.baidu.com/s/1Gb6kjFm2pqD7CyLUGl3PdQ提取码：ids8
安装完成之后点击新建会话：

输入要连接的主机号（云服务器的公网ip，可自行查看服务器实例）：

点击连接后，接着输入用户名和密码，点击连接。如果忘记密码可点击重置实例密码，进行密码重置：

三、安装Docker

1.更新yum到最新版本

sudo yum update

2.安装Docker所需要的依赖包

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

3.设置yum源

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

4.查看仓库所有的Docker版本

yum list docker-ce --showduplicates | sort -r

5.安装Docker

安装最新版本的Docker：

sudo yum install docker-ce

6.启动Docker

启动Docker

sudo systemctl start docker

设置Docker开机自启动

sudo systemctl enable docker

7.查看Docker版本

docker --version

8.Docker常用命令

docker --help               #Docker帮助
docker --version            #查看Docker版本
docker search <image>       #搜索镜像文件，如：docker search mysql
docker pull <image>     #拉取镜像文件， 如：docker pull mysql
docker images               #查看已经拉取下来的所以镜像文件
docker rmi <image>      #删除指定镜像文件
docker run --name <name> -p 80:8080 -d <image>      #发布指定镜像文件
docker ps                   #查看正在运行的所有镜像
docker ps -a                #查看所有发布的镜像
docker rm <image>           #删除执行已发布的镜像

9.安装docker-compose

Docker Compose是一个用于定义和运行多个Docker容器的工具，它可以帮助开发人员在本地快速构建和测试多个容器化应用程序。Docker Compose使用YAML文件来定义容器之间的依赖关系和配置信息，从而简化了容器的管理和部署过程。

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

给予docker-compose可执行权限

sudo chmod +x /usr/local/bin/docker-compose

查看docker-compose版本

docker-compose --version

四、安装mysql

1.拉取mysql的镜像

docker pull mysql:5.7

注意：若项目所需mysql版本更高，需要修改拉取mysql的镜像版本。

2.启动mysql容器

在3306端口运行mysql镜像，设置mysql密码

docker run -p 3306:3306 --name mysql5.7 \
-v /home/mysql/log:/etc/mysql/log \
-v /home/mysql/data:/etc/mysql/data \
-v /home/mysql/conf:/etc/mysql/conf \
-e MYSQL_ROOT_PASSWORD=123456 \
-d mysql:5.7

注意：要在云服务器的实例控制台中将安全组中的3306端口打开，否则会访问端口失败，同样项目中所需端口都要在安全组中打开。

进入mysql容器

docker exec -it 容器名 /bin/bash

容器名可通过docker ps -a查看NAMES列。
进入容器后，输入：

mysql -u root -p

输入设置的密码后，进入数据库，运行show databases;命令查看当前数据库。

3.利用Navicat查看是否连接成功

启动Navicat，连接阿里云Mysql数据库。

输入连接名、主机（服务器的公网ip）、用户名和密码，点击确定。

连接数据库成功之后，会显示绿色，可以访问数据库中的各表数据。

项目中的sql文件可以在Navicat中进行导入。
项目如果需要redis部署可参考博客：docker部署redis详细教程

五、安装Nginx

1.拉取Nginx镜像

docker pull nginx

2.编写文件

在服务器中创建文件夹，此处实在根目录创建的。

# 切换到根目录
cd /
# 创建文件夹
mkdir cli
# 进入文件夹内
cd cli
# 创建nginx和html文件夹
mkdir -p nginx/html
# 进入到nginx文件夹
cd nginx

在nginx文件夹中创建nginx.conf文件并进行编写：

vim nginx.conf

nginx.conf文件的内容（公网ip和端口号根据项目填写）：

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       前端运行端口号;
        server_name  公网ip;
        location / {
            root   /usr/share/nginx/html;
            # nginx 报404需要加下面这行
            try_files $uri $uri/ /index.html last; 
            index  index.html index.htm;
            #nginx 报405加下面这行
            #error_page 405 =200 http://$host$request_uri;
        }
        #nginx 报 连接错误 、没有数据（We’re sorry but “XXX” doesn’t work...放开下面的注释（我是这个问题，如果不行可以试试方法二）
        #如果需要代理，则使用下面代码，可创建多个location代理
        #location /idle {
         #   proxy_pass 后端所需代理的IP和端口;
        #}
        # et_header Host $host;
        # proxy_set_header X_Real_IP $remote_addr;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

六、打包前端项目

在前端vue项目中将端口port改为前端项目要运行的端口，t如有代理，则将代理路径改为公网IP地址加后端运行端口。

运行打包命令：

npm run build

打包后生成dist文件夹

将dist文件夹上传到服务器，列举两种方法：

1.可先将dist文件夹打包成zip格式后上传到服务器后再进行解压：

安装lrzsz模块上传文件：

yum install lrzsz

安装unzip命令:

yum install -y unzip zip

上传dist.zip文件使用rz命令 ，选择要上传的文件，等待上传完成，运行解压命令，将zip文件解压：

unzip dist.zip

将解压后的文件重命名为html：

mv dist html

当前nginx文件夹路径下：

2.利用XFTP软件上传文件

XFTP下载：https://www.xshell.com/zh/xftp/
安装成功后连接到服务器，通过图形化界面上传文件。也可通过宝塔面板上传文件。

七、打包后端项目

1.修改后端接口和跨域

• 后端项目打包前要修改数据库的IP和端口，并保证用户名和密码是docker部署在mysql容器当中的。
  
• 后端接口也要改成公网ip和后端端口（没有baseurl则不需要改）
  
• 跨域问题（若后端处理跨域问题，则是需要修改限制ip和端口，同样若是前端处理跨域，则修改前端）
  

2.打包jar包

• 打包前运行maven的clean命令
  
• 因为要打包成jar包形式，所以要再pom.xml文件底下，规定packaging标签为jar。
• 运行package命令进行打包

• 打包后生成jar包：

3.上传jar包到服务器

退出nginx文件夹到cli文件夹。

cd ..  # 退出当前目录，返回上一级目录

这里XFTP上传较简单，不详解了。讲一下rz命令上传，运行命令：

rz -be

加上-be命令防止中文乱码，在弹出的窗口中选择要上传的jar包，上传到服务器。（若命令行中出现乱码，则退出远程连接后,重新进入cli文件夹中运行rz -be命令上传）

八、生成前后端容器

1.编写Dockerfile文件

新建Dockerfile文件：

vim Dockerfile

文件内容如下：

FROM openjdk
COPY app.jar /app.jar
CMD ["--server.port=8080"]
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/app.jar"]

注意：这里的COPY 后的jar包名为app,jar，改成自己的jar包名字，/ 后的app.jar不需要修改。

2.编写docker-compose.yml文件

新建docker-compose.yml文件：

vim docker-compose.yml

文件内容如下：

version: "3"
services:
  nginx:
    image: nginx
    ports:
           - 8081:8081  # 前端暴露的端口
    volumes:
      - /cli/nginx/html:/usr/share/nginx/html
      - /cli/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true
  dormitoryadmin:
    image: app:latest
    build: .
    ports:
          - 8080:8080   # 后端暴露的端口
    privileged: true

编写完后，当前cli文件夹下的目录应该是：

3.生成容器

运行docker-compose命令，生成统一部署的容器：

docker-compose up -d

生成容器后,查看容器运行命令：

docker ps -a

容器在Up运行状态，则部署成功。

九、部署完成

生成容器后，在浏览器网址中输入公网ip：前端端口，即可看到部署成功后的网站。