服务器部署教程下（线下、线上部署）

1、线下部署

1.1 前端

首先将拉代码下来，cd到想启动项目的目录下(控制台 cd 文件夹名称)
比如

blog-v3(cd blog-v3)
1

要在存在package.json文件的目录才能进行依赖下载、项目启动操作

检查一下自己的node版本是否为18级以上(node -v)

博客前台blog-v3使用vite4开发，需要node版本16以上才能运行，检查

是否全局安装了pnpm(pnpm -v)，如果没有安装，需要自己npm i pnpm -g全局安装

博客前台blog-v3运行

pnpm i、pnpm run serve
1

博客后台blog-v3-admin运行

pnpm i、pnpm run serve
1

1.2 后端

博客后端blog-server稍微复杂一点

首先需要在本地的数据库内导入博客后端服务blog-server项目根目录下db/online_blog.sql文件
这里的Mysql和navicat都是需要自行去下载的，作为本地数据库

navicat展示

还要在.env文件下配置数据库账户密码、上传模式(本地上传、七牛云或minio上传方式等)

如果是七牛云上传还要配置七牛云相关的，本地上传的话会直接保存在项目根目录下的upload/local文件夹下，通过项目地址可以直接访问图片
(刚拉下来应该是没有local文件夹的，可以自己建一个)

本地通过http://127.0.0.1:8888/upload/local/ + 图片名称进行访问。

按照.env下的提示配置以后，就可以npm i、npm rum serve了
后面会有.env内的具体配置教程

注意: 超级管理员账户为admin，密码在env文件里配置
后台登录超级管理员以后，使用超级管理员给自己的账户管理员权限，就可以发布你的内容了，别使用超级管理员发布内容哦，
用户表里没有超级管理员的信息，是我写在配置和代码里的

2、线上部署

2.1 配置博客后端服务

后端服务需要去在根目录的 www/wwwroot 下创建文件夹 blog，然后在里面将后端代码拉/复制过去(建议复制 blogServer 过去)，复制完成后运行 npm i 下载依赖（npm 源要设置成淘宝源，这个项目有个别依赖 npm 初始源里没有）。宝塔找文件是去 www/wwwroot 里去找的，所以要这样建立文件(最好将需要的文件都放在这里面，好找)。同时还需要去安全里将后端的 8888 端口放行，这样后端服务才能被访问到。

2.2 文件路径展示

2.3 文件夹内容展示

2.4 放行后端服务端口

如果不放行，后端服务会被宝塔防火墙禁掉，服务启动了也访问不到，还可以看看其他需要放行的端口是否放行了。服务器也是同理。

2.5 mysql 数据库配置

没有 mysql 就去软件商店下载一个，安装好以后新建 online_blog 数据库，导入博客根目录 db 文件夹下的数据库文件就 ok 了(有一次导入是上传文件，上传完成后还会显示上传成功的 sql 文件，还需要在那个文件右侧点击一次导入才算是导入成功)，导入过后可以重启一下 mysql，有可能会出现导入了但是数据库没重启就没生效的情况。

2.6 后端基础配置

找到根目录下的.env 文件，里面包含项目后端的基础配置

# node项目启动地址
APP_PORT = 8888
# 数据库地址
MYSQL_HOST = 127.0.0.1
# 数据库端口号
MYSQL_PORT = 3306
# 数据库连接名
MYSQL_USER = root
# 数据库密码 一定要用root密码 宝塔面板里有
MYSQL_PASSWORD = 'root'
# 数据库名称
MYSQL_DB = online_blog
# 超级管理员密码 超级管理员账户默认是admin 密码在这里自定义，然后通过管理员给你自己角色来获得修改权限
ADMIN_PASSWORD = '自己写'

# 不推荐 推荐用minio minio简单些
# 七牛云 AK
ACCESSKEY = ''
# 七牛云 SK
SECRETKEY = ''
# 七牛云存储空间名称
BUCKET = ''

# minio config 需要使用minio的就配置一下
# minio AK
MINIO_ACCESSKEY = ''

# minio SK
MINIO_SECRETKEY = ''

# minio bucket
MINIO_BUCKET = ''

# minio服务地址 直接写服务器地址 或者是代理服务器的网址 比如博主的就是 mrzym.top 服务器的地址就是19.18.117.18之类的 不能带http://之类的请求头 末尾也最好不带 / 否则可能就会连不上
MINIO_PATH = ''

# local本地 qiniu  七牛云 online 云服务器 minio minio服务器
UPLOADTYPE = 'minio'

# 服务器地址 用于拼接图片显示 可以使用七牛云测试域名 前面请带上http://或者https://根据实际情况带上
# 本地就是 'http://127.0.0.1:8888/' 像使用了七牛云绑定了自己的二级域名 博主的图片域名 'http://img.mrzym.top/'
# 具体如何设置二级域名 可以百度 七牛云文档也有教程 如果嫌麻烦 可以使用minio 只需要在自己的服务器上装一个就行 请看博客部署教程
BASEURL = 'http://127.0.0.1:8888/'

# JWT密钥
JWT_SECRET = blog
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

2.7 minio文件上传

文件上传推荐先使用 minio 上传 上传模式选择 minio
minio 安装方式 首先下载 docker 在软件安装面板搜来装就行 如果装不了 就在安装面板选择使用命令行的方式安装

在宝塔里打开终端 执行下载 minio 的操作
然后使用 docker 运行 minio

