小白全栈项目部署指南

引言

什么是全栈项目部署？

全栈项目通常包含前端（用户界面）、后端（业务逻辑）、数据库（数据存储）三部分。部署就是将你开发好的项目放到一台公网服务器上，让任何人都能通过互联网访问。对于小白来说，这可能听起来很复杂，但通过本指南，你将一步步学会如何将你的全栈项目从本地电脑搬到云端。

为什么需要了解部署？

• 作品展示：将你的个人项目部署上线，作为简历亮点。

• 实际应用：让用户真正使用你的产品。

• 学习运维基础：了解服务器、网络、安全等知识，提升综合能力。

本指南以Linux服务器（Ubuntu 20.04/22.04 LTS）为例，技术栈涵盖：前端（React/Vue）、后端（Node.js/Express）、数据库（MySQL/MongoDB）。无论你使用何种具体技术，核心思路相通。

准备工作

1. 购买一台云服务器

推荐选择主流云服务商：阿里云、腾讯云、华为云、AWS、DigitalOcean等。对于初学者，建议选择轻量应用服务器或按量付费的云服务器，配置如下：

• CPU：1核

• 内存：2GB（如果项目较小，1GB也可）

• 系统盘：40GB SSD

• 操作系统：Ubuntu 20.04/22.04 LTS

• 带宽：按流量计费或固定带宽（1Mbps够用，但下载慢；建议按流量，速度快）

购买后，你会获得一个公网IP地址、root密码（或密钥）。

2. 注册域名（可选但推荐）

如果你希望用户通过www.example.com访问，需要购买域名（如阿里云万网、GoDaddy）。如果只是测试，直接用IP访问即可。

3. 本地环境准备

• SSH客户端：Windows可使用PowerShell、CMD、Xshell、Putty；Mac/Linux直接用终端。

• 文件传输工具：WinSCP（Windows）、scp命令、或使用Git（后面会介绍）。

• 代码版本控制：建议将项目托管在GitHub/Gitee，方便在服务器上拉取。

4. 思维准备

• 遇到错误不要慌，99%的问题可以通过搜索引擎解决。

• 每一步操作前理解其目的，而不是复制粘贴。

服务器基础配置

1. 连接到服务器

使用SSH登录（以root用户为例）：

bash

ssh root@你的服务器公网IP

输入密码（购买时设置的），如果使用密钥，则指定私钥文件：

bash

ssh -i ~/.ssh/your-key.pem root@你的IP

第一次连接会提示确认主机指纹，输入yes回车。

2. 更新系统软件包

bash

apt update && apt upgrade -y

apt update 更新软件源列表，apt upgrade 升级所有已安装软件包。

3. 创建新用户（安全起见，避免一直用root）

bash

adduser deploy

按提示设置密码，其他信息可跳过。然后将新用户加入sudo组：

bash

usermod -aG sudo deploy

之后切换到新用户：

bash

su – deploy

后续操作都建议在普通用户下进行，需要root权限时使用sudo。

4. 配置SSH密钥登录（可选，更安全）

在本地生成密钥对（如果已有则跳过）：

bash

ssh-keygen -t rsa -b 4096

将公钥复制到服务器：

bash

ssh-copy-id deploy@你的IP

之后就可以免密登录，并可以禁用root密码登录（编辑/etc/ssh/sshd_config，设置PermitRootLogin no和PasswordAuthentication no，然后sudo systemctl restart sshd）。注意先测试新用户能登录成功再禁用root。

5. 配置防火墙（UFW）

Ubuntu默认使用UFW管理防火墙。

bash

sudo ufw allow OpenSSH # 开放SSH端口（22）
sudo ufw allow 80 # HTTP
sudo ufw allow 443 # HTTPS
sudo ufw enable # 启用防火墙
sudo ufw status # 查看状态

如果后续需要其他端口（如后端服务端口3000），也要开放。但更安全的方式是只开放80和443，后端服务通过Nginx反向代理。

