【服务器】将本地项目部署到服务器

当我们已经有了一个服务器后 如何将本地项目部署到服务器呢

第一步，找到云服务器实例，查看公网IP地址

第二步，推荐使用 Windows 自带的 PowerShell

ssh root@你的公网IP
# 例如：
ssh root@47.98.123.45

如果超时，首先检查服务器实例安全组的配置里入方向有没有开通22端口

如果出现root@8.133.21.96: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).说明服务器拒绝了密码登录，只允许使用 SSH 密钥对进行认证。在实例里找到重置实例密码，修改密码后重新使用ssh

第三步，安装 Nginx（Web 服务器）

Nginx 是一个轻量、高效的 Web 服务器，适合部署静态网页。

如果是 Ubuntu/Debian 系统：

# 更新软件包
apt update

# 安装 Nginx
apt install nginx -y

# 启动 Nginx
systemctl start nginx

# 设置开机自启
systemctl enable nginx

如果是 CentOS 系统：

yum install nginx -y
systemctl start nginx
systemctl enable nginx

✅ 安装完成后，在浏览器访问：

http://你的公网IP

你应该看到 Nginx 欢迎页，说明 Web 服务已运行！

第四步，创建 Nginx 配置文件 ：创建一个新的配置文件。例如 /etc/nginx/conf.d/tool.conf，并写入以下内容：

server {
    listen 80; # 监听80端口（HTTP）
    server_name tool.yourdomain.com; # 你的二级域名，此处替换为你的实际二级域名

    # 指定静态文件根目录
    root /var/www/tool;
    index index.html index.htm;

    # 主要配置：尝试以文件、目录的方式处理请求，均失败则返回 index.html（用于支持前端路由）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置静态资源的缓存时间，提升性能
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

命令：

sudo tee /etc/nginx/conf.d/scmm.conf > /dev/null << 'EOL'
server {
    listen 80;
    server_name scmm.5379.com.cn;

    root /var/www/tool;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }
EOL

然后，添加静态资源缓存配置

sudo tee -a /etc/nginx/conf.d/scmm.conf > /dev/null << 'EOL'
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
EOL

第五步，验证是否成功

执行完上面两条命令后，检查文件是否创建成功：

bash

# 查看文件内容
sudo cat /etc/nginx/conf.d/scmm.conf

如果输出显示完整的配置内容，说明创建成功了！

第六步，继续完成后续步骤

现在配置文件已经创建好了，请继续执行：

# 1. 测试Nginx配置语法
sudo nginx -t

# 2. 如果测试成功，重新加载Nginx配置
sudo systemctl reload nginx

# 3. 检查Nginx状态，确保它正常运行
sudo systemctl status nginx

第七步 使用scp命令上传项目

如果你有一个大的React项目，里面包含多个工具，但只想把其中一个部署到特定的二级域名上，如果你的工具是通过路由区分的，可以在入口处做判断：

// src/App.js 或 src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import PasswordGenerator from './tools/password-generator';

// 检查URL参数或路径来决定渲染哪个工具
const urlParams = new URLSearchParams(window.location.search);
const toolName = urlParams.get('tool');

if (window.location.hostname === 'scmm.5379.com.cn' || toolName === 'password') {
  // 独立部署模式：只渲染密码生成器
  const root = createRoot(document.getElementById('root'));
  root.render(<PasswordGenerator />);
} else {
  // 正常模式：渲染完整的应用
  const root = createRoot(document.getElementById('root'));
  root.render(<FullApp />); // 你的完整应用
}

1. 在本地构建项目

在你的React项目根目录下，运行构建命令：

npm run build

2. 上传构建好的文件到服务器，将 build 文件夹里的所有内容 上传到服务器的Nginx配置中指定的目录 /var/www/tool/：

scp -r ./build/* root@IP:/var/www/tool/

这里的IP要替换成自己的IP

注意： 是上传 build 文件夹里的内容（*），不是上传整个 build 文件夹本身。

3. 在服务器上检查文件

上传完成后，可以登录服务器检查文件是否到位：

ls -la /var/www/tool/

你应该能看到类似这样的文件：

• index.html

• static/ 文件夹

• 可能还有 asset-manifest.json 等文件

第八步，上传后检查并测试：

# 1. 检查文件是否上传成功
ls -la /var/www/tool/

# 2. 重新加载Nginx使配置生效
sudo systemctl reload nginx

# 3. 在浏览器访问你的二级域名进行测试：# http://

最后一步：确保Nginx配置正确，让二级域名能够找到你上传的文件。

1. 登录服务器

2. 检查Nginx配置文件

查看我们之前创建的配置文件：

                cat /etc/nginx/conf.d/scmm.conf

确认配置文件中以下关键点是否正确：

• server_name XXXXXXXX; ← 必须是你的二级域名

• root /var/www/tool; ← 必须是你上传文件的目录

• index index.html index.htm; ← 必须有这一行

  3. 测试Nginx配置

  sudo nginx -t

  如果显示 syntax is ok 和 test is successful，说明配置正确。

4. 重新加载Nginx

bash

sudo systemctl reload nginx

5. 检查文件是否在正确位置

bash

ls -la /var/www/tool/

你应该能看到你上传的文件，包括 index.html。

以下是我自己遇到的一些错误：

1.在正确的目录中执行命令，必须进入有React项目的目录，再执行scp命令

2.如果显示："/var/www/tool/": No such file or directory，说明**服务器上的目标目录 /var/www/tool/ 不存在！**你需要先在服务器上创建这个目录，然后再上传文件。

首先，登录服务器创建目录，输入密码登录后，执行：

# 创建目录
sudo mkdir -p /var/www/tool

# 设置权限（非常重要！）
sudo chmod -R 755 /var/www/tool
sudo chown -R $USER:$USER /var/www/tool

# 退出服务器
exit

然后，重新使用scp上传文件

3.Failed to load resource: the server responded with a status of 403 (Forbidden)

403 Forbidden 错误是一个权限问题 这意味着Nginx服务器进程没有权限读取你上传的文件。解决方案：修改文件权限和所有权

检查当前文件权限和所有者

ls -la /var/www/

看看 tool 目录的所有者和权限是什么。

修改目录所有权（最重要的一步！）

Nginx通常以 nginx 或 www-data 用户运行，需要让这个用户有权读取文件：

# 更改 /var/www/tool 目录及其所有文件的所有者为 nginx 用户
sudo chown -R nginx:nginx /var/www/tool/

设置正确的文件权限

# 给目录设置755权限（读+执行+列出）
sudo find /var/www/tool/ -type d -exec chmod 755 {} \;

# 给文件设置644权限（读）
sudo find /var/www/tool/ -type f -exec chmod 644 {} \;

重新加载Nginx并测试

# 重新加载Nginx配置
sudo systemctl reload nginx

# 查看Nginx错误日志，获取更详细的错误信息
sudo tail -f /var/log/nginx/error.log