可以，而且这套东西你一旦理顺，后面做项目就不会一直“哪里都懂一点，但一上手就慌”。

你现在遇到的，本质上是 开发环境、测试环境、生产环境 三套东西混在一起了。先给你一句最核心的话：

写代码可以在服务器上，但“调试前端、联调接口、连数据库、发版部署”通常都要区分清楚你现在到底在操作哪一个环境。

我用最接地气的方式带你搭框架。

一、你现在到底在做什么

你现在说的场景，一般是这样的：

  1. 代码放在服务器上
    你通过 VSCode Remote SSH、终端、跳板机之类连到服务器开发。
  2. 前端想在本机浏览器看效果
    因为浏览器在你电脑上，不在远程服务器上，所以你需要：
    • 要么把前端项目在本机跑起来
    • 要么把服务器上的前端端口转发到本机
  3. 后端和数据库可能在不同地方
    常见组合有：
    • 前端在本机，后端在测试服务器，数据库也在测试服务器
    • 前后端都在服务器，数据库单独一台
    • 前端本机，后端本机，数据库 Docker / 本机 / 远程库
  4. 部署到测试环境
    不是“写完代码自动就有了”，而是把你改的代码发到测试环境机器上，再启动服务。
  5. 上线
    把测试通过的版本发布到生产环境。

二、你先建立这 4 个环境概念

你先只记住这四个名词。

1）本地环境

就是你自己电脑。

用途：

  • 看前端页面
  • 本地跑前端
  • 本地连远程后端
  • 本地连测试数据库或本地数据库
  • 提交 git 代码

2）开发环境

平时开发调试用的环境，可能是你服务器上的一个分支、一套服务。

用途：

  • 改代码
  • 联调
  • 自测

3）测试环境

给测试同学、产品验收、你自己完整验证流程用的环境。

用途：

  • 验证功能是否完整
  • 模拟正式环境

4）生产环境

真正给用户使用的线上环境。

用途：

  • 正式提供服务

三、你现在最该先学会的，不是“上线”，而是下面这条链路

你先把这一条跑通：

拉代码 → 启动前端 → 启动后端 → 连数据库 → 改代码 → 提交代码 → 部署测试环境

只要这条通了，上线只是“更规范一点的部署”。

四、先讲你最困惑的：为什么前端很多要在本机上弄

因为前端最终是给 浏览器 看的，而浏览器在你电脑上。

所以你常见有两种方式：

方式 A：前端项目直接在本机跑

最常见，也最推荐给新手。

比如：

  • 你在本机 git clone
  • npm install
  • npm run dev
  • 浏览器打开 http://localhost:3000

优点：

  • 改代码马上刷新
  • 调试方便
  • 看报错直观

方式 B：前端在服务器跑，然后端口转发到本机

比如服务器前端项目跑在 5173 端口，你通过 VSCode/SSH 转发到本机，再用浏览器打开。

优点：

  • 不用在本机配完整环境
  • 服务器环境和项目更一致

缺点：

  • 新手容易被端口、代理、网络搞晕
  • 热更新和静态资源有时不稳定

对你现在来说，优先学会方式 A。

五、数据库“很多要在本机上弄”是什么意思

这句话一般不是说“数据库一定部署在你电脑上”，而是说：

你需要在本机有能力去连接数据库、查看数据、改配置。

常见情况有 3 种：

1）数据库就在远程服务器

你本机只是通过工具连接它。

比如你用：

  • Navicat
  • DataGrip
  • DBeaver
  • mysql 命令行
  • psql 命令行

去连远程数据库。

2）数据库在 Docker 里，本机起一份

适合本地完整调试。
比如：

  • 本机起 MySQL/PostgreSQL/Redis
  • 后端也在本机跑
  • 前端也在本机跑

这是最完整的本地开发方式。

3）数据库不让你直连，要走 SSH 隧道

公司里很常见。

比如数据库只允许服务器内网访问，那你本机就要这样连：

  • 先 SSH 到服务器
  • 做端口转发
  • 再通过本机工具连接 127.0.0.1:某端口

这个你以后很容易碰到。

六、你需要学会的真实工作流

下面这个就是你以后最常见的实操流程。

场景 1：本机看前端，后端和数据库在测试服务器

这是最适合初学者的联调方式。

