前后端分离项目的实现与部署

如果只是想看部署可以跳转到第三部分开始。

前提：xshell+xftp（或者其他能够连接服务器并传输文件的）+云服务器或者是虚拟机。

后端项目的创建

后端项目的创建相对来说是最简单的一步。

1.添加依赖

在pom文件里添加，这个是最基础也必要的

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>2.3.5.RELEASE</version>
    </dependency>

2.添加接口

在默认的spring boot项目的模板上添加一个web controller类，这个类的作用是提供一个前后端传递的接口和返回给前端数据验证是否成功连通。

helloController.java

@RestController
@RequestMapping("/backend")
public class helloController {

    @RequestMapping("/hello")
    public String hello() {
        return "Hello";
    }

3.指定启动端口

在java目录同级位置创建resource文件夹，里面创建application.properites,

server.port=9095//指定运行端口9095

4.运行项目

在app.java添加启动类注解

@SpringBootApplication
public class App 
{
    public static void main( String[] args )
    {
        SpringApplication.run( App.class,args );
    }
}

点击启动按钮运行项目，控制台正常输出没有报错代表后端项目构建成功。

5.打包项目

直接使用idea打包很可能会出现问题，需要在pom文件里添加打包信息。

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.4.RELEASE</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <includeSystemScope>true</includeSystemScope>
                    <mainClass>org.example.App</mainClass>
                </configuration>
            </plugin>

        </plugins>
    </build>

点击右侧边栏的maven，点击lifecycle里的package进行打包。

前端项目的创建

前端项目我们使用的是vue，用编译器创建或者命令行都行。（创建前需要有前端环境,网上很容易找到）我们要做的就是向后端发出请求并接收后端返回的数据。

创建项目结束后我们在终端执行 npm install ,完成后再执行npm run dev,执行成功后打开控制台里的网址，我们能看到正常显示，说明运行正常。

首先编写请求api的js文件

位置的话可以是，src>assets>api>homeapi.js

import axios from "axios";

const homeBasePath = '/backend';

const API_PATH = {
    getHelloData: homeBasePath + '/hello',
};


export default {

    getHelloData(params, succCallback, failedCallback) {
        axios.get(API_PATH.getHelloData, {params: params})
            .then(resp => {
               if (succCallback) {
                    succCallback(resp);
                }
            })
            .catch(error => {
                if (failedCallback) {
                    failedCallback(new Error(`***getData 调用出现问题：${error}***`));
                }
            });
    },
}

改造页面

调用api获取后端数据显示在页面，由于我们并没有实际业务直接对app.vue改造即可

<script setup>

import {onMounted, reactive, } from "vue";
import homeApi from "@/assets/api/homeApi.js";
const state = reactive({
  backData:'',
    }
)
onMounted(() =>{
  init();
})

function init() {
  getHello();
}

const getHello = () => {
  let params = {
  }
  homeApi.getHelloData(params,res =>{
        state.backData = res.data
        console.log(res.data )
        // console.log(state.backData)
      },() => {}
  );
}
</script>

<template>
  <header>

    <div>前后端分离项目部署实践</div>
  </header>

  <main>
    <div>见面第一句：{{state.backData}}</div>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

配置启动端口及代理

从上面的文件里看到并没有配置的ip和端口，而且前后端的运行端口不一致，由于浏览器的同源策略，没有办法获取返回的后端数据，必须要配置代理，不配置的话，向后端发出的请求，ip和接口都是默认前端的运行ip和端口。

配置vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 8995,//指定前端的运行端口
    proxy: {
      '/backend': { 
        target: 'http://localhost:9095', //代理的目标服务器和端口
        changeOrigin: true,
        pathRewrite: {
          '^/backend': ''
        }
      }
    }
  }



})

注意我们这里的配置的代理当部署到服务器上时就不会生效了（这里代理的目标地址是本地服务器，方便本地前后端测试开发，如果要在服务器上生效，代理的地址应该是服务器上后端的端口和ip），需要我们通过nginx进行代理配置。

