前后端分离项目的服务器部署

一、前言

• 系统环境简介：

  本地操作系统：Mac OS Monterey 12.3.1
  阿里云服务器：CentOS 7.8
  后端开发工具：IntelliJ IDEA
  前端开发工具：WebStorm

• 项目部署的前提条件：

  ① 需要购买一个域名，并且完成备案
  ② 需要拥有一台公网服务器，以阿里云服务器为例
  ③ 需要熟练掌握 Linux 操作系统的使用，熟悉常用命令
  ④ 需要对虚拟化容器技术 Docker 有初步的了解，熟悉常用命令
  ⑤ 待部署的项目原则上是基于 Spring Boot 与 Vue 开发的前后端分离项目

二、安装项目运行的基本环境

• Docker 的安装与启动：

# 安装必要编译环境与依赖的软件包
yum -y install gcc
yum -y install gcc-c++
yum install -y yum-utils device-mapper-persistent-data lvm2

# 设置镜像仓库
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 更新软件包索引
yum makecache fast

# 安装服务
yum -y install docker-ce docker-ce-cli containerd.io

# 启动服务
systemctl start docker

• 常用软件在 Docker 中的安装与启动：

# 搜索需要的镜像，选择所需要的版本号
docker search mysql

# 拉取镜像到本地仓库，不声明版本号则默认下载最新版
docker pull mysql:8.0			# MySQL
docker pull redis				# Redis
docker pull rabbitmq:management # RabbitMQ
docker pull nginx				# Nginx

# 启动容器，并完成端口映射，Nginx的启动详见前端部署
docker run --name mysql --restart=always -p 3306:3306 -e MYSQL_ROOT_PASSWORD=密码 -d mysql:8.0
docker run --name redis --restart=always -p 6379:6379 -d redis --requirepass "密码"
docker run --name rabbitmq --restart=always -p 15672:15672 -p 5672:5672  -d  rabbitmq:management

• Docker 常用命令：

systemctl restart docker	# 重启服务
systemctl stop docker		# 停止服务
systemctl status docker		# 查看服务状态

docker search 镜像名			# 搜索镜像
docker pull 镜像名			# 下载镜像
docker rmi 镜像名			# 删除镜像
docker images				# 列出所有本地镜像

docker run 镜像名			# 新建容器
docker exec -it 镜像名 /bin/bash	# 进入容器
docker rm 镜像名				# 删除容器
docker start 镜像名			# 启动容器
docker stop 镜像名			# 停止容器
docker restart 镜像名		# 重启容器
docker rename 原名 新名		# 更改容器名称

三、后端项目打包与部署

• 项目打包：

  修改 Spring Boot 项目的 pom.xml 文件，将打包方式修改为 jar，然后点击 Maven 插件中的 package 进行打包，打包成功后会在项目的 target 目录下生成一个 jar 包，如下图所示：

• 编写 Dockerfile 文件：

FROM java:8
VOLUME /tmp
ADD blog-0.0.1.jar blog.jar       
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/blog.jar"] 

• 编写 Shell 脚本：

# Jar包源路径  
SOURCE_PATH=自定义服务器上传目录
# Docker镜像/容器名
SERVER_NAME=blog-0.0.1.jar
TAG=latest
SERVER_PORT=8080
# 容器ID
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
# 镜像ID
IID=$(docker images | grep "$SERVER_NAME:$TAG" | awk '{print $3}')
if [ -n "$CID" ]; then
  echo "存在容器$SERVER_NAME, CID-$CID"
  docker stop $CID
  docker rm $CID
fi
# 构建Docker镜像
if [ -n "$IID" ]; then
  echo "存在$SERVER_NAME:$TAG镜像，IID=$IID"
  docker rmi $IID
else
  echo "不存在$SERVER_NAME:$TAG镜像，开始构建镜像"
  cd $SOURCE_PATH
  docker build -t $SERVER_NAME:$TAG .
fi
# 运行Docker容器
docker run --name $SERVER_NAME -v /usr/local/upload:/usr/local/upload -d -p $SERVER_PORT:$SERVER_PORT $SERVER_NAME:$TAG
echo "$SERVER_NAME容器创建完成"

• 运行后端项目：

将上述三个文件传输到服务器自定义的目录下，然后在该目录下运行如下命令，构建后端镜像：

sh ./脚本名称.sh 

第一次项目镜像的构建时间可能较长，请耐心等待，构建过程如下图所示：

查看是否构建成功：

# 查看所有运行的容器实例
docker ps

测试接口是否可以正常运行：

🌟 说明：重新部署只需要重新上传 Jar 包并执行 Shell 脚本即可

四、前端项目打包与部署

• 前端项目打包：

通过终端进入 Vue 项目路径，然后执行如下命令：

npm run build

执行过程如下图所示：

打包成功后会默认在项目根目录下生成 dist 目录，由于我的前端项目分为博客网站与后台管理系统两个项目，为了便于区分，将打包之后的目录名分别改为 blog 和 admin，然后上传到服务器的 /usr/local/vue 目录即可（该目录为自定义目录，需要写进 Nginx 配置文件）

• 域名解析：

域名解析要根据项目的实际需求进行设置，以下配置仅供参考：

• Nginx 的部署：

在服务器 /usr/local/nginx 目录下创建 nginx.conf 文件（该目录为自定义目录，需要在启动时映射配置文件），格式如下：

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

server {
        listen       80;
        server_name  前台域名;
     
        location / {		
            root   /usr/local/vue/blog;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://服务器IP地址:8080/;
	    	proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }	
    }
	
server {
        listen       80;
        server_name  后台子域名;
     
        location / {		
            root   /usr/local/vue/admin;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://服务器IP地址:8080/;
	    	proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }	
    }

server {
        listen       80;
        server_name  websocket子域名;
     
        location / {
          proxy_pass http://服务器IP地址:8080/websocket;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_set_header Host $host:$server_port;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
       }
    }

server {
        listen       80;
        server_name  文件上传子域名;
     
        location / {		
          root /usr/local/upload/; 
        }			
    }
 }

🌟 说明：前端分为两个项目分别对应两个 server，项目路径为之前上传到服务器的路径 /usr/local/vue/，其他两个为文件上传域名和 WebSocket 转发域名

• Nginx 的启动：

# 启动的同时映射本地修改后的配置文件与项目路径
docker run --name nginx --restart=always -p 80:80 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue -v /usr/local/upload:/usr/local/upload nginx 

五、测试

在浏览器输入域名，测试部署的网站页面是否成功显示：