你做什么

  1. 本机拉前端代码
  2. 本机启动前端
  3. 前端接口地址配置成测试环境后端地址
  4. 浏览器访问本机前端页面
  5. 页面请求会打到测试后端
  6. 测试后端再去连测试数据库

你需要会什么

  • 改 .env 配置
  • 知道 API base URL 是什么
  • 知道跨域怎么处理
  • 会看浏览器 F12 的 Network 和 Console

最关键的配置例子

前端常见会有这种：

1
VITE_API_BASE_URL=http://xx.xx.xx.xx:8080

或者：

1
NEXT_PUBLIC_API_BASE_URL=http://xx.xx.xx.xx:8080

或者项目里写代理：

1
2
3
4
5
6
proxy: {
  '/api': {
    target: 'http://xx.xx.xx.xx:8080',
    changeOrigin: true
  }
}

你需要理解

前端页面在你本机打开，不代表后端也在本机。
前端和后端可以分开。

场景 2：前后端都在本机跑，数据库连远程测试库

你做什么

  1. 本机拉前端代码
  2. 本机拉后端代码
  3. 本机起前端
  4. 本机起后端
  5. 后端配置数据库连接为测试库地址

你会遇到的问题

  • 本机没有 Java / Node / Python / Go 环境
  • 端口冲突
  • 数据库白名单
  • Redis / MQ 没起
  • 后端启动缺环境变量

数据库配置例子

比如 Spring Boot：

1
2
3
4
5
spring:
  datasource:
    url: jdbc:mysql://10.0.0.12:3306/test_db
    username: root
    password: 123456

或者 Node：

1
2
3
4
5
DB_HOST=10.0.0.12
DB_PORT=3306
DB_NAME=test_db
DB_USER=root
DB_PASSWORD=123456

场景 3：代码在服务器开发，前端通过端口转发到本机看

你做什么

  1. SSH 连服务器
  2. 在服务器启动前端，比如 npm run dev
  3. 把服务器端口转发到本机
  4. 本机浏览器打开转发地址

例子

服务器上前端跑在 5173：

1
npm run dev -- --host 0.0.0.0 --port 5173

然后 SSH 端口转发：

1
ssh -L 5173:127.0.0.1:5173 user@server_ip

然后本机打开：

1
http://127.0.0.1:5173

这个你要理解

不是“服务器直接弹出页面给你”，而是你把服务器端口映射到本机了。

七、部署到测试环境，实际在做什么

很多新手以为“部署”很神秘，其实本质上就是：

把新代码放到测试服务器，然后重新启动对应服务。

最简单的部署动作

前端项目部署

常见步骤：

  1. 拉最新代码
  2. 安装依赖
  3. 打包
  4. 把打包产物放到 nginx 静态目录
  5. reload nginx

例如：

