前端及后端研发系统运维部署基础

白小纯2025
30 阅读4分钟

前端及后端研发系统运维部署基础

目标读者：前端/后端开发人员 核心目的：帮助研发人员掌握基础运维部署技能，提升跨岗位协作效率与线上问题排查能力。

一、Linux 基础命令（必掌握）

Linux 是服务器主流操作系统，熟练掌握基础命令是运维部署的前提。

1. 目录与文件操作

命令功能示例
cd切换目录cd /usr/local cd .. cd ~
ls列出目录内容ls -l（详细信息） ls -a（含隐藏文件）
mkdir创建目录mkdir test mkdir -p /data/project/frontend（递归创建）
rm删除文件/目录rm file.txt rm -f file.txt（强制） rm -rf test/（谨慎！）
cp复制文件/目录cp file.txt /home/user/ cp -r test/ /data/
mv移动或重命名mv file.txt newfile.txt mv test/ /data/project/
touch创建空文件touch app.log
cat/tail/head查看文件cat file.txt tail -f app.log（实时日志） head -10 file.txt

2. 权限管理

  • 权限模型：r=4, w=2, x=1，组合为三位八进制数（如 755, 644）

  • 常用命令

    chmod 755 start.sh      # 所有者可执行，其他用户可读
chmod 644 index.html    # 静态资源推荐权限
chown -R user:group /data/project  # 递归修改属主与属组

3. 系统与进程管理

命令功能
`ps -efgrep java`查看 Java 进程
kill -9 <PID>强制终止进程
top实时监控 CPU/内存
df -h查看磁盘空间
free -h查看内存使用情况

二、基础组件安装指南

1. JDK 安装（Java 后端必备）

CentOS（yum）
yum install -y java-17-openjdk-devel
java -version && javac -version

如需指定路径，配置 /etc/profile 中的 JAVA_HOME。

Ubuntu（apt）
sudo apt update
sudo apt install -y openjdk-17-jdk
java -version

2. Nginx 安装（前端静态服务 / 反向代理）

CentOS
# 添加官方源
cat > /etc/yum.repos.d/nginx.repo <<EOF
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/\$releasever/\$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
EOF

yum install -y nginx
systemctl enable --now nginx
Ubuntu
sudo apt update && sudo apt install -y curl gnupg2
curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo gpg --dearmor -o /usr/share/keyrings/nginx-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/ubuntu $(lsb_release -cs) nginx" | sudo tee /etc/apt/sources.list.d/nginx.list
sudo apt update && sudo apt install -y nginx
sudo systemctl enable --now nginx

✅ 验证：浏览器访问服务器 IP，显示欢迎页即成功。

3. MySQL 安装（数据库）

CentOS
yum remove -y mariadb-libs
rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
yum install -y mysql-community-server
systemctl enable --now mysqld

# 获取临时密码并登录
grep 'temporary password' /var/log/mysqld.log
mysql -u root -p
ALTER USER 'root'@'localhost' IDENTIFIED BY 'NewPass@123';
Ubuntu
curl -fsSL https://dev.mysql.com/get/mysql-apt-config_0.8.22-1_all.deb -o mysql-apt-config.deb
sudo dpkg -i mysql-apt-config.deb  # 选择 MySQL 8.0
sudo apt update && sudo apt install -y mysql-server
sudo systemctl enable --now mysql

🔒 注意：生产环境建议限制远程访问，并开放 3306 端口（安全组/防火墙）。

4. Node.js 安装（前端构建 / Node 服务）

推荐使用 nvm 管理多版本。

安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 或
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
生效并验证
source ~/.bashrc      # CentOS
source ~/.zshrc       # Ubuntu (zsh)
nvm --version
安装 Node.js
nvm install --lts           # 安装 LTS 版本
nvm use 18.19.0             # 切换版本
node -v && npm -v           # 验证
npm install -g cnpm --registry=https://registry.npmmirror.com  # 国内加速

三、服务器远程登录（SSH）

1. 密码登录（测试环境）

ssh dev@192.168.1.100 -p 22

2. 密钥登录（生产推荐）

# 本地生成密钥
ssh-keygen -t rsa

# 上传公钥
ssh-copy-id -i ~/.ssh/id_rsa.pub dev@192.168.1.100 -p 22

# 后续免密登录
ssh dev@192.168.1.100

3. 工具推荐

  • Windows：Xshell、PuTTY
  • macOS：Terminal、iTerm2
  • 支持多标签、会话保存、SFTP 文件传输

四、API 调用与调试

1. 命令行（curl）

# GET
curl "https://api.example.com/user?id=1"

# POST (JSON)
curl -X POST -H "Content-Type: application/json" \
  -d '{"name":"test","age":20}' \
  https://api.example.com/user

# 携带 Token
curl -H "Authorization: Bearer token123" https://api.example.com/resource

2. 可视化工具

  • Postman / Apifox：支持环境变量、接口集合、自动化测试、文档生成

3. 注意事项

  • 核对请求方法、Header、Body 格式
  • 生产调用注意鉴权与限流
  • 优先在服务器本地 curl 测试，排除网络问题

五、服务部署流程