查看页面正常显示，说明配置成功

后端部署

0.安装Java环境

首先下载jdk1.8 linux版本，可以去官网下（要登陆），建议国内的镜像站下载，我的网盘链接：百度网盘 请输入提取码 提取码：1213 xftp传输到服务器上，解压

tar -zxvf jdk-8u331-linux-x64.tar.gz

cd etc去到etc目录   用 vim profile命令编辑profile文件，添加在最后面

export JAVA_HOME=/java/jdk1.8.0_361  //这里是你解压后的文件路径，不要照搬
export CLASSPATH=$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin
export PATHJAVA_HOME CLASSPATH

:wq保存文件，source profile 激活配置文件 输入java -version 正常返回版本信息说明成功了。

1.上传jar包

在工程里的target目录里有上面打包好的jar文件，将打包好的jar包使用sftp上传到服务器里。如果是云服务器，要将服务器的安全组对应的端口开放，我在配置文件里指定的是9095端口，所以开放9095端口即可。

2.在jar文件目录下执行命令：nohup java -jar ***.jar & //***为你的jar包名

前端配置

主要是通过nginx来部署前端项目

1.本地打包vue项目，npm run build，通过xftp上传打包好的dist文件夹。

2.服务器安装nginx,命令：

sudo apt-get update
sudo apt-get install nginx

打开你的服务器，ip:80端口,如果显示如下页面证明安装成功。

3.编译nginx配置.首先查看默认的配置文件，cat /etc/nginx/nginx.conf | grep -vE "#|^$" ,这里对主要的配置文件解释一下

user www-data;                        # 运行 Nginx 的用户
worker_processes auto;                # 自动设置 worker 进程数为 CPU 核心数
pid /run/nginx.pid;                   # Nginx 的 PID 文件路径
include /etc/nginx/modules-enabled/*.conf;  # 包含模块配置文件
events {                              # 事件处理模块的配置
        worker_connections 768;       # 每个 worker 进程的最大连接数
}
http {                                # HTTP 核心模块的配置
        sendfile on;                  # 开启 sendfile 功能
        tcp_nopush on;                # 开启 tcp_nopush 功能
        types_hash_max_size 2048;     # 设置 types_hash_max_size 参数的值
        include /etc/nginx/mime.types; # 包含 MIME 类型定义文件
        default_type application/octet-stream; # 默认 MIME 类型
        ssl_prefer_server_ciphers on; # 开启 SSL/TLS 功能
        access_log /var/log/nginx/access.log; # 访问日志文件路径
        error_log /var/log/nginx/error.log;   # 错误日志文件路径
        gzip on;                      # 开启 Gzip 压缩
        include /etc/nginx/conf.d/*.conf;    # 包含其他配置文件
        include /etc/nginx/sites-enabled/*;  # 包含虚拟主机配置文件
}

最后两个配置最重要，代表其他配置文件的存放位置，我们自己的配置文件可以存放在/etc/nginx/sites-enabled/这个目录下面，在这个目录下添加自己的配置文件，xxx.conf,因为以后可能我们的服务器会有多个服务部署，所以配置文件独立。

myweb.conf

upstream backend{
   server IP:9095;
    }
server {
   listen 8995 default_server; #可以把8995修改为你需要设置的端口号

   root /home/kailiwenwen0220@/dist; #你的前端文件存放的路径地址

   index index.html index.htm;  #保证你的dist文件夹下面有个文件叫做index.html

   server_name IP;  #这里的替换为你自己的ubuntu所在ip地址

   location / {
       try_files $uri $uri/ =404;
   }

   location ^~/backend {
        proxy_pass http://backend;
    }
}

4.重启nginx服务，命令 sudo systemctl reload nginx，这时候打开浏览器输入ip:8995，查看是否显示正常