个人搭建小网站教程（云服务器Ubuntu版本）

原创 2025-08-26 17:46:06 3.5k 阅读 AI写同款

收录于

编程技巧

袋子(PJ)

码龄2年墨衍会员 · AI 创作全网分发

178粉丝25篇原创

关注

Trae Remote SSH + 99元云服务器：从空盘到上线全流程实测远程开发是指开发者在本机IDE中编辑代码，但实际运行、调试都发生在远端服务器上。SSH作为最常用的安全连接协议，将本地与云端无缝打通，大大缩短了传统“本地写码→上传→服务器配环境→重启验证”的冗长链路。对于起步阶段的个人项目，一台低配云服务器足够承载Node.js、Nginx等轻量服务，再配合Remote SSH插件，便能在IDE窗口里直接操作远程文件与终端，实现编码、部署、排错的高效闭环。这种模式尤其适合个人博客、小型API服务、部署练习等场景。本文以Trae为例，实测其Remote SSH连接一台99元阅读详情

AI摘要

-1

1.启动 FastAPI 后端（Python 部分）

2.启动 Next.js 前端（Node.js 部分）

1.配置云服务器（略讲）

拥有自己的云服务器和域名

推荐阿里云和腾讯云

以阿里云为例，先创建密钥对，然后配置服务器。

新手默认选择ecs-user用户，除非特别了解自己在做什么，不然这个最安全。

2.vscode连接（ssh连接）

记得自己的服务器公网ip和密钥位置

本地计算机安装了vscode之后，然后下载这个插件Remote - SSH

接着打开小电脑

右键SSH，打开config配置，新手用上面那个配置，针对个人。

以下是用户级配置文件与系统级配置文件的对比表格：

对比维度	用户级配置文件（`C:\Users\34970\.ssh\config`）	系统级配置文件（`C:\ProgramData\ssh\ssh_config`）
作用范围	仅对当前用户（34970账户）生效，不影响其他用户的 SSH 连接设置	对计算机上所有用户生效，所有用户的 SSH 连接都会受其配置影响
权限要求	当前用户拥有完全读写权限，无需管理员权限即可修改	需管理员权限才能修改，普通用户默认无修改权限
默认存在性	系统不自动创建，需用户手动创建或通过工具（如 VS Code）自动生成	安装 OpenSSH 组件时可能自动生成，包含默认全局配置项
配置优先级	优先级更高，若与系统级配置冲突，会覆盖系统级配置中的对应项	优先级较低，仅在用户级配置中无对应设置时生效
适用场景	个人化连接需求（如特定服务器的用户名、密钥、端口等个性化配置）	全局通用配置（如所有用户的统一代理、超时时间等公共设置）
修改风险	误操作仅影响当前用户，风险范围小	误操作可能导致所有用户连接异常，风险范围大

然后点击箭头在当前窗口连接，如果之前连结果，那么第二次连接主机保存密钥会改变，要清空一下主机记录。

本地终端输入ssh-keygen -R 云服务器公网ip

接着再进行连接，他会给云服务器下载vscode配置，然后连接成功进入云服务器页面。

3.本地压缩项目包

由于项目里面存在许多依赖，所以安装7zip，只压缩项目本身文件集。

:: 进入项目根目录（假设项目在 C:\Users\34970\Desktop\partjava）
cd C:\Users\34970\Desktop\partjava

:: 执行 7-Zip 压缩（使用你的 7z.exe 路径）

"C:\Program Files\7-Zip\7z.exe" a -tzip ../partjava.zip . -xr!node_modules （根据个人情况看哪些不要）

进入项目终端，压缩除依赖部分到项目所处主目录。压缩之后就剩下主文件。

左边是项目文件夹，右边是压缩包。

4.传输项目

把项目传到服务器，在主页创建文件夹传到文件夹内。

scp "本地压缩包位置" ecs-user@公网ip:/home/ecs-user/i/

打开本地终端传递。

传输成功后，在云服务器下载unzip

可以先更新一下sudo apt update

sudo apt install unzip安装unzip

到压缩包指定位置cd /home/ecs-user/i 输入ls看看是不是指定位置

解压文件到当前文件夹unzip partjava.zip

5.配置项目依赖

由于我项目包含了vue3和python，所以我得安装node.js和npm(或者yarn)以及python3 python3-pip

# 安装 Node.js 18（长期支持版）
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

输入npm -v以及node -v

开始安装vue3依赖npm install

开始安装python依赖，进入python项目文件，然后看看有没有python环境，一般Ubuntu是有python3环境的，python3 -v pip3 -v

python3 -version输出版本号

先进python项目文件夹

开始下载python依赖库（看看python版本安装对应虚拟环境sudo apt install python3.10-venv）

1.创建虚拟环境：python3 -m venv venv

2.激活虚拟环境（Linux）：source venv/bin/activate

3.下载库：pip3 install -r requirements.txt

6.运行项目

1.启动 FastAPI 后端（Python 部分）

进入项目根目录（确保在 partjava-ai 目录下）：
cd ~/i/partjava-ai # 替换为你的实际路径
激活虚拟环境（已创建并安装依赖的前提下）：
source venv/bin/activate # Linux/Mac 系统，终端会显示 (venv)
启动 FastAPI 服务（关键：绑定公网访问）：
uvicorn main:app --host 0.0.0.0 --port 8000

虚拟永久进程 #启动进程（uvicorn位置不要弄错了）

