前端后端项目部署到云服务器

PS：项目前后端都使用docker进行部署，未学习过的可以去过一遍再来借鉴，也可直接借鉴

1.前端项目打包部署

前端项目打包

进行前端项目打包之前需要把前端项目中api后端接口地址更改为实际的云服务器后端接口地址：

如：云服务器公网ip: 10.1.189.1 后端服务端口为8080 所以后端服务的地址就是公网ip加上端口号

http://10.1.189.1:8080 --表示后端服务，不要还是写成localhost:8080的本地环境

另外前端项目其他api接口或者配置中需要对接后端服务地址的都需要改成实际云服务器的ip+服务端口号

打包命令：

npm run build

在终端输入 npm run build 打包前端项目 这里以vscode打开前端项目为例：

运行成功之后 会生成一个dist文件夹，这是打包之后的文件，默认存放在项目路径位置

这里为了方便演示，这里已经把dist目录拿出来放在另一个目录下，实际打包后的位置在项目路径位置。

配置nginx文件

创建一个nginx.conf文件，用记事本或者vscode打开编写内容：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

    server {
        #前端项目端口 指定为所需要的端口 这里前端项目使用的是8081端口
        listen       8081;
        # 指定前端项目所在的位置
        location / {
        #nginx挂载目录 dist为打包后的前端项目 如果名字不一致则需要修改dist为实际打包后的名字
            root /usr/share/nginx/html/dist;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            #代理到后端项目 backed为后端项目容器名 8080为后端服务的端口号
            proxy_pass http://backed:8080; 
        }
    }
}

上述nginx内容中，一个server表示一个服务，只需要修改server中listen端口号 location 前端项目所在地址，location /api中代理到后端的地址，其他不用更改。

配置完成之后打开远程连接服务连接云服务器（或者直接连接云服务器）：

安装docker

#安装docker 18.09.0依赖库
sudo yum install -y yum-utils device-mapper-persistent-data lvm2

#添加docker源
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
#上述官方docker源下载比较慢 推荐使用阿里云镜像docker源
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

#安装docker
sudo yum install docker-ce-18.09.0 docker-ce-cli-18.09.0 containerd.io

#启动docker
sudo systemctl start docker

#设置Docker开机自启
sudo systemctl enable docker

防火墙命令

需要注意的是需要开放云服务器的防火墙端口号（用到哪个端口就开放哪个，云服务器实例的安全组和云服务器里的防火墙端口都需要打开），由于是自己练习，可以直接关闭防火墙，把云服务器的安全组策略全部开放（实际上线使用的项目不推荐，安全隐患大）

1:查看防火状态
systemctl status firewalld
service iptables status
2:暂时关闭防火墙
systemctl stop firewalld
service iptables stop
3:永久关闭防火墙
systemctl disable firewalld
chkconfig iptables off
4:重启防火墙
systemctl enable firewalld
service iptables restart
5:永久关闭后重启
chkconfig iptables on

这里可以选择永久关闭或者暂时关闭。

Docker安装mysql

**步骤1：拉取MySQL 8的镜像文件**

docker pull mysql:8


**步骤2：使用Docker创建MySQL容器,创建MySQL数据存储目录并挂载到容器中*

mkdir -p /mysql/conf

mkdir -p /mysql/data

mkdir -p /mysql/init 

------

docker run -p 3306:3306 --name mysql
 -v /mysql/data:/var/lib/mysql
 -v /mysql/conf:/etc/mysql/conf.d 
 -v /mysql/init:/docker-entrypoint-initdb.d
 -e MYSQL_ROOT_PASSWORD=root -d mysql:8

------

说明：

参数`-p 3306:3306`表示将Docker容器的3306端口映射到宿主机的3306端口。参数`--name mysql`表示给容器起个名字叫mysql，方便管理。

参数`-v /data/mysql:/var/lib/mysql`表示将宿主机的/data/mysql目录挂载到容器的/var/lib/mysql目录上，这样可以实现数据持久化。

参数**-v /etc/mysql:/etc/mysql/conf.d** 表示将宿主机的/etc/mysql目录挂在到容器的/etc/mysql/conf.d目录上

