项目写完后,怎么部署并上线?新手也能看懂
很多人项目能在本地跑起来,但一到“上线”就懵了:代码传到哪里?命令在哪输入?Nginx 到底改哪里?哪些配置在服务器改,哪些在项目里改?
这篇就讲一套最常见、也最适合新手入门的方式:
云服务器 + Linux + Nginx + 前后端分离项目
这套方案不花哨,但很常见,很多公司都会接触到。先把这个学会,再学 Docker、K8s 会轻松很多。
一、上线到底是在做什么
简单说,就是把你本地的项目,放到一台公网服务器上,让别人通过IP或域名访问。
一般会分成这几步:
买一台云服务器
连接到服务器
安装项目运行环境
把前端和后端代码上传到服务器
启动后端服务
用 Nginx 配置前端访问和接口转发
绑定域名、放行端口
二、安装基础环境是为什么
因为服务器刚买来时,通常只有一个基础系统,不能直接跑你的项目。
你需要按项目类型安装对应环境:
前端页面要能被 Nginx 提供访问
Java 项目要安装 JDK
Node 项目要安装 Node.js
Python 项目要安装 Python
如果项目要连数据库,还要准备 MySQL 或其他数据库
你可以把它理解成:本地电脑能跑,是因为你电脑已经有这些环境;服务器也一样,必须先装好。
三、这些命令到底在哪输入
这是新手最容易混的地方。
1. 本地电脑里输入的命令
比如这些:
npm run build
这是在你自己的电脑里输入,用来把前端项目打包。
2. 服务器里输入的命令
比如这些:
sudo apt install nginx -y nohup java -jar app.jar &
这是先通过 SSH 连上服务器后,再在服务器终端里输入。
也就是说:
本地终端:负责打包、上传文件
服务器终端:负责安装环境、启动项目、改 Nginx
四、前端和后端代码怎么放到服务器上
这是上线里最实际的一步。
1. 先在本地准备好文件
前端
先在本地项目目录执行:
npm run build
执行后一般会生成一个dist文件夹,这就是要上传到服务器的前端文件。
后端
按你的项目类型准备:
Java:打成
jarNode.js:准备项目源码和
package.jsonPython:准备源码和
requirements.txt
2. 再把文件上传到服务器
你可以用两种常见方式。
方式一:用工具上传
适合新手:
FinalShell
Xshell + Xftp
MobaXterm
连接服务器后,直接把文件拖到服务器目录里,比如:
/home/project
方式二:用命令上传
如果你会命令行,也可以本地执行:
scp -r dist root@服务器IP:/home/project/frontend scp -r backend root@服务器IP:/home/project/backend
意思是:
把本地
dist上传到服务器/home/project/frontend把后端代码上传到服务器
/home/project/backend
五、服务器上一般放成什么结构
推荐这样放:
/home/project /frontend /backend
frontend:放前端打包后的静态文件backend:放后端代码或运行包
这样目录清楚,后面配置 Nginx 也方便。
六、Nginx 在哪里配置,后端配置又改哪里
这个也很重要,很多人会混。
1. Nginx 配置
Nginx 是服务器软件,所以它的配置文件改的是服务器里的文件,不是在你的前端项目里改。
常见位置:
/etc/nginx/nginx.conf
或者:
/etc/nginx/sites-available/default
也就是说,Nginx 配置是在服务器上改。
2. 后端项目配置
后端端口、数据库地址、账号密码这类配置,一般在你后端项目自己的配置文件里改,比如:
Java:
application.yml或application.propertiesNode.js:
.envPython:项目配置文件或环境变量
也就是说:
域名访问、接口转发:改 Nginx
端口、数据库、业务配置:改后端项目配置
七、最常见的一套实际部署流程
1. 买 Linux 服务器
新手建议直接买云服务器,系统选:
Ubuntu 22.04
2. 连接服务器
本地终端输入:
ssh root@你的服务器IP
连上以后,你后面输入的 Linux 命令,都是在服务器里执行。
3. 安装基础环境
服务器里输入:
sudo apt update sudo apt install nginx -y
如果后端是 Java:
sudo apt install openjdk-17-jdk -y
如果后端是 Node.js:
sudo apt install nodejs npm -y
4. 上传前端和后端代码
把文件传到:
/home/project/frontend /home/project/backend
5. 启动后端
如果是 Java:
cd /home/project/backend nohup java -jar app.jar > app.log 2>&1 &
如果是 Node.js:
cd /home/project/backend npm install nohup npm run start > app.log 2>&1 &
假设后端跑在8080端口。
6. 配置 Nginx
在服务器里编辑 Nginx 配置文件:
sudo vim /etc/nginx/sites-available/default
示例:
server { listen 80; server_name 你的域名或服务器IP; location / { root /home/project/frontend; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }它的作用是:
打开网站时,先访问前端页面
当前端请求
/api时,Nginx 再转发给后端
改完后执行:
sudo nginx -t sudo systemctl restart nginx
7. 放行端口
你至少要放行:
22:远程连接服务器80:HTTP 访问网站443:HTTPS 访问网站
如果云服务器安全组没开,项目即使已经启动,外网也访问不到。
八、公司里真的只会用这种简单方式吗
小公司、内部系统、测试环境,或者简单业务项目,确实经常会用这种方式。
因为它的优点很明显:
成本低
部署快
容易排查问题
新手容易上手
但公司不一定永远只用这一种。
等你把这套学熟后,可以继续学习这些更常见的进阶方式:
Docker:把环境和项目一起打包,减少“我电脑能跑,服务器不能跑”
Docker Compose:同时管理前端、后端、数据库、Redis
Jenkins / GitLab CI:自动化部署
Kubernetes(K8s):适合更复杂、更大规模的服务管理
CDN + 对象存储:专门托管前端静态资源
九、新手最该先学会什么
不要一开始就扑进 Docker 和 K8s。
先把下面这件事独立做通:
本地打包 -> 上传服务器 -> 启动后端 -> 配置 Nginx -> 外网访问成功
只要这条链路你走通一次,你就已经真正理解“项目上线”了。
十、总结
对于新手来说,最适合先学会的部署方式就是:
Linux 服务器 + 上传项目文件 + 启动后端 + Nginx 反向代理
它不是最高级的方案,但它足够常见,也足够实用。先把这套学会,再去学 Docker、自动化部署、K8s,思路会清楚很多。
