论坛的前后端基本搭建与部署

(Updated: )

准备工作：
搭建前后端，和完成自动部署至远程服务器

1.前端部分

使用umi框架快速搭建项目，由于之前经常使用React，所以本次选择AntDesign开发
可以简单分析下umi的文件树中主要文件:

  • .husky用来自动部署服务器
  • .umirc.ts用来配置路由
  • src
    • services存放请求函数
    • pages存放网页
    • components存放公用组件
    • app.ts存放Layout全局组件

      所出现的错误

      1.cygpath: command not found” when commiting to branch
      将Git\usr\bin\cygpath.exe放到<% HOME %>\AppData\Local\GitHubDesktop\app-3.1.2\resources\app\git\usr\bin即可
      分析Git使用resource的cygpath程序时，未找到而报错

      2.husky - commit-msg hook exited with code 1 (error)
      第一次commit的时候，使用git commit “fix: ····”即可解决

在搭建前端项目后，就可以上服务器部署啦!

大致思路为：前端先生成部署文件，自己手动部署，用nginx做代理服务器

下列是我所配置的.conf内容

1
2
3
4
5
6
7
8
9
server {
        listen 10086;
        server_name TroForum.com;
        root /home/ubuntu/projects/TroForum/;

        index index.html index.htm index.nginx-debian.html;
        location / {

        }

nginx服务器监听10086端口，使用根目录文件为TroForum

这样就完成项目的前端基础搭建与部署啦

2.后端部分

采用kotlin+Gradle+SpringBoot进行开发，因为kotlin与java使用的JVM一样，就不用再配置其他环境了

可以去Spring initializr自动生成
首先我们配置Gradle:

1
2
3
4
5
6
plugins {
	id("org.springframework.boot") version "2.7.5"
	id("io.spring.dependency-management") version "1.0.15.RELEASE"
	kotlin("jvm") version "1.6.21"
	kotlin("plugin.spring") version "1.6.21"
}

配置插件，jvm,spring,springBoot框架这些都配上

1
2
3
4
5
6
7
group = "com.example"
version = "0.0.1-SNAPSHOT"
java.sourceCompatibility = JavaVersion.VERSION_1_8

repositories {
    mavenCentral()
}

表明模块与版本，和java使用版本，和使用mavenCentral()为使用的配置仓库

1
2
3
4
5
6
dependencies {
    implementation("org.springframework.boot:spring-boot-starter-web")
	implementation("org.jetbrains.kotlin:kotlin-reflect")
	implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
}

配置依赖，依赖可以在 mvnrepository.com 查找

配置好后即可构建项目啦，成功就成功了

构建项目好后就可以写配置文件了

1
2
3
4
server:
    port: 8080
    servlet:
        context-path: /api

port表示端口, context-path用来nginx分发

接下来配置nginx

1
2
3
4
5
6
location /api {
                proxy_pass http://127.0.0.1:8080;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
        }

接下来就可以部署啦!
跟前端一样，先手动部署，用nohup指令

这样就完成后端的构建与部署啦~

3.数据库部分

大致流程：
在创建数据库后，进入数据库，把user中目标账号的host改为%，该账号即可面向所有ip连接，
后再将配置信息中bind_address改为0.0.0.0即可

在gradle的依赖里添加:

  • spring-boot-starter-jdbc
  • mysql-connector-java
  • mybatis-plus-boot-starter
    在配置文件里添加一下信息
    1
    2
    3
    4
    5
    6
    spring:
      datasource:
        url: jdbc:mysql://XXXXXXXX:3306/TroForum?useUnicode=true&characterEncoding=UTF-8&useSSL=false&autoReconnect=true&failOverReadOnly=false&serverTimezone=GMT%2B8
        username: XXX
        password: XXXXXX
        driver-class-name: com.mysql.jdbc.Driver
    这样数据库部分也好啦，就可以开始写项目啦!