参数**-v /root/mysql/init:/docker-entrypoint-initdb.d**表示将宿主机的/root/mysql/init目录挂在到容器的初始化目录 /docker-entrypoint-initdb.d

参数`-e MYSQL_ROOT_PASSWORD=root`表示设置MySQL的root用户的密码为root。



**步骤3：进入MySQL容器执行相关操作**

docker exec -it mysql bash

说明：进入容器后可以在容器内使用MySQL客户端来操作MySQL数据库。

------

mysql -u root -p回车

------

输入你的密码（我的密码是:root）

------

exit

说明：退出mysql窗口

------

exit

说明：退出mysql容器

连接mysql

mysql安装完成之后需要使用数据库管理工具连接云服务器上的mysql，然后导入后端项目用到的mysql文件，这里演示一下docker安装mysql之后如何连接云服务器docker的mysql容器：

打开navicat：新建数据库连接

在ssh中连接云服务器，账号密码为云服务器的账号密码 ip为云服务器的ip 端口也是一样

在常规中连接数据库，输入云服务器私有ip以及数据库端口账号密码等，之后可以测试连接

导入数据库文件这里不再演示.

docker安装nginx

**步骤1. 拉取nginx:1.12.2的镜像文件；创建一个数据存储目录，比如/data/nginx**

docker pull nginx:1.12.2

这里的nginx镜像使用其他版本也可以，示例使用nginx1.12.2

安装镜像完成之后输入：docker images 查看已下载的镜像:

前端项目部署

------
创建nginx存储目录（容器挂载目录）--可以自己指定路径

mkdir -p /data/nginx/conf

------

mkdir -p /data/nginx/logs

------

mkdir -p /data/nginx/html

------

进入云服务器上的/data/nginx目录 可以看到我们创建的三个容器挂载目录 conf、logs、html

打开conf目录，上传我们编写好的nginx文件nginx.conf：

打开html目录，上传我们打包后的dist文件夹(也就是前端项目)

准备好之后使用使用docker创建运行容器：

**步骤2. 启动一个nginx 1.12.2的容器并将数据存储目录挂载到容器内部的/data目录中**



docker run -d --name nginx -p 8081:8081 -v /data/nginx/html:/usr/share/nginx/html -v /data//nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/logs:/var/log/nginx 
nginx:1.12.2



**步骤3. 设置应用开机自启**



------

docker update --restart=always nginx

------



以上步骤完成后，就可以启动nginx容器并访问ip:8081了。

容器创建成功之后，前端项目部署就已经完成。

2.后端项目打包部署

后端项目打包

后端项目打包之前需要更改数据库配置,在本地开发的时候我们使用的是localhost:3306，当使用docker容器部署之后，设置在同一个网络可以直接使用容器名访问数据库，关于docker网络配置我们后面再说，先更改后端项目数据库路径。

将原有的localhost:3306改成mysql（mysql为上面我们使用docker run 运行mysql是的容器名 --name 指定）

打包后端项目：先clean清除

可以使用终端命令 mvn clean；也可以使用IDEA提供的工具面板：

点击clean清除。

再点击package打包后端项目：

打包成功之后，会在项目的路径生成一个targer打包文件，点击进去就能看到项目的jar包

.jar后缀的就是项目打包文件

后端项目部署

打包工作做好之后，我们在云服务器上创建一个目录用来存放打包后的后端项目

这里示例 mkdir -p /data/backed    --也可以自己创建目录 之后对应就可以

创建目录完成之后，我们需要编写一个Dockerfile文件，由于我们是利用docker部署项目，所以需要利用Dockerfile文件来构建后端项目的镜像来创建容器运行后端项目，这里不太清晰的可以去看看docker视频，也可跟着操作完成之后再去观看加深理解。

编写Dockerfile文件：

FROM java:8u20
MAINTAINER docker_maven docker_maven@email.com
WORKDIR /ROOT
ADD server-1.0-SNAPSHOT.jar server.jar
CMD ["java", "-version"]
ENTRYPOINT ["java", "-Dfile.encoding=utf-8","-jar", "server.jar"]
EXPOSE 8080

第一行表示JDK版本镜像 这里使用的是jdk1.8 其他版本需要去自行查阅

第二行为维持者 一般不用改

第三行为工作目录 默认/root  一般不用改