// 1、安装minio
docker pull minio/minio
// 2、运行 minio
// docker 运行minio 修改下面的user 和 password 那个就是minio登录账户密码 可以改成自己记得住的
docker run --name minio \
-p 9000:9000 \
-p 9999:9999 \
-d --restart=always \
-e "MINIO_ROOT_USER=minio" \
-e "MINIO_ROOT_PASSWORD=minio@123" \
-v /home/minio/data:/data \
-v /home/minio/config:/root/.minio \
minio/minio server /data \
--console-address '0.0.0.0:9999'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行好以后 查看 docker 面板 会看到运行的 minio 然后打开服务器和宝塔的 9999、9000 端口进行放行 使用服务器 ip/域名 + :9999 登录

2.8 登录

登录后创建桶 桶的名称务必和我的一致 方便代理 后续熟悉了项目自己可以再修改

把桶的权限改为 public

创建 keys 然后把 ak、sk、桶的名称填入 env 配置里 就可以上传了，这里每一次生成的密钥都不一样，一定要记住自己生成的

online 云服务器上传，云服务器上传是上传到自己的服务器的，也就是上传到 blogServer 项目 src 文件的 upload/online 下，只需在 env 里上传模式配置 online 模式即可(需要使用宝塔在此文件夹位置把权限改成读写权限)，优点就是很方便，缺点就是速度受服务器带宽影响，带宽低的服务器加载图片慢。

2.9 后端项目运行配置

1、找到应用商店，安装 pm2

2、切换 pm2 的 node 版本

3、添加项目的启动文件，并运行项目，端口号是 pm2 自动去 app.js 里读取的，博主的配置默认是 8888，如果需要改就在.env 改一下端口号和 nginx 里的后端服务代理端口号即可

成功启动后可以看一下运行日志/错误日志之类的，如果没有错误日志，运行日志如下，则表明后端服务运行成功了，可以在浏览器输入服务器地址+ :端口号访问。若是出现数据库连接失败，就说明数据库账户、密码这些不对。

2.10 前端配置

前端配置就是将前端项目打包的静态资源放到服务器上，通过 nginx 代理去访问，不涉及到创建服务去运行项目，前端项目此时是由浏览器作为环境运行的。
在 www/wwwroot/blog 下新建 blogV3，然后分别建立 admin 存放博客前端后台运行 pnpm run build 打包的 dist 文件夹，blog 存放博客前端前台打包的 npm run build 打包的 dist 文件夹。

前端项目存放如下图

2.11 修改宝塔nginx 配置

user www www;
worker_processes auto;
error_log /www/wwwlogs/nginx_error.log crit;
pid /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

stream {
  log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';

  access_log /www/wwwlogs/tcp-access.log tcp_format;
  error_log /www/wwwlogs/tcp-error.log;
  include /www/server/panel/vhost/nginx/tcp/*.conf;
}

events {
  use epoll;
  worker_connections 51200;
  multi_accept on;
}

http {
  include mime.types;
  #include luawaf.conf;

  include proxy.conf;
  lua_package_path "/www/server/nginx/lib/lua/?.lua;;";

  default_type application/octet-stream;

  server_names_hash_bucket_size 512;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 50m;

  sendfile on;
  tcp_nopush on;

  keepalive_timeout 60;

  tcp_nodelay on;

  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 64k;
  fastcgi_buffers 4 64k;
  fastcgi_busy_buffers_size 128k;
  fastcgi_temp_file_write_size 256k;
  fastcgi_intercept_errors on;

  gzip on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
  gzip_vary on;
  gzip_proxied expired no-cache no-store private auth;
  gzip_disable "MSIE [1-6]\.";

  limit_conn_zone $binary_remote_addr zone=perip:10m;
  limit_conn_zone $server_name zone=perserver:10m;

  server_tokens off;
  access_log off;

  # 数据库面板
  server {
    listen 888;
    server_name phpmyadmin;
    index index.html index.htm index.php;
    root /www/server/phpmyadmin;
    location ~ /tmp/ {
      return 403;
    }

   error_page   404   /404.html;
    include enable-php.conf;

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
      expires 30d;
    }

   location ~ .*\.(js|css)?$ {
      expires 12h;
    }

   location ~ /\. {
      deny all;
    }

   access_log /www/wwwlogs/access.log;
  }

server {
    listen 80;
    server_name localhost;
    # 博客前台前端静态资源
    location / {
      root /www/wwwroot/blog/blogV3/blog/dist;
      index index.html index.htm;
    }
    # 后台前端静态资源
    location /admin {
      alias /www/wwwroot/blog/blogV3/admin/dist;
      index index.html index.htm;
    }
    # 小表情
    location /emoji {
      alias /www/wwwroot/emoji;
      autoindex on;
    }
    # 服务器存储图片
    location /online {
      alias /www/wwwroot/blog/blogServer/src/upload/online;
      autoindex on;
    }
    # 后端服务代理
    location /api/ {
      proxy_pass http://服务器ip:8888/; # 服务端代理地址 或者是域名(域名解析以后要能指向服务器ip)
      proxy_set_header Host $host; # 获取用户真实ip
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    # gitee 代理
    location /gitee/ {
      proxy_pass https://gitee.com/mrzym/; // 改成你的gitee面板地址
    }
    # minio 代理
    location /blog-images {
      proxy_pass http://服务器ip:9000/blog-images;
    }
    # 网易云音乐 代理
    location /wapi/ {
      proxy_pass http://服务器ip:3000/;
    }
  }
  include /www/server/panel/vhost/nginx/*.conf;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

音乐代理

把这个项目拉到自己的服务器下，使用 pm2 运行起来(找到 app.js 运行)，然后将音乐 api 的代理加入 nginx 里就可以了

api我放在上一篇博客的github地址中了，需要自取

ps: 获得管理员权限，可以登录超级管理员去给自己的账户权限，也可以去数据库 user 表里把自己的角色改为管理员，也就是 role 的值改为 1。

但是最近宝塔Node版本无法进行切换，这是他们那边的一个bug，暂时等待修复，部署大致流程就是这样，供大家学习