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

前端配置

vue 配置后台地址

/public/config.json

{
  "serverUrl": "http://localhost:8080"
}

main.js

import axios from "axios";
//读取外部配置文件
axios.get("/config.json").then((res) => {
  app.config.globalProperties.$config = res.data;
});
export const globals = app.config.globalProperties;

request.js

import { globals } from "@/main";
import axios from "axios";
const serverUrl = globals.$config?.serverUrl || "http://localhost:8080";
const request = axios.create({
  baseURL: serverUrl,
  timeout: 30000,
});

如果有跨域问题，则可以在 vite.config.js 中引入

import { defineConfig, loadEnv } from "vite";
const serverUrl = globals.$config?.serverUrl || "http://localhost:8080";
export default ({ mode }) =>
  defineConfig({
    server: {
      proxy: {
        "/api": {
          //获取路径中包含了/api的请求
          target: loadEnv(mode, process.cwd()).VITE_APP_URL, //后台服务所在的源
          changeOrigin: true, //修改源
          rewrite: (path) => path.replace(/^\/api/, ""), //api替换为''
        },
      },
    },
  });

然后在.env.development 和.env.production 中写好环境变量

# dev.development
VITE_APP_URL="http://localhost:8080"

# dev.production
VITE_APP_URL="http://114.55.132.144:8080"

vue 打包：npm run build

后端配置

给服务器安全组添加 8888 端口规则

这里以阿里云为例

​​

安装宝塔

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

然后用打开显示的外网 ip 并用账号密码登陆

本地配置

springboot 打包：mvn clean package

Xshell (命令)和 Xftp (上传文件)

ifconfig 命令可以查看内网 ip，配置 application-prod.yml 的数据库 url

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://172.27.133.111:3306/big_event
    username: root
    password:
  data:
    redis:
      host: localhost
      port: 6379
server:
  port: 8080

常用命令

# 查看端口占用
netstat -nlp | grep 8085
# 关闭对应PID
kill -9 372027
# 查看log
tail -f server.log
# 运行jar，nohup 不挂断的运行
cd /home/big-event
nohup java -jar big-event-0.0.1-SNAPSHOT.jar > server.log 2>&1 &
# 创建脚本
echo "nohup java -jar big-event-0.0.1-SNAPSHOT.jar > server.log 2>&1 &" > start.sh
# 文件所有者有读、写、执行权限，文件组有读、写、执行权限，其他用户没有权限
chmod 770  start.sh
# 运行脚本
./start.sh

服务器配置

安装 nginx

# 安装gcc
yum install gcc-c++
# 安装PCRE pcre-devel
yum install -y pcre pcre-devel
# 安装zlib
yum install -y zlib zlib-devel
# 安装Open SSL
yum install -y openssl openssl-devel

进入 tmp

cd /tmp/
wget http://nginx.org/download/nginx-1.24.0.tar.gz
tar -zxvf nginx-1.24.0.tar.gz

解压

cd /usr/local
mkdir nginx
cd nginx

cp -R /tmp/nginx-1.24.0 ./

cd nginx-1.24.0

#编译，执行命令，考虑到后续安装ssl证书，添加两个模块，如不需要则直接执行./configure即可
./configure --with-http_stub_status_module --with-http_ssl_module

make && make install

进入 nginx

cd /usr/local/nginx-1.24.0/sbin
./nginx


./nginx -s stop #停止
./nginx -s start #启动
./nginx -s reload #重启

编辑/usr/local/nginx/conf/nginx.conf，使得 root 指向前端文件所在目录

cd ..
cd conf
vi nginx.conf
# "a"进入编辑模式
# "esc"退出编辑模式
# ":wq"保存

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /home/big-event/dist;
            index  index.html index.htm;
        }

然后

cd ..
cd sbin/
./nginx -s reload
# 可能报错
# nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

# 于是
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

# 显示端口占用
# nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)

# 查看端口
netstat -ntlp|grep 80
# tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      152578/nginx: maste

# kill -9无效
fuser -k 80/tcp

# 重启nginx
cd /usr/local/nginx/sbin
./nginx

redis

cd /usr/local/redis-6.0.8/src
# 关闭
redis-cli shutdown
# 重启
redis-server redis.conf
# 查看
ps -ef|grep redis
# 端口
netstat -ntlp|grep 6379


./redis-server /etc/redis.conf

./redis-server /usr/local/redis-6.0.8/redis.conf

重启服务器

cd /home/big-event
# 运行脚本
./start.sh
# 重启nginx
cd /usr/local/nginx/sbin