當我們已經有了一個服務器后 如何將本地項目部署到服務器呢

第一步，找到云服務器實例，查看公網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