1
2
3
4
5
git pull origin feat/xxx
npm install
npm run build
cp -r dist/* /var/www/project/
nginx -s reload

后端项目部署

常见步骤：

  1. 拉最新代码
  2. 编译打包
  3. 停掉旧服务
  4. 启动新服务

例如 Java：

1
2
3
4
5
git pull origin feat/xxx
mvn clean package -DskipTests
ps -ef | grep xxx
kill -9 old_pid
nohup java -jar target/app.jar > app.log 2>&1 &

或者 Node：

1
2
3
git pull origin feat/xxx
npm install
pm2 restart app

八、上线，和部署测试环境有什么区别

流程上很像，但要求更严格。

测试环境部署

重点是：

  • 能不能跑
  • 功能对不对
  • 给测试验收

生产环境上线

重点是：

  • 不能影响线上用户
  • 要能回滚
  • 要看日志和监控
  • 通常要走发布流程

你可以把它简单理解成：

测试部署 = 先试跑
生产上线 = 正式发布

九、基本技能

我直接按实战优先级给你排。

1）Git 基本操作

你至少要熟：

1
2
3
4
5
6
git clone
git pull
git checkout -b 分支名
git add .
git commit -m "xxx"
git push origin 分支名

还有切分支：

1
git checkout 分支名

2）启动前端

你要知道项目是用什么启动：

1
2
npm install
npm run dev

或者：

1
2
pnpm install
pnpm dev

3）启动后端

你要知道后端是什么技术栈：

  • Java：mvn spring-boot:run 或 java -jar
  • Node：npm run dev / node app.js
  • Python：python app.py
  • Go：go run main.go

4）看配置文件

重点认这几类：

  • .env
  • .env.development
  • .env.test
  • application.yml
  • application-dev.yml
  • config.yaml

你要能看懂：

  • 端口
  • 数据库地址
  • Redis 地址
  • 接口 base URL
  • 环境变量

5）看日志

程序起不来，第一件事不是乱改，是看日志。

你要学会看：

  • 端口冲突
  • 数据库连接失败
  • 权限不足
  • 配置缺失
  • 依赖服务没启动

6）会连数据库

你至少要会：

  • 主机
  • 端口
  • 库名
  • 用户名
  • 密码

以及测试连接。

7）看浏览器开发者工具

最重要是：

  • Console
  • Network

你要能看出：

  • 接口报 404 / 500 / 401
  • 跨域
  • 参数传错
  • 返回数据不对

8）会部署最基础版本

你至少知道：

  • 代码部署到哪台机器
  • 启动命令是什么
  • 日志在哪
  • 服务怎么重启
  • 出问题怎么回滚

误区解读

1）“部署” ≠ “把代码复制过去就结束”

还包括：

  • 安装依赖
  • 打包
  • 改配置
  • 启动服务
  • 看日志
  • 验证接口

2）“上线” ≠ “git push”

git push 只是把代码传到代码仓库。
上线是把代码真正发布到生产环境。

十一、“通用排查口诀”

以后环境起不来，你就按这个顺序排查：

先确认 5 件事

  1. 代码对不对
    拉的是不是正确分支
  2. 依赖装没装
    npm install / pnpm install / mvn install
  3. 配置对不对
    .env、数据库地址、端口、token
  4. 服务起没起
    前端、后端、数据库、Redis
  5. 网络通不通
    本机能不能访问服务器，服务器能不能连数据库

十三、例子

假设你做一个管理系统。

你的日常可能是这样

开发时

  • 本机跑前端
  • 测试服务器跑后端
  • 测试数据库存数据

改完代码后

  • git 提交分支
  • 提 PR / 合并代码
  • 把测试环境更新到新代码
  • 测试同学验收

验收通过后

  • 走上线流程
  • 部署生产
  • 验证正式环境

十四、相关情况命令

1）会看启动日志

这个是最重要的。程序起不来，先看日志。

直接前台启动看日志

比如：

1
2
3
4
npm run dev
pnpm dev
mvn spring-boot:run
python app.py

特点：

  • 日志直接打印在当前终端
  • 最适合开发时看报错

后台启动后看日志

Node / 前端 / 普通程序

如果你是这样启动的：

1
nohup npm run dev > app.log 2>&1 &

看日志：

1
tail -f app.log

看最后 100 行：

1
tail -n 100 app.log

搜索报错关键词：

1
2
grep -i error app.log
grep -i exception app.log

Java 服务日志

如果是 jar 包启动：

1
nohup java -jar app.jar > app.log 2>&1 &

看日志：

1
tail -f app.log

systemd 管理的服务

如果服务是 systemctl 管的：

1
systemctl status 服务名

比如：

1
systemctl status nginx

看更详细日志：

1
journalctl -u 服务名 -f

例如：

1
journalctl -u nginx -f

看日志时重点看什么

重点找这些词：

  • error
  • exception
  • failed
  • refused
  • timeout
  • address already in use
  • access denied
  • connection failed

2）会确认端口是否占用

这个也非常常见。程序起不来，经常是端口被占了。

Linux 常用

看某个端口有没有被占用

比如看 3000 端口：

1
lsof -i :3000

或者：

1
ss -tlnp | grep 3000

或者：

1
netstat -tlnp | grep 3000

说明：

  • lsof -i :端口：最直观
  • ss -tlnp：现在更常用
  • netstat：老命令，有些机器没有

看某个进程

比如看 node 相关进程：

1
ps -ef | grep node

看 java：

1
ps -ef | grep java

杀掉占用端口的进程

先查 PID：

1
lsof -i :3000

输出里会有 PID，然后杀掉：

1
kill -9 PID

比如：

1
kill -9 12345

Windows 常用

查端口占用

1
netstat -ano | findstr 3000

最后一列一般是 PID。

根据 PID 查进程

1
tasklist | findstr 12345

杀进程

1
taskkill /PID 12345 /F

3）会测试数据库能不能通

这个分两层：

  • 网络通不通
  • 数据库账号密码能不能连上

先测网络通不通

测主机能不能到

1
ping 数据库IP

例如：

1
ping 10.0.0.12

注意：
有些服务器禁 ping，ping 不通不一定代表不能连数据库。

测数据库端口通不通

MySQL 默认 3306

1
nc -zv 10.0.0.12 3306

或者：

1
telnet 10.0.0.12 3306

PostgreSQL 默认 5432

1
nc -zv 10.0.0.12 5432

Redis 默认 6379

1
nc -zv 10.0.0.12 6379

如果看到 succeeded、open 这种字样，说明端口通。

再测数据库能不能登录

MySQL / MariaDB

1
mysql -h 10.0.0.12 -P 3306 -u root -p

回车后输入密码。

指定库：

1
mysql -h 10.0.0.12 -P 3306 -u root -p test_db

连上后可以试：

1
2
3
show databases;
use test_db;
show tables;

PostgreSQL

1
psql -h 10.0.0.12 -p 5432 -U postgres -d test_db

Redis

1
redis-cli -h 10.0.0.12 -p 6379

有密码的话：

1
redis-cli -h 10.0.0.12 -p 6379 -a 密码

然后测试：

1
ping

如果返回：

1
PONG

说明通了。

4）会区分“代码错了”和“环境没配好”

这个没有一个单独命令，但可以靠 现象 + 命令 来判断。

一般属于“环境没配好”的典型报错

1. 端口占用

1
address already in use

查：

1
lsof -i :端口

2. 数据库连不上

1
2
3
4
connection refused
access denied
timeout
could not connect

查：

1
nc -zv 数据库IP 端口

再查：

1
mysql -h ...

3. 配置文件没配

1
2
3
missing env
config not found
datasource url is null

查环境变量：

1
2
3
4
env | grep DB
env | grep MYSQL
cat .env
cat application.yml

4. 依赖没装

比如：

1
2
3
command not found
module not found
cannot find package

查：

1
2
3
4
5
node -v
npm -v
pnpm -v
java -version
python --version

重新装依赖：

1
npm install

或：

1
pnpm install

一般属于“代码错了”的典型报错

1. 语法错误

比如：

1
2
SyntaxError
unexpected token

这种大概率是代码问题。

2. 空指针、数组越界、逻辑异常

比如 Java：

1
2
NullPointerException
IndexOutOfBoundsException

比如 Node：

1
TypeError: Cannot read properties of undefined

这种一般是代码逻辑问题。

3. 某个接口只在某个功能点报错

比如程序能启动，首页能开，但点“保存”才报错。
这通常更像：

  • 接口代码有 bug
  • 参数处理有问题
  • SQL 写错

不太像“环境没配好”。

5）最常用排查命令

看进程

1
2
3
ps -ef | grep java
ps -ef | grep node
ps -ef | grep python

看端口

1
2
lsof -i :3000
ss -tlnp | grep 3000

看日志

1
2
3
tail -f app.log
tail -n 100 app.log
grep -i error app.log

测网络

1
2
3
ping 10.0.0.12
nc -zv 10.0.0.12 3306
telnet 10.0.0.12 3306

测数据库

1
2
3
mysql -h 10.0.0.12 -P 3306 -u root -p
psql -h 10.0.0.12 -p 5432 -U postgres -d test_db
redis-cli -h 10.0.0.12 -p 6379

看环境变量

1
2
3
env
env | grep DB
env | grep PORT

看配置文件

1
2
3
cat .env
cat application.yml
cat application-dev.yml

杀进程

1
kill -9 PID

6）排查顺序

以后服务起不来，你就按这个顺序：

第一步：先启动

1
npm run dev

或者

1
mvn spring-boot:run

第二步：看报错

看终端输出，或者：

1
tail -f app.log

第三步：看端口有没有占

1
lsof -i :端口

第四步：看依赖和环境变量

1
2
3
node -v
java -version
env | grep DB

第五步：测数据库

1
2
nc -zv 数据库IP 3306
mysql -h 数据库IP -P 3306 -u 用户 -p

这样你基本就能判断是：

  • 代码问题
  • 配置问题
  • 依赖问题
  • 网络问题
  • 数据库问题

能启动，但功能报错

更像 代码问题

根本启动不起来

更像 环境 / 配置 / 依赖问题

本机能跑，服务器不能跑

更像 服务器环境问题

同样代码别人能跑，你不能跑

更像 你本地环境问题