6. 设置时区与同步时间

bash

sudo timedatectl set-timezone Asia/Shanghai # 设置为上海时间
sudo apt install ntpdate -y
sudo ntpdate ntp.aliyun.com # 同步时间

安装运行环境

根据你的项目技术栈，安装相应的环境。这里以Node.js + MySQL为例，同时给出Python/Java/MongoDB的参考。

1. 安装Node.js（后端）

推荐使用NVM（Node Version Manager）安装，便于切换版本。

bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

重启终端或执行source ~/.bashrc，然后安装你需要的Node版本（例如18.x）：

bash

nvm install 18
nvm alias default 18 # 设置默认版本

验证安装：

bash

node -v
npm -v

2. 安装包管理工具（可选）

安装yarn或pnpm（根据项目）：

bash

npm install -g yarn

3. 安装数据库

安装MySQL（关系型数据库）

bash

sudo apt install mysql-server -y

安装后运行安全脚本：

bash

sudo mysql_secure_installation

按提示设置root密码，移除匿名用户，禁止远程root登录等。之后登录MySQL创建项目数据库和用户：

bash

sudo mysql -u root -p

在MySQL命令行中执行：

sql

CREATE DATABASE yourdb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'youruser'@'localhost' IDENTIFIED BY 'yourpassword';
GRANT ALL PRIVILEGES ON yourdb.* TO 'youruser'@'localhost';
FLUSH PRIVILEGES;
EXIT;

安装MongoDB（非关系型数据库）

bash

# 导入MongoDB公钥
wget -qO – https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add –
# 创建源列表
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update
sudo apt install -y mongodb-org

启动MongoDB：

bash

sudo systemctl start mongod
sudo systemctl enable mongod # 开机自启

默认无密码，建议创建管理员用户（详见官方文档）。

安装PostgreSQL

bash

sudo apt install postgresql postgresql-contrib -y
sudo systemctl start postgresql
sudo systemctl enable postgresql
sudo -u postgres createuser –interactive # 创建用户
sudo -u postgres createdb yourdb # 创建数据库

4. 安装Nginx（Web服务器/反向代理）

bash

sudo apt install nginx -y

启动Nginx并设置开机自启：

bash

sudo systemctl start nginx
sudo systemctl enable nginx

此时访问服务器IP，应看到Nginx欢迎页。

5. 安装PM2（进程管理，用于Node.js）

bash

npm install -g pm2

PM2可以保持Node应用持续运行，自动重启，管理日志等。

6. 其他工具

• Git：拉取代码

  bash

  sudo apt install git -y

• Build工具（如果有些npm包需要编译）

  bash

  sudo apt install build-essential -y

• Python环境（如果需要）

  bash

  sudo apt install python3 python3-pip -y

项目打包与上传

1. 本地项目准备

确保项目可以正常运行，并整理好环境变量（不要将敏感信息提交到代码仓库）。

前端打包

以React（Vite/CRA）或Vue为例，运行打包命令：

bash

npm run build

生成一个dist或build文件夹，里面是静态文件（HTML、CSS、JS）。

后端准备

确保有package.json，入口文件（如app.js或server.js），并考虑环境变量配置（使用dotenv等）。

2. 上传代码到服务器

有多种方式：

方式一：使用SCP（适合小项目）

在本地终端（或使用WinSCP图形界面）：

bash

# 上传整个项目（假设项目在本地~/myproject）
scp -r ~/myproject deploy@你的IP:/home/deploy/

方式二：使用Git（推荐）

在服务器上：

bash

cd /home/deploy
git clone https://github.com/你的用户名/你的仓库.git

如果仓库私有，需要配置SSH密钥或使用personal access token。

方式三：使用rsync（增量传输）

bash

rsync -avz –progress ~/myproject deploy@你的IP:/home/deploy/

上传后，进入项目目录：

bash

cd /home/deploy/你的项目

3. 安装项目依赖

后端依赖

bash

npm install –production # 或者直接 npm install，–production 避免安装开发依赖