1. 部署前准备

  • 前端：npm run build → 生成 dist/
  • 后端：Maven/Gradle → 生成 *.jar
  • 上传：scp -P 22 dist.zip dev@192.168.1.100:/data/project/
  • 解压：unzip dist.zip 或 tar -zxvf *.tar.gz

2. 前端部署（Nginx）

配置示例 (/etc/nginx/conf.d/default.conf)：

server {
    listen 80;
    server_name localhost;
    root /data/project/frontend/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 解决 SPA 路由 404
    }
}

启动：

systemctl restart nginx

3. 后端部署（Java）

快速启动
nohup java -jar backend.jar \
  --spring.profiles.active=prod \
  --server.port=8080 &> nohup.out &
systemd 开机自启（推荐）

创建 /etc/systemd/system/backend.service：

[Unit]
Description=Backend Service
After=network.target

[Service]
User=dev
ExecStart=/usr/bin/java -jar /data/project/backend/backend.jar --spring.profiles.active=prod
SuccessExitStatus=143

[Install]
WantedBy=multi-user.target

启用服务：

systemctl daemon-reload
systemctl enable --now backend

4. 前后端服务 Nginx 代理配置（统一入口）

在实际项目中，前端（静态资源）和后端（API 服务）通常部署在不同端口或路径下。为避免跨域问题并提供统一访问入口，可通过 Nginx 反向代理 将前端页面与后端 API 路由到同一域名下。

场景示例
  • 前端：http://server-ip/ → 静态资源（Nginx 托管）
  • 后端：http://server-ip/api/... → 代理到 http://localhost:8080/...
Nginx 配置示例

编辑 /etc/nginx/conf.d/default.conf 或新建站点配置文件：

server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root /data/project/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持 Vue/React SPA 路由
    }

    # 后端 API 代理（所有 /api 开头的请求）
    location /api/ {
        proxy_pass http://localhost:8080/;  # 注意结尾的斜杠！
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # （可选）WebSocket 代理支持
    location /ws/ {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

⚠️ 关键细节：

  • proxy_pass 末尾加 / 表示路径剥离： http://example.com/api/users → 转发为 http://localhost:8080/users 若不加 /，则转发为 http://localhost:8080/api/users
  • try_files 是解决前端路由刷新 404 的核心配置
验证步骤

  1. 重载 Nginx 配置：

    nginx -t && systemctl reload nginx

  2. 浏览器访问：

    • http://<服务器IP>/ → 显示前端页面
    • 前端代码中 API 请求地址改为相对路径：/api/login

  3. 查看 Nginx 访问日志确认代理是否生效：

    tail -f /var/log/nginx/access.log
常见问题
问题解决方案
接口 404检查 proxy_pass 是否带 /，后端是否监听 localhost:8080
跨域错误仍存在确保前端请求的是 /api/xxx（同源），而非直接调用 :8080
静态资源加载失败检查 root 路径是否正确，文件权限是否为 644

✅ 优势总结：

  • 前端无需配置代理（开发环境除外）
  • 生产环境无跨域问题
  • 统一入口便于 HTTPS、限流、日志等统一管理

六、日志查看与问题排查

1. 常用命令

tail -f app.log                # 实时日志
tail -100f app.log             # 查看最近 100 行
grep "ERROR" app.log           # 过滤错误
grep -i "exception" app.log    # 忽略大小写
less app.log                   # 分页查看大文件

2. 高级技巧

# 上下文查看（匹配行前后各 5 行）
grep "2024-05-01" app.log -A 5 -B 5

# 导出错误日志
grep "error" app.log > error_$(date +%F).log

七、实用技巧与安全规范

1. 效率提升

alias ll='ls -l'               # 临时别名
echo "alias ll='ls -l'" >> ~/.bashrc && source ~/.bashrc  # 永久生效

jobs    # 查看后台任务
fg %1   # 切回前台
bg %1   # 转为后台

find /data -name "*.jar"       # 查找文件
lsof -i:8080                   # 查看端口占用

2. 安全规范

  • ❌ 禁止 root 直接登录，使用普通用户 + sudo
  • 🔐 密码复杂度高，定期更换
  • 📁 敏感配置（密码、密钥）通过环境变量或配置文件注入，禁止硬编码
  • 🔒 配置文件权限设为 600：chmod 600 config.yaml
  • 💾 部署前备份旧版本，确保可回滚

3. 常见问题排查思路

问题排查步骤
服务启动失败查 nohup.out、应用日志 → 检查端口、权限、依赖
接口不通ping → telnet IP 端口 → curl localhost:端口 → 检查 Nginx/防火墙
前端白屏检查 Nginx root 路径、文件权限、try_files 配置、CORS

结语

本文档覆盖了研发人员日常所需的核心运维部署技能。建议结合实际项目反复练习，逐步掌握：

  • Linux 命令行操作
  • 组件安装与配置
  • 服务部署与守护
  • 日志分析与故障定位

后续可进阶学习：

  • Docker 容器化部署
  • CI/CD 自动化流水线（如 Jenkins/GitLab CI）
  • Prometheus + Grafana 监控体系

动手实践是最好的老师。祝你高效部署，稳定上线！🚀

avatar
文章
阅读
粉丝