黑河市all1. 部署不是后端专属技能，前端也得会
前端圈子这两年特别有意思，以前聊部署，大家都觉得那是运维或者后端的事，前端把代码交出去就完事了。但现在你去面试，尤其是面中高级前端岗，几乎每个面试官都会问一句：你独立部署过项目吗？线上的域名、HTTPS、反向代理这块你熟不熟？甚至很多公司直接要求前端自己搞定测试环境和生产环境的发布。说白了，部署已经从加分项变成了前端的基础生存技能。
很多人第一次接触云服务器，第一反应是去注册一个域名，再买台服务器，然后就开始迷茫了。阿里云也好，腾讯云也好，控制台里密密麻麻的选项，安全组、防火墙、实例、镜像、公网IP，每个字都认识，放一起就完全不知道从哪下手。尤其是专为个人开发者和小型项目设计的轻量应用服务器，价格确实便宜，操作也确实比ECS简化了不少，但真到部署前端项目的时候，还是有一堆坑要踩。
这篇文章就是要把整个流程完整过一遍。从轻量应用服务器的付费和选型开始，到域名解析、前端项目打包、Nginx配置、HTTPS证书，再到用Docker跑前端容器的进阶玩法，全部给你捋清楚。我用的都是阿里云和腾讯云的轻量应用服务器实测过的方案，照着做基本能一次成功。如果你正好在准备前端面试，或者手头有个练习项目想挂到公网上去，这篇文章应该能帮你省不少时间。
先说清楚一个特别容易误导人的地方。很多人以为买了云服务器，把打包后的dist文件夹扔上去，然后装个Nginx就能访问了。理论上没错，但实际操作里你会遇到路径配置、history路由刷新404、跨域、HTTPS证书续期这一串问题。每一样都不难，但串在一起，第一次做的人很容易卡住好几个小时。
我们一步步来。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 轻量应用服务器的选型与付费说明
2.1 阿里云和腾讯云轻量应用服务器选哪个
先聊选型。国内做前端项目部署，主流的就两个选择：阿里云轻量应用服务器和腾讯云轻量应用服务器。两者在核心功能上没有本质区别，都是把计算、存储、网络打包成套餐，价格低、上手快。但细节上有差异，你需要结合自己的使用场景来选。
先说价格。轻量应用服务器的定价通常比同配置的ECS或CVM要便宜不少，尤其是新用户首购，折扣力度很大。阿里云的新用户2核2G三年的价格一般比原价低六成以上，腾讯云也差不多。但这里有个坑，很多低价套餐只针对新用户，而且续费价格会恢复原价，买之前一定要看清楚了。我见过不少朋友第一年花了一百来块买的服务器，第二年续费直接翻了三四倍，就是因为没注意这个规则。
再说配置选择。前端项目不像大数据处理那样吃CPU和内存，2核2G的配置对绝大多数前端项目来说完全够用。如果你的项目里有Node服务，比如Next.js、Nuxt服务端渲染，或者要跑Docker加数据库，推荐直接上2核4G，价格贵不了多少，但内存充裕一倍，遇到内存溢出问题的概率小很多。我自己测试了一下，一台2核2G的轻量服务器，同时跑Nginx、两个前端静态站点和一个Node API服务，内存占用大概在1.4G左右，再跑一个MySQL就有点勉强了。所以有数据库需求的话，内存大一点很重要。
地域的选择也很关键，这直接影响访问速度。面向国内用户，选离你用户群体近的区域，比如华东地区选上海或杭州，华南选广州或深圳。有一点特别要提醒，轻量应用服务器选了地域之后不能换，只能是退订重新买，所以选的时候想清楚。如果你要做跨境业务，那另说，但面向国内用户就别选香港或海外的节点，延迟和备案问题都会让你很头痛。
备案是另一个绕不开的话题。只要你的服务器在国内，域名解析到这台服务器上，并且网站提供网页服务，就需要ICP备案。备案本身不收费，但周期差不多要7到20天。我见过很多人头一天买服务器，第二天就想上线，结果卡在备案这一步干着急。这个流程必须在购买服务器之后尽早启动。如果只是自己测试，域名加端口访问也不行，只要服务器在国内，HTTP服务对外提供访问就得备案。不想备案的话，短时间玩耍可以用IP访问，但无法绑定域名，体验差很多。
2.2 付费模式的坑与续费避坑指南
付费方式这块，大多数轻量应用服务器都是按年或按月付费，没有按量计费的选择。个人开发者和学生党，建议直接按年买，算下来比按月买便宜不少，而且省心，不会因为忘记续费导致服务中断。我自己就是一年一买，到期前几天阿里云会发短信提醒，腾讯云也有类似机制。
但有几个坑一定要提前知道。第一，有些套餐标注的“限时优惠”只适用于首次购买，续费没有任何折扣。你可以在控制台的续费页面看到原价，如果觉得贵，可以考虑“先退订再以新用户身份重新购买”，但前提是你的数据已经备份迁移好，而且这个账号还有其他优惠可用。第二，轻量应用服务器有流量包的概念，阿里云是每月固定流量包，腾讯云同样。一般的基础套餐每月给几百G流量，前端项目纯静态页面走CDN的话，流量完全够用，但如果你在上面跑下载站或者被刷流量，超额部分会额外计费，这是账单爆炸的一个隐藏原因。
还有一个和付费直接相关的点：快照和备份的收费逻辑。阿里云轻量应用服务器会默认提供一定数量的免费快照额度，超过的部分要额外付费。腾讯云的政策也类似。我给你一个建议，每次大版本升级、改配置、换Nginx配置之前，花几分钟打个快照，几毛钱的成本，能避免你手滑导致整个环境崩掉之后花几小时重新搭建的尴尬。这个习惯真的非常重要，尤其是你在生产环境上做改动的时候。
3. 部署前的准备工作：域名、解析与环境初始化
3.1 域名购买与解析配置要点
域名这块，阿里云和腾讯云都提供域名注册服务，后缀不同价格差异很大。.com域名一般一年六七十块，.cn域名更便宜一些，其他小众后缀有的甚至几块钱一年。但别贪便宜，优先选.com或.cn，看起来正规，用户也容易记忆。买域名的时候顺便看一下实名认证的要求，国内注册域名是需要实名认证的，认证未通过前无法正常解析。
域名的解析配置，阿里云在域名控制台里找到解析设置，腾讯云在DNSPod里操作。需要添加两条A记录，一条把@解析到你的服务器公网IP，另一条把www也解析到同一个IP。有的教程还会让你加一条泛解析，也就是把*.你的域名.com也解析到服务器IP，这个不是必须的，除非你以后要在同一个服务器上通过二级域名部署多个项目，那建议加上，后面省事很多。
DNS解析生效时间通常从几分钟到几小时不等。你配置好了之后别干等，可以用命令行直接看结果。在本地终端里执行ping 你的域名，如果返回的IP是你服务器的公网IP，说明解析已经生效了。如果长时间不生效，检查一下是不是域名实名认证没通过，或者解析记录的类型写错了。
这里顺便提一个前端面试题里喜欢问的点：从输入一个域名到浏览器显示页面，中间经历了哪些步骤？DNS解析就是第一环，然后才是TCP连接、HTTP请求、服务器处理、返回响应、浏览器渲染。很多人回答说快了流程，但细节一问就卡壳。你既然自己在部署项目，正好把这个过程亲手走一遍，理解会深很多。面试的时候你也可以把这段实操经历拿出来讲，比背八股文有说服力多了。
3.2 服务器系统选择与基础环境初始化
选系统镜像的时候，阿里云和腾讯云的轻量应用服务器都提供多种选择：CentOS、Ubuntu、Debian、Windows Server，还有自带宝塔面板的镜像。这里我直接给你结论：部署前端项目，选Ubuntu 22.04或Debian 12，两者都可以。CentOS已经停止维护了，新项目就别再用它了。Windows Server不推荐，除非你有特定的.NET需求，否则纯前端项目在Linux上部署简单得多，而且Linux系统本身比Windows Server轻量不少，同样的配置能跑更多东西。
有的朋友喜欢选带宝塔面板的镜像，觉得图形化界面操作方便。我的建议是，如果你是纯前端，对Linux命令不太熟，宝塔确实能降低门槛，文件管理、Nginx配置、数据库管理都能在网页上搞定。但宝塔面板本身也是一个内存大户，2G内存的服务器装完宝塔，可用内存就剩一半左右了，而且面板偶尔会有安全漏洞，需要勤更新。我个人更推荐直接用命令行，用SSH连上服务器，一条一条命令敲，整个过程也就十分钟，你对服务器的理解会上一个台阶。后期排错能力完全不一样。
SSH连接工具我用的是VS Code的Remote-SSH插件，直接在编辑器里打开服务器的文件目录，改代码、改配置都很方便。如果你用不惯，Windows自带的PowerShell也可以直接ssh root@公网IP连接，然后输入密码登录。第一次连接会让你确认指纹，输入yes就行。这里有一个安全建议：登录之后的第一个动作是改root密码，有条件的话再创建日常使用的用户，不要直接拿root跑日常操作。安全组或者防火墙里，尽量只放行22（SSH）、80（HTTP）、443（HTTPS）这几个端口，其他端口按需开放。
基础环境这里，先更新一下系统软件源，然后安装Nginx和Git。命令很简单，Ubuntu系统执行apt update && apt upgrade -y，然后apt install nginx git -y。装完之后，Nginx就已经自动帮你把服务启动起来了，你可以在浏览器里直接输入公网IP，如果看到一个Nginx欢迎页，说明Web服务器已经正常工作了。到这一步，云服务器最基础的链路已经通了。
4. 前端项目部署实操：从打包到Nginx配置
4.1 本地打包与产物上传
前端项目部署的第一步，是在本地把项目打包成一份静态资源文件。以Vite项目为例，执行npm run build之后，会在项目根目录下生成一个dist文件夹，这就是你要上传到服务器的全部内容。这一步我踩过一个坑，打包之前要确认接口请求的地址，如果你代码里写的API地址是http://localhost:8080这样，上线之后所有接口请求都会打到你本机，网站页面能打开但数据全是空的。打包之前全局搜索一下localhost，看有没有漏网之鱼。
还有一些项目用了环境变量，比如.env.production文件，打包的时候会自动加载。这个文件的命名要跟Vite的默认行为匹配：npm run build对应的是.env.production。如果你不确定加载的是哪个文件，在package.json的脚本里看一下，Vite项目一般是"build": "vite build"，默认走production模式。在项目代码里执行console.log(import.meta.env)，打包时看一眼控制台输出，就一目了然了。
文件上传有几种方式。最基础的用SFTP工具，比如FileZilla或者WinSCP，界面拖拽上传，对新手友好。我自己的习惯是用scp命令直接在终端里传，一条命令就搞定：
bash复制scp -r /path/to/your/dist root@你的公网IP:/var/www/my-project/
这个命令把本地dist目录完整复制到服务器的/var/www/my-project/目录下。第一次用的时候我发现一个细节，scp -r会把dist目录本身也复制过去，结果服务器上的路径变成了/var/www/my-project/dist，Nginx配置里root指向的位置就要注意对应上。实际上我更推荐先在服务器上建好目录，然后上传dist目录里的内容，这样路径更干净一点。
上传完之后建议在服务器上检查一下文件是否完整。SSH登录服务器，ls /var/www/my-project/看一眼，确认index.html和静态资源都在。别笑，人一多事情一多，文件传漏了是最常见的问题。
4.2 Nginx配置详解与history路由防404
Nginx配置是前端部署里的重头戏，也是面试官最喜欢深入问的技术点。先看一个最基础也最典型的配置，新装完Nginx之后，配置文件在/etc/nginx/sites-available/目录下，默认有一个叫default的文件。我们为项目新建一个专属配置：
nginx复制server {
listen 80;
server_name www.your-domain.com your-domain.com;
root /var/www/my-project;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
这个配置最核心的是try_files $uri $uri/ /index.html;这一行。它的作用是：当用户访问一个路径时，先去$uri对应的文件，找不到就去$uri/对应的目录下的index.html，再找不到就直接返回/index.html。这行配置就是为了处理前端history路由模式的刷新404问题。如果你用的是Vue Router或者React Router的BrowserRouter，点击页面内跳转没问题，但直接访问或刷新一个子路由路径，比如/about，服务器会真的去找这个路径对应的文件和目录，找不到就返回404。加上try_files之后，所有不存在的路径都会被重定向到首页，然后由前端路由接管，渲染出对应的页面。
如果你的项目用的是hash路由，地址栏里有#号那种，不存在这个问题，因为#后面的内容不会发送到服务器。但为了用户体验和好看，大部分正式项目都会用history模式，所以try_files基本是必备配置。
配置写完之后，先执行nginx -t检查语法，看到test is successful再重载服务。重载命令是systemctl reload nginx，这样不会中断现有的连接，平滑把新配置应用上去。这里有个新手容易犯的错误是改了配置直接重启，systemctl restart nginx会短暂断开所有连接，频繁重启在生产环境不友好，养成用reload的习惯。
接下来是域名绑定。如果你的服务器上有多个前端项目，每个项目用不同的域名或二级域名区分，只需要在sites-available目录下新建多个配置文件，每个文件里设置不同的server_name和root即可。一个域名对应一个server块，互不干扰。我之前在一台2核4G的轻量服务器上同时部署了三个前端项目，用的就是这种方式，配置清晰，后面维护也好找。
4.3 配置HTTPS：SSL证书申请与自动续期
没有HTTPS的网站，浏览器地址栏会显示“不安全”，很多高级浏览器特性也用不了。这年头，HTTP已经越来越难以接受了。HTTPS的配置核心是SSL证书，阿里云和腾讯云都有免费证书可供申请。
阿里云在数字证书管理服务里申请免费证书，腾讯云在SSL证书控制台也有类似入口。申请时需要绑定你的域名，然后把证书下载下来。这里要注意的是，下载的时候选择Nginx格式，下载到的压缩包里有xxx.pem和xxx.key两个文件，分别是证书文件和私钥文件。
把这两个文件上传到服务器上，一般放在/etc/nginx/cert/目录下，然后在Nginx配置里加上443端口的监听。一个较完整的HTTPS配置大概长这样：
nginx复制server {
listen 80;
server_name www.your-domain.com your-domain.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name www.your-domain.com your-domain.com;
ssl_certificate /etc/nginx/cert/your-domain.pem;
ssl_certificate_key /etc/nginx/cert/your-domain.key;
root /var/www/my-project;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
第一个server块负责把HTTP流量301重定向到HTTPS，这样用户不管你输入不带协议的域名还是http开头的地址，都会自动跳到安全的HTTPS链接。第二个server块是正式的HTTPS站点配置。
申请证书的时候有个小坑，阿里云的免费证书有效期只有3个月，有效期到了之前要手动续期并重新部署。腾讯云的免费证书有效期通常是一年。如果你用的是阿里云的，建议直接在阿里云控制台开启自动续期功能，到期前自动申请新证书。但还是需要手动去下载新证书并替换服务器上的文件，因为免费证书没有自动部署到轻量应用服务器的选项。这不是什么大工程，我每次到期前收到短信提醒，花五分钟搞定，但前提是你记得。建议在手机日历里设一个提前一周的提醒，比依赖短信靠谱多了。
测试HTTPS是否配置成功，别光看浏览器地址栏的小锁。更靠谱的方法是直接用命令行检查：
bash复制curl -I https://你的域名
如果返回了HTTP/2 200，说明HTTPS已经正常工作了。再执行curl -I http://你的域名，应该看到301重定向。这两个都正常，证书这块就算完成了。
5. 进阶玩法：用Docker部署前端镜像
5.1 为什么要用Docker跑前端
如果你的部署场景只是一个小项目，挂在一台服务器上给朋友看看，Nginx方案已经足够用了。但随着你部署的项目变多，或者你开始用GitHub Actions做自动化发布，Docker化是一个绕不开的方向。Docker的核心价值在于环境一致性。本地跑得好好的，服务器上一跑就各种问题，根源往往是环境不一致。Docker把应用和环境打包成一个独立容器，镜像在哪都是一样的行为和效果。
还有一个很实际的使用场景是多人协作。你和同事各自拉取同一个镜像，本地跑出来的结果和线上完全一致，不会出现“我本地是好的啊”这种经典甩锅话术。你在前端面试的时候，聊到部署经验，如果能说出Dockerfile怎么写、镜像怎么构建、容器怎么跑，面试官通常会认为你有生产级部署意识，这东西在很多公司的实际开发流程里就是标配。
5.2 编写Dockerfile并构建运行前端容器
一个前端项目的Dockerfile非常简单，常见的做法是两阶段构建：第一阶段用Node镜像打包静态资源，第二阶段把产物放到Nginx镜像里。下面是一个标准的多阶段构建示例，以Vite项目为例：
dockerfile复制# 构建阶段
FROM node:18-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# 运行阶段
FROM nginx:stable-alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
这个Dockerfile的大致流程是：先拉取带有Node 18环境的镜像，在容器里安装依赖并打包，生成dist目录；然后在新的Nginx镜像里，把dist目录替换Nginx的默认网页目录，同时把自定义的Nginx配置放进去；最后启动Nginx服务。由于前端项目是纯静态页面，最终运行阶段根本不需要Node环境，这也是为什么多阶段构建特别适合前端项目，镜像我测试下来只有20多MB，非常轻盈。
这里的nginx.conf就是前面配置的server块内容，注意在Docker容器里，Nginx的默认站点配置文件路径是/etc/nginx/conf.d/default.conf，和直接装在服务器上的路径略有差异。
在服务器上执行构建命令：
bash复制docker build -t my-frontend-app:v1 .
构建完成后，启动容器：
bash复制docker run -d -p 8080:80 --name my-frontend-app my-frontend-app:v1
这条命令把容器的80端口映射到宿主机的8080端口，也就是说你访问服务器的8080端口，就能看到这个前端项目了。如果同一台服务器上已经有Nginx在监听80端口，用8080作为映射端口可以避免冲突。你甚至可以用一台服务器跑多个不同端口的前端项目容器，互不干扰。
如果你已经用了Docker Compose，还可以把多容器应用一次性编排起来，前端加Nginx加后端加数据库一次启动，但这属于后端部署的内容了，前端项目单容器用Docker命令完全够用。
5.3 Docker常用运维命令速查
Docker部署完也只是一个开始，后面的日常运维才是重点。我整理了一份常用的Docker命令清单，刚上手的朋友可以先存一下：
bash复制# 查看运行中的容器
docker ps
# 进入容器内部，方便排查问题
docker exec -it 容器ID /bin/sh
# 查看容器日志
docker logs -f 容器ID
# 重启容器
docker restart 容器ID
# 删除容器（先停止再删）
docker stop 容器ID && docker rm 容器ID
# 删除无用镜像，释放磁盘空间
docker image prune
关于容器内的日志排查，有一个我自己印象很深的案例。有次网站突然白屏，页面根目录的JS文件报404。我本地重新打包、上传，问题还在。最后进到容器里看了一眼，发现/usr/share/nginx/html下面的文件根本不完整，只有一个残缺的index.html。原因是我传的Dockerfile里，npm run build那一步在某台机器上构建失败，但多阶段构建的第一步失败后，Docker没有报错退出，而是走了缓存的旧镜像。后来我养成了一个习惯：每次构建前先执行docker build --no-cache强制重新构建，确保拿到的镜像是最新的。这个坑非常隐蔽，现在写出来提醒大家。
6. 常见问题与排查技巧实录
6.1 部署后常见的“白屏”与“404”问题
前端项目部署完成后最常见的问题就是白屏。页面能打开，但整个页面是空的，控制台报各种资源404错误。这个问题我在新手期几乎每个项目都遇到过一次，导致的原因主要有这么几类。
第一类是打包配置里的base路径问题。Vite默认的base是/，如果你的项目部署在域名根路径下，没问题。但如果部署在子路径下，比如http://你的域名/my-app/，那打包时必须设置base: '/my-app/'，否则所有JS和CSS资源的路径都会指向根路径，结果404。React项目的Vite配置也同理。解决方法是，不过“根路径部署”就保持默认，要部署到子路径就改base，然后再重新打包上传。
第二类是部署前API地址指错了。你本地开发的时候用http://localhost:8080/api，打包之后忘了改，上线之后页面框架加载出来了，但所有请求都失败，数据区域空白。这个问题首先要有一个好习惯，把API地址写成环境变量，按环境区分。然后在部署前全局搜索一下localhost，能省很多事。
第三类是Nginx配置里try_files少了。这个前面讲过了，不能少，否则刷新子路由直接404。页面白屏其实也是404的一种，只是它404的是某个JS文件，不仔细看还以为是页面渲染出了问题。
6.2 端口打不开与安全组配置
部署之后浏览器访问不了，最常见的两个原因：一是Nginx没有启动，二是防火墙或安全组没放行端口。国内云服务器一般有双重防护，一个是云平台控制台里的安全组或防火墙规则，另一个是系统自带的防火墙（ufw或firewalld）。
阿里云轻量应用服务器在控制台里叫防火墙，腾讯云叫防火墙。你需要确认80端口和443端口放行。阿里云轻量服务器默认只放行80、443和22，如果你要额外访问8080之类的高位端口，需要在防火墙规则里手动添加。腾讯云也类似。很多新人从ECS转到轻量服务器时就容易在这个地方被卡住，明明Nginx启动了，就是访问不了，最后发现是控制台里的防火墙没放行。
系统防火墙方面，Ubuntu默认装了ufw，但没有启用，所以一般不用管。如果你执行过ufw enable，那一定要执行ufw allow 80和ufw allow 443，否则即使Nginx正常监听80端口，外网也访问不了。
端口监听状态的检查命令是：
bash复制netstat -tlnp | grep 80
或者用新一些的ss命令：
bash复制ss -tlnp | grep nginx
如果看到Nginx在监听80端口，但浏览器还是打不开，那就去检查云控制台防火墙和安全组，这是最典型的排查路径。
6.3 域名解析生效但访问不了
还有一类问题是DNS解析明明已经配好了，但浏览器就是访问不了。这种情况下，先确认你本地的DNS缓存是不是有问题。打开命令行，执行nslookup 你的域名，看返回的IP是不是你的服务器公网IP。如果用公共DNS（223.5.5.5或119.29.29.29）查询到的结果是正确的，但浏览器打不开，那多半是你本机或路由器DNS缓存了旧记录。清空本地DNS缓存，Windows是ipconfig /flushdns，macOS是sudo dscacheutil -flushcache，通常就能解决。
如果你用了CDN，还要额外检查一下CDN配置是否正常。有些朋友给域名加了CDN加速，但源站配置错了，回源失败，结果整个域名打不开。这种情况直接先临时把解析切回直连IP，排查CDN配置是否无误。
6.4 性能体检与简单优化
部署完成、能正常访问之后，建议再做一次简单的性能体检。Chrome DevTools的Lighthouse跑一遍，看看Performance和Best Practices的分数。前端项目部署对性能的影响主要看三点：有没有开Gzip压缩、有没有配置缓存策略、静态资源有没有走CDN。
Nginx把Gzip打开是很简单但收益很大的优化手段。在配置里加上这几行：
nginx复制gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;
开启之后，JS和CSS文件体积普遍能减少60%到75%。我实测过一个Vue项目，打包后一个2.4MB的JS文件，开启Gzip后传输体积只有600多KB，首屏加载速度肉眼可见地变快。
缓存策略方面，给指纹命名的静态资源（文件名里带hash那种）设置cache-control: max-age=31536000，这个是合理的，因为文件内容变了文件名也会变，不存在过期问题。而index.html这种入口文件，建议设置no-cache，保证每次访问都能拿到最新版本。Nginx的location配置大概长这样：
nginx复制location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
这个优化不加的话，功能上没毛病，但用户量上来之后，每次刷新页面都全量加载资源，服务器带宽压力会越来越大。如果你的服务器在轻量套餐里，带宽一般不大，这块优化越早做越好。
7. 从部署到自动化：前端发布CI/CD
再往后走一步，手动上传打包文件的做法在个人项目里可以接受，但如果团队协作或者项目更新频率高，手动部署的效率就太低了。前端项目的自动化部署通常用GitHub Actions、GitLab CI或者云平台自带的流水线服务。
以GitHub Actions为例，思路是：每次往main分支推送代码时，自动触发布流程。在服务器上提前安装好Docker，准备一个docker-compose文件，Actions里使用SSH连接服务器，拉取最新代码，重新构建镜像并启动容器。整个流程两三分钟自动完成，完全不需要人工登录服务器。
我给出一个简单的GitHub Actions配置示例，前端项目推送后自动部署到轻量服务器：
yaml复制name: Deploy Frontend
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Deploy to server
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script: |
cd /opt/my-frontend
git pull origin main
docker compose build
docker compose up -d
这一步的另一半在服务器端，要提前把/opt/my-frontend目录初始化为一个Git仓库，并且配置好SSH Key让GitHub Actions能够免密登录。在GitHub仓库的Settings -> Secrets and variables -> Actions里添加几个密钥变量，把服务器IP、用户名、SSH私钥都配置好，流水线跑起来之后，以后发布前端项目就是push代码这么简单。
这个自动化流程做完以后，你再去面试前端岗位，就可以理直气壮地说自己有完整的部署经验，懂得Nginx配置、HTTPS证书、Docker镜像。这不只是简历上一句话，而是你亲手把项目从零到一推上线，踩过所有坑之后的真实经验总结。
我实际做下来，最深的体会是：前端部署并没有想象中那么难，但也没有教程里说的那么简单。难的是那些教程不会告诉你细节，比如阿里云的免费证书三个月要续一次、轻量服务器的流量包用完了要花钱、try_files少写一行刷新页面就404、localhost请求地址没改所有人打开都是白屏。这些坑每个人都会踩一遍，踩完之后你就真的会了。希望这篇文章能让你少踩几个坑，直接一把过去。