如果有环境变量文件（.env），需要创建并填写真实值：

bash

vim .env
# 填入数据库连接等敏感信息

前端依赖（如果前端需要构建，一般在本地构建好上传；或者在服务器上构建，但需要安装Node）

如果前端项目也在服务器上构建（例如SSR项目），也需要安装依赖并构建。

后端部署

1. 测试运行后端

在项目目录下，尝试直接启动：

bash

node app.js

如果没有错误，说明环境配置正确。按Ctrl+C停止。

2. 使用PM2启动后端

bash

pm2 start app.js –name my-backend

参数说明：

• app.js 是入口文件，根据实际情况调整。

• –name 指定进程名称，便于管理。

其他常用PM2命令：

• pm2 list：查看所有进程

• pm2 logs my-backend：查看日志

• pm2 restart my-backend：重启

• pm2 stop my-backend：停止

• pm2 delete my-backend：删除

• pm2 save：保存当前进程列表，以便开机重启

• pm2 startup：生成开机自启脚本（按提示执行）

3. 配置环境变量

PM2可以读取环境变量，可以在启动命令中指定，或使用 ecosystem 配置文件。

创建ecosystem.config.js：

javascript

module.exports = {
apps: [{
name: 'my-backend',
script: './app.js',
env: {
NODE_ENV: 'production',
PORT: 3000,
DB_HOST: 'localhost',
DB_USER: 'youruser',
DB_PASSWORD: 'yourpassword',
DB_NAME: 'yourdb'
}
}]
};

然后启动：

bash

pm2 start ecosystem.config.js

4. 验证后端是否运行

bash

curl http://localhost:3000 # 假设后端监听3000端口

应返回API响应或HTML。注意不要直接暴露3000端口给公网（防火墙已关闭），后面通过Nginx反向代理。

前端部署

前端部署取决于你的项目类型：静态单页应用（SPA） 或 服务端渲染（SSR）。

1. 静态前端部署

将打包后的dist文件夹配置到Nginx。

配置Nginx站点

在/etc/nginx/sites-available/下创建配置文件，例如myapp：

bash

sudo vim /etc/nginx/sites-available/myapp

内容如下：

nginx

server {
listen 80;
server_name 你的域名或IP;

root /home/deploy/你的前端项目/dist; # 静态文件路径
index index.html;

location / {
try_files $uri $uri/ /index.html; # SPA路由支持
}

# 反向代理API请求到后端
location /api/ {
proxy_pass http://localhost:3000/; # 后端地址
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
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;
}
}

注意：

• root路径要正确。

• try_files确保单页应用路由刷新时返回index.html。

• location /api/将API请求转发到后端（根据你的实际API前缀调整）。

启用站点：创建软链接到sites-enabled：

bash

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

测试配置是否正确：

bash

sudo nginx -t

如果显示ok，重新加载Nginx：

bash

sudo systemctl reload nginx

2. SSR前端部署（如Next.js、Nuxt.js）

这类项目需要在服务器上运行一个Node服务，处理页面渲染。部署方式类似后端，使用PM2启动。

假设Next.js项目：

bash

npm run build # 构建生产版本
pm2 start npm –name "my-next" — start

然后在Nginx中配置反向代理到该服务端口（如3000），同时处理静态资源。具体配置需查阅框架文档。

3. 多站点部署

如果你想在一个服务器上部署多个项目，可以创建多个Nginx配置文件，监听不同域名或不同端口。

域名与HTTPS

1. 域名解析

在域名管理后台，添加A记录，将域名指向你的服务器IP。例如：

• 主机记录：@ 表示根域名

• 记录值：服务器IP
  等待DNS生效（通常几分钟到几小时）。

2. 修改Nginx配置中的server_name

将server_name改为你的域名，例如server_name example.com www.example.com;，然后重新加载Nginx。

3. 配置HTTPS（使用Let's Encrypt免费SSL）

推荐使用Certbot工具自动获取和续期证书。

