《MathChina》项目部署文档

蓝桉
300 阅读5分钟

问题处理：

1.vue基于轮播图的报错：依赖

在Vue 2底下，轮播图要安装的版本：npm install vue-awesome-swiper@3 --save-dev，切记！！ 报错： !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-97503b26","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector*

css样式把stylus删了

npm install stylus --save-dev npm install stylus-loader css-loader style-loader --save-dev

《MathChina》项目部署文档简介

本文档的目的：辅助我们的工作人员能够利用文档对一个崭新的、已经配置好CentOS 7镜像的实体服务器和云服务器，独立完成MathChina前后端项目的布置。

备注：请将本文中所有0.0.0.0的ip换成实际地址！！

Windows环境操作下列步骤，需要安装的软件：

  1. IDEA开发工具
  2. VS Code
  3. Xshell个人学生版（社区版）
  4. Xftp个人学生版（社区版）

云服务器配置及其需求环境

前后端及其服务相关接口简介

前后端接口逻辑

前端在Nginx下访问接口80（http协议）http://0.0.0.0/

前端向后端POST（上传）的接口为8088，地址http://0.0.0.0/index/login

前端Vue版本：

Vue-CLI 4 + Vue 2.x + Element-UI（现在Vue 3.x + Element-UI Plus已经成熟，后期更新）

后端SpringBoot版本：

在pom.xml版本管理中，2.3.0.RELEASE

服务器相关软件版本：

  1. 操作系统：CentOS 7.6
  2. Docker容器：Docker 1.13.1 + docker-compose 1.27.4 + docker-compose version 3
  3. MySQL：8
  4. Nginx：1.19.6
  5. Redis：6.0.10

前端POST地址

前端页面访问：http://0.0.0.0/

前端登录POST后端：http://0.0.0.0:8088/index/login

前端POST数据类型&后端返回数据类型

后端不能利用@RequestBody处理前端的application/x-www-form-urlencoded

@RequestBody处理application/json，本项目处理方法是利用HttpServletRequest来接收application/x-www-form-urlencoded，也就是form-data，取出parameter之后转成String处理

响应回前端之后，我们就处理json中的message，打印在前端

后端对于跨域请求的配置CorsConfig及其@CrossOrigin

后端建立名为config的package，建立CorsConfig.java

package com.mathwork.pack.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author: 实验室
 * @Date: 2021-1-15 11:33:26
 * @Description：
 */

@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置你要允许的网站域名，如果全允许则设为 *
        config.addAllowedOrigin("*");
        // 如果要限制 HEADER 或 METHOD 请自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 这个顺序很重要哦，为避免麻烦请设置在最前
        bean.setOrder(0);
        return bean;
    }
}

之后在controller上面使用注解@CrossOrigin

注意：本CorsConfig.java只能在SpringBoot低于2.3.0版本使用，高于此版本报错！

数据库的表名&相关字段

数据库名：mathdata

数据表名：mathkami

字段：（名称--类型）

bisai——varchar

timu——varchar

kahao——varchar

password——varchar

sign——varchar

begintime——datetime

deadtime——datetime

数据表名：mathdizhi

字段：（名称--类型）

bisai——varchar

timu——varchar

level——varchar

dizhi——varchar

code——varchar

服务器的前端环境布置

Nginx配置文件

该配置文件在服务器的目录：

/root/nginx/nginx.conf

文件名：nginx.conf

#user  root;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
			try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

dist放入nginx-html下

我们在之前把root下面的nginx文件夹已经建好了，下面将Vue前端编译完成的dist目录下的文件全部放入nginx文件夹

首先，在nginx下面建立html文件夹

最后，将Vue编译（Vue源代码需要在CMD终端编译才能转换为浏览器能识别的Html和Css和Js）

npm run build

编译后的文件在Vue项目根目录的dist文件夹，下面的所有文件都是最终文件，原封不动放到nginx/html里面

服务器的后端环境布置

在windows环境，编译jar包之前，我们需要将application-pro.yml处理完毕

application-pro.yml编写

server:
  port: 8088


spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://0.0.0.0:3306/mathdata?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8&useSSL=false
    username: root
    password: wcq980220

redis-manager:
  host: 0.0.0.0:6379


mybatis:
  typeAliasesPackage: com.mathwork.pack.mapper
  mapperLocations: classpath*:mapper/*Mapper.xml

编写完application-pro.yml，我们在后端项目的文件夹下面CMD执行

# 跳过测试打包
mvn clean package -Dmaven.test.skip=true

这样就打包完毕了！

如果不想执行CMD，则需要在IDEA的最右侧侧边栏，点击maven，再分别点击clean和package

服务器基本环境布置

docker安装

#安装
yum install docker
#检验安装是否成功
docker --version
#开机启动docker
chkconfig docker on
#启动
systemctl start docker

docker-compose安装

#使用daocloud安装（目前找不到文件）
sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.22.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose


#使用github安装
sudo curl -L https://github.com/docker/compose/releases/download/2.1.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose


#给docker-compose加权限
sudo chmod +x /usr/local/bin/docker-compose
# 检查是否安装成功
docker-compose --version

阿里云docker镜像加速设置

cd /etc/docker
vim daemon.json
{
	"registry-mirrors": ["https://fyib7jrj.mirror.aliyuncs.com"]
}
sudo systemctl daemon-reload
sudo systemctl restart docker

注意：以上镜像为可选配置，你可以选择不添加该配置

在所有文件编写和放置到指定位置之后，运行命令

docker-compose up -d

如果失败，则要继续运行以下命令

sudo systemctl daemon-reload
sudo systemctl restart docker

之后重试

docker-compose up -d

docker配置文件编写

在服务器的root目录下面（可以利用Xftp操作）

  1. 新建文件夹nginx

  2. 新建文件Dockerfile，编写Dockerfile

  3. 新建文件docker-compose.yml，编写docker-compose.yml

  4. 打包后端文件进jar包，放入目录

编写Dockerfile

FROM java:8
EXPOSE 8080
ADD pack-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

编写docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true
  mysql:
    image: mysql:latest
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=wcq980220
  redis:
    image: redis:latest
  pack:
    image: pack:latest
    build: .
    ports:
      - 8088:8088
    depends_on:
      - mysql
      - redis

最终在cd ~下（即root目录下）文件架构如下：

[root@VM-8-16-centos ~]# ls
docker-compose.yml  Dockerfile  nginx  pack-0.0.1-SNAPSHOT.jar

最后一步，docker-compose up -d拉起来，就可以公网IP访问了

PS：如何删除正在使用的镜像和容器，并将新的拉起来

image.png

如上图所示，先运行

docker rm -f 容器id

再运行

docker rmi 镜像名称

随后再利用

docker-compose up -d

将新的pack:latest拉起来！

avatar
文章
阅读
粉丝