pm2 start "/path/to/venv/bin/uvicorn main:app --host 0.0.0.0 --port 8000" --name "backend"

pm2 restart backend #开始进程

pm2 stop backend #停止进程

pm2 delete backend #删除进程
main:app：表示运行 main.py 中的 app 实例（FastAPI 应用入口）。
--host 0.0.0.0：允许外部（包括你的本地电脑）访问服务器上的后端。
--port 8000：指定后端运行在 8000 端口（可自定义，需与前端调用一致）。
启动成功后，终端会显示：Uvicorn running on http://0.0.0.0:8000。

2.启动 Next.js 前端（Node.js 部分）

打开新终端（避免与后端终端冲突，VS Code 中可点击终端右上角 + 号新建）。
进入前端目录（通常是项目根目录，包含 package.json）：
cd ~/i # 替换为前端代码所在路径
启动前端开发服务器：
npm run dev # 或 yarn dev（根据项目依赖管理工具选择）
启动成功后，终端会显示：Local: http://localhost:3000。

3.本地电脑访问项目

端口转发（通过 VS Code 实现本地 ↔ 云服务器通信）：
按 Ctrl+Shift+P 打开命令面板，输入 Ports: Show Ports 调出端口视图。
分别转发两个端口：
后端端口：输入 8000 → 转发后本地可通过 http://localhost:8000 访问后端。
前端端口：输入 3000 → 转发后本地可通过 http://localhost:3000 访问前端。
在本地浏览器查看：
访问 http://localhost:3000 → 看到前端页面（Next.js 应用）。
前端会自动调用后端 API（若代码中已配置 http://localhost:8000 作为后端地址），实现全栈交互。

7.域名解析（要备案）

域名解析所需条件

域名注册
需要拥有一个已注册的有效域名，域名需通过ICANN认证的注册商购买（如GoDaddy、阿里云等）。

DNS服务器
需配置权威DNS服务器（如Cloudflare、AWS Route 53）或使用注册商提供的免费DNS服务。DNS服务器负责存储域名对应的解析记录。

解析记录类型
根据需求添加以下常见记录：

A记录：将域名指向IPv4地址。
AAAA记录：将域名指向IPv6地址。
CNAME记录：将域名别名指向另一个域名。
MX记录：指定邮件服务器地址。
TXT记录：用于验证或SPF配置。

操作流程

配置DNS解析

登录域名注册商或DNS服务商的管理后台。
进入域名解析设置页面，添加或修改解析记录。
保存变更，等待全球DNS缓存刷新（通常需10分钟至48小时）。

验证解析生效
使用以下工具检查解析是否正确：

命令行：nslookup example.com 或 dig example.com
在线工具：DNSChecker、WhatsMyDNS。

注意事项

确保域名未过期且状态正常（无锁定或暂停）。
多层缓存可能导致延迟，修改记录后需耐心等待。
复杂场景（如CDN、负载均衡）需结合CNAME或NS记录配置。

8.部署项目

可以先ctrl+c暂停前端，然后配置Nginx。

也可以不暂停，新建一个终端。

第一步：检查Nginx

# 检查是否安装
nginx -v

# 未安装则执行（Debian/Ubuntu）
sudo apt update && sudo apt install nginx -y

# 或（CentOS/RHEL）
yum install nginx -y

第二步：配置nginx

# 进入配置目录 cd /etc/nginx/sites-available/

# 创建并编辑配置文件（用你的域名命名，如 example.com）

sudo vim example.com

第三步：（按i进入编辑模式）

server { # 监听 80 端口（HTTP） listen 80;

# 填写你的域名（如 example.com 或 www.example.com）

server_name example.com www.example.com;

# 前端项目：将域名根路径代理到前端服务（3000 端口）

location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }

# 后端 API：将 /api 开头的请求代理到后端服务（8000 端口）

location /api { proxy_pass http://localhost:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

保存配置（按 Esc 后输入 :wq 回车）

第四步：(激活配置文件）

删除默认配置的软链接（关键！）
sudo rm /etc/nginx/sites-enabled/default

# 创建软链接到生效目录

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

检查配置是否有误

sudo nginx -t

第五步：（重启Nginx）

sudo systemctl restart nginx

然后浏览器访问域名就ok了。

9.云服务器后台持续进程

# 安装 pm2（全局） npm install -g pm2

两个终端：

# 启动前端（后台持久化）cd /home/ecs-user/

pm2 start npm --name "frontend" -- run dev

# 启动后端（后台持久化）

pm2 start "uvicorn main:app --host 0.0.0.0 --port 8000" --name "backend"

# 重启运行Nginx

sudo systemctl restart nginx

10.数据库扩展

Ubuntu 系统
更新软件包列表：
打开终端，执行以下命令，确保软件包列表是最新的：
sudo apt update

安装 MySQL 服务器：
执行命令安装 MySQL 软件包：
sudo apt install mysql-server

配置 MySQL（可选）：
安装完成后，可以使用 mysql_secure_installation 脚本进行一些安全配置，如设置 root 用户密码、删除匿名用户、禁止 root 远程登录等：
sudo mysql_secure_installation
按照提示输入密码并选择相应的操作即可。
验证安装：
通过以下命令检查 MySQL 服务是否正在运行：
sudo systemctl status mysql
如果服务状态显示为 active (running)，表示安装成功。可以使用 mysql 命令进入 MySQL 命令行客户端，验证能否正常登录和操作数据库：
sudo mysql -u root -p
输入密码后回车进入。