从GitHub到云端：手把手教你将前端项目部署到腾讯云

1. 服务器购买与基础配置

第一次部署前端项目到腾讯云时，服务器选购环节就让我踩了不少坑。建议直接选择Ubuntu Server 22.04 LTS版本，这个长期支持版稳定性好且社区资源丰富。在腾讯云控制台的"云服务器CVM"页面，新手推荐选择"标准型S5"配置（2核4G起步），地域选择离目标用户最近的节点（比如华东地区用户选"上海"）。

购买完成后有三件必须立即做的事：

1. 在实例详情页重置Ubuntu系统密码（默认用户名就是ubuntu）
2. 进入"安全组"配置，添加两条入站规则：
   • 允许TCP:22端口（SSH连接用）
   • 允许TCP:80端口（HTTP服务用）
3. 记录公网IP地址，这个相当于你的服务器门牌号

注意：腾讯云新用户可能会看到"轻量应用服务器"选项，虽然便宜但不建议选，因为部分网络配置受限，后期扩展麻烦。

2. 连接服务器与代码拉取

2.1 终端连接实战

我习惯用Mac自带的终端，Windows用户可以用XShell或MobaXterm。连接命令其实很简单：

bash复制ssh ubuntu@你的公网IP

输入密码时终端不会显示字符，这是正常的安全设计。如果连接超时，八成是安全组没放行22端口。

第一次连接会提示指纹验证，输入yes后就会看到ubuntu@VM-0-1-ubuntu:~$的提示符，说明已经成功登陆。

2.2 GitHub代码克隆技巧

在服务器上执行这些命令：

bash复制git clone https://github.com/你的用户名/项目名.git
cd 项目名

现在GitHub已经强制要求使用token替代密码认证。生成token时记得勾选"repo"权限，有效期建议设置30天。遇到认证失败时，试试这个命令清除git缓存：

bash复制git config --global credential.helper store

3. 环境配置全攻略

3.1 Node.js正确安装姿势

Ubuntu自带的老旧Node版本就是个坑！用下面这套组合拳：

bash复制curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v  # 验证版本

如果遇到EACCES权限错误，需要修复npm的全局安装权限：

bash复制mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.profile
source ~/.profile

3.2 项目依赖安装避坑

进入项目目录后别急着npm install，先做这两步：

1. 检查项目根目录是否有.npmrc文件，删除可能存在的镜像源配置
2. 执行安装前更新npm到最新版：

bash复制npm install -g npm@latest

安装依赖时如果卡住，可以换国内镜像：

bash复制npm config set registry https://registry.npmmirror.com
npm install

4. Nginx配置与部署

4.1 Nginx安装与基础配置

用apt安装Nginx时要注意版本：

bash复制sudo apt update
sudo apt install nginx
sudo systemctl enable nginx  # 设置开机启动

配置文件建议放在/etc/nginx/conf.d/下新建文件，比如：

nginx复制server {
    listen 80;
    server_name 你的公网IP;
    
    location / {
        root /home/ubuntu/项目名/dist;
        try_files $uri $uri/ /index.html;
        index index.html;
    }
}

关键点在于try_files配置，这是解决前端路由404问题的核心。

4.2 权限与路径问题解决

部署后遇到403错误，通常是这三个原因：

1. Nginx工作进程用户没有访问权限：

bash复制sudo chown -R www-data:www-data /home/ubuntu/项目名/dist

2. 目录索引文件不是index.html：

bash复制ls -l /home/ubuntu/项目名/dist  # 确认文件存在

3. SELinux限制（腾讯云Ubuntu默认关闭）

4.3 服务管理实用命令

查看Nginx错误日志最有用：

bash复制tail -f /var/log/nginx/error.log

重启服务的正确姿势：

bash复制sudo nginx -t  # 先测试配置
sudo systemctl restart nginx

5. 常见问题排错指南

5.1 端口占用问题

如果发现80端口被占用：

bash复制sudo netstat -tulnp | grep :80

杀掉占用进程后，可能需要调整腾讯云安全组规则。

5.2 静态资源加载失败

检查构建产物的路径引用方式，在vite.config.js或webpack配置中设置base:

javascript复制export default defineConfig({
  base: './'
})

5.3 持续集成建议

虽然首次部署是手动操作，但后续可以配置GitHub Actions自动化部署。在项目根目录创建.github/workflows/deploy.yml文件，实现代码push后自动部署。

部署完成后，用curl测试服务是否正常：

bash复制curl -I http://localhost

看到HTTP/1.1 200 OK就说明大功告成。记得在浏览器访问时清除缓存，有时候浏览器缓存会让人误以为部署没生效。