安装Certbot和Nginx插件：

bash

sudo apt install certbot python3-certbot-nginx -y

运行Certbot，它会自动修改Nginx配置启用HTTPS：

bash

sudo certbot –nginx -d example.com -d www.example.com

按提示输入邮箱，同意条款，选择是否将HTTP重定向到HTTPS（建议选是）。
完成后，访问https://example.com应看到小锁标志。

Certbot会自动续期证书（通过定时任务），无需手动干预。

4. 验证HTTPS配置

使用在线SSL检测工具（如SSLLabs）检查评级，确保安全。

数据库迁移与初始化

1. 导入数据库结构

如果你的项目需要数据库表结构，可以使用迁移工具（如Sequelize、Prisma、TypeORM），或手动导入SQL文件。

使用SQL文件导入MySQL：

bash

mysql -u youruser -p yourdb < /path/to/dump.sql

使用ORM迁移命令（以Prisma为例）：

bash

npx prisma migrate deploy # 在生产环境运行迁移

2. 初始数据填充（可选）

执行种子脚本：

bash

node seed.js

3. 检查数据库连接

确保后端能正确连接数据库。可以通过日志查看：pm2 logs my-backend。

持续集成/持续部署简介

对于小白，手动部署已经足够。但如果你希望自动化，可以了解CI/CD工具，如GitHub Actions、GitLab CI、Jenkins等。基本原理：当代码推送到仓库时，自动触发服务器拉取最新代码、安装依赖、重启服务。

以GitHub Actions为例，在项目根目录创建.github/workflows/deploy.yml，定义部署步骤。需要配置SSH密钥到GitHub Secrets。这里不展开，感兴趣可自行查阅。

常见问题排查

1. 无法连接服务器

• 检查安全组/防火墙是否开放22端口。

• 确认IP正确，网络通顺。

2. 访问IP显示Nginx欢迎页，而不是我的项目

• 检查Nginx配置是否正确，站点是否启用（sites-enabled下是否有软链接）。

• 检查root路径是否正确，权限是否足够（Nginx用户www-data需有读取权限）。

3. API请求返回502 Bad Gateway

• 后端服务是否运行？pm2 list查看状态。

• 代理地址是否正确？后端端口是否监听？netstat -tlnp | grep 3000。

• Nginx错误日志：sudo tail -f /var/log/nginx/error.log。

4. 数据库连接错误

• 数据库是否启动？sudo systemctl status mysql。

• 用户名密码是否正确？权限是否授予？

• 检查后端环境变量。

5. 前端页面空白，控制台报404

• 静态文件路径错误，检查Nginx root路径。

• SPA路由问题，检查try_files配置。

6. 权限问题

• 确保Nginx用户（www-data）对静态文件有读权限：sudo chown -R www-data:www-data /path/to/dist 或 sudo chmod -R 755 /path/to/dist。

• 确保后端日志目录可写。

7. 防火墙导致无法访问

• 检查UFW状态，是否开放80/443端口。

• 云服务商的安全组策略是否开放相应端口。

8. 域名解析未生效

• 使用ping yourdomain.com或nslookup检查解析情况。

• 等待DNS传播，或尝试清除本地DNS缓存。

9. 证书申请失败

• 确保域名已解析到服务器，且Nginx配置正确（Certbot需要能访问到域名）。

• 查看Certbot日志：/var/log/letsencrypt/letsencrypt.log。

结语

恭喜你，经过以上步骤，你的全栈项目已经成功部署上线！现在你可以自豪地向朋友、面试官展示你的作品了。

部署是一个需要不断实践的过程，可能会遇到各种问题，但这也是学习的机会。建议你保持探索精神，尝试不同的技术组合，甚至学习Docker容器化部署，让部署更加简单可靠。

如果你在部署过程中遇到任何问题，欢迎在评论区留言（假设这是一个互动平台），我们一起解决。希望本指南对你有所帮助，祝你部署顺利！

附录：常用命令速查