第四行为 我们打包之后的后端项目名字 + 自定义命名 。 可以理解为我们为这个后端项目jar包取了一个别名。 需要填写自己实际的后端项目名字，自定义命名也需要自己命名，注意.jar后缀不能改

第五行为 cmd窗台启动命令 一般不用改

第六行为 项目运行启动命令前面三项一般不用改，只需要把最后的server.jar改为自己实际上命名的后端项目名，也就是我们第四行自定义命名的项目名字

第七行为项目暴露的端口号 这里我们后端暴露的端口为8080，可以根据自己项目端口进行更改

注意Dockerfile文件没有后缀，名字必须为Dockerfile 不可以更改！！！。

编写完成之后，我们把打包完成的后端项目jar包和Dockerfile文件上传到我们创建项目目录/data/backed:

也可以先上传后端项目jar包，然后使用vi Dockerfile命令 编写Dockerfile文件内。

这里我们直接使用远程连接工具上传到/data/backed目录。

最后我们进入到/data/backed目录： cd /data/backed

进入之后，我们输入 docker build -t server:1.0 .   命令来构建镜像

docker build -t server:1.0 .

#build -t 表示自定义构建镜像
#server:1.0   -- :前面的server表示镜像名，:后面的1.0表示镜像的版本 可以自己指定
#最后的 .   -- 这个点表示 Dockerfile文件所在的目录 
因为我们当前/data/backed目录下已经有了Dockerfile文件 
所以直接用 . 表示当前目录下的Dockerfile文件

创建完成镜像之后，我们直接创建后端服务对应的容器：docker run ...

docker run -d -p 8080:8080 --name server --network A server:1.0
#run 表示创建并运行容器
#-d 表示后台运行  
#-p 表示端口映射 将宿主机的8080端口映射到容器的8080端口 这里可以通过访问宿主机端口访问容器
#--name 表示这个容器的名字
#--network A 表示创建一个网络A 容器使用这个网络
#server:1.0 表示镜像，说明我们是基于这个镜像来构建容器

这一步完成之后我们可以查看正在运行的容器情况:docker ps 

最后一步：在创建后端项目容器的时候，我们创建了一个网络A，但是mysql容器和nginx容器是没有创建网络A，我们需要把这两个容器加入网络A:

#将mysql容器加入网络A
docker network connect A mysql

#将nginx容器加入网络A
docker network connect A nginx

解读：在docker中，每个容器都是相互独立的，与外界是隔离的，想要让两个容器相互可以访问必须要把它们加入到同一个网络中，在创建容器的时候，如果我们没有指定网络，docker会自动为我们的容器分配一个网络，其ip地址每次启动容器都会变化，这种情况不利于我们容器间的相互访问，所以在创建容器时我们会自己指定一个网络，这样系统不会为我们分配网络，在每个容器创建时，我们都可以把它们加入到一个网络，以便于它们能够相互访问；除此之外，我们也可以事后创建网络，再把它们都加入到一个网络中，像上述mysql和nginx的操作一样。

当我们所有容器都处在一个网络中时，我们要访问另一个容器的服务时，我们只需要指定该容器的名字即可，也就是我们在后端项目的数据库地址配置的时候，我们直接填写mysql而不是localhost:8080,docker会根据我们填写的mysql去当前网络中查找这个mysql容器。

在nginx.conf配置文件的location代理服务中，我们也是填写了后端服务的容器名来指定后端服务。

到此，项目配置完成。

3.关于部署问题

需要注意的是我们部署之后的IP地址一定是云服务器的ip地址已经端口，如果部署之后项目出错，需要去查看接口报错以及后端报错，很大概率上是我们前端或者后端一些地址配置填写的不是服务器地址或者填写的是错误的地址，比如：localhost:8080 需要改成云服务器ip+端口。当配置出错之后就会有问题，这时需要修改之后我们再重新部署项目。

nginx.conf文件的配置实际上比较简单，可以自己多尝试几次，需要注意代理的服务地址以及监听的端口号。

docker的使用不是非常复杂，如果是小白也可以按照我的来尝试配置一下，基本上不会出错，对于docker命令我都有解释其作用，如果想要更深层次的理解可以去看一下docker的教程以便于更好的安装。

有疑问可以留言大家一起交流。