前端项目部署实战：从 0 到 1 部署到阿里云服务器

🌐 前端项目部署实战：从 0 到 1 部署到阿里云服务器（新手保姆级指南）

适用环境：阿里云 ECS（CentOS 7/8 或 Ubuntu），Nginx，Vue/React 等前端项目
最终目标：将前端项目打包的dist文件上传到/home/demo-show/dist，并通过http://47.108.199.2:8081访问

📌 第一阶段：新手小白首次部署指南

1. 准备工作

你需要准备好：

• 服务器信息：IP 地址（如47.108.199.2），用户名（root），密码
• 本地项目：在本地电脑上已经运行过npm run build或yarn build，生成了一个dist文件夹
• 终端工具：Mac 使用自带的终端（Terminal），Windows 使用 PowerShell 或 CMD

2. 连接服务器

打开本地终端，输入以下命令登录服务器：

sshroot@47.108.199.2# 输入密码后回车（输入密码时屏幕不会显示字符，正常现象）

3. 创建项目目录（含 dist）

登录成功后，在服务器上一次性创建好完整的目录结构：

mkdir-p/home/demo-show/dist

-p参数表示如果父目录不存在则自动创建。

4. 上传项目文件（本地电脑执行）

关闭服务器连接（或新开一个终端窗口），在本地电脑上执行scp命令，将本地的dist内容直接上传到服务器的/home/demo-show/dist/目录：

exit# 注意替换 [你的本地路径]scp-r/Users/clove/Desktop/你的项目路径/dist/* root@47.108.199.2:/home/demo-show/dist/

✅优化点：一开始就创建好dist目录，直接上传到目标位置，无需后续整理文件。

5. 配置 Nginx

我们需要告诉 Nginx 网站文件在哪里，并分配一个端口（这里用你指定的8081）。

vim/etc/nginx/conf.d/demo-show.conf

按i键进入编辑模式，粘贴以下内容：

server { listen 8081; server_name 47.108.199.2; location / { root /home/demo-show/dist; index index.html index.htm; try_files $uri $uri/ /index.html; # 解决前端路由刷新404问题 } }

按Esc键，输入:wq并回车保存退出。

6. 检查配置并生效

# 测试 Nginx 配置是否有语法错误nginx-t# 若无报错，平滑重启 Nginxnginx-sreload

7. 开放安全组端口（最容易踩坑的地方）

服务器内部配置好了，但云服务器默认会拦截外部请求。这一步至关重要！

请登录阿里云控制台 → 云服务器 ECS → 安全组 → 配置规则 → 入方向，添加一条规则：

保存后，在浏览器打开http://47.108.199.2:8081，你的网站就上线啦！🎉

🔄 第二阶段：第二次（及以后）更新部署指南

日常开发中，你不可能只部署一次，本地代码改动了，如何快速更新线上呢？只需要记住以下几步，无需再次修改 Nginx 配置！

步骤 1：本地打包

在本地项目根目录执行构建命令：

npmrun build# 或者 yarn build

步骤 2：本地一键上传（覆盖旧文件）

直接使用scp将新的dist/*内容上传并覆盖到服务器的/home/demo-show/dist目录下：

scp-r/Users/clove/Desktop/你的项目路径/dist/* root@47.108.199.2:/home/demo-show/dist/

scp会自动覆盖同名文件，上传完成后无需重启 Nginx。

步骤 3：刷新浏览器

上传完成后，直接在浏览器中强制刷新：

• Mac：按住Cmd + Shift + R
• Windows：按住Ctrl + F5

即可看到最新效果。

💡 进阶小技巧（清理残留文件）

如果本地删除了某个文件，为了保持服务器目录干净，可以先清空dist再上传：

sshroot@47.108.199.2"rm -rf /home/demo-show/dist/*"

然后再执行上传命令。

💡 常见问题排查（FAQ）

Q：输入nginx -t报错提示unknown directive "erver"是什么问题？

A：这是新手常见的拼写错误。打开/etc/nginx/conf.d/demo-show.conf，检查第一行，确保是server {而不是erver {。

Q：浏览器访问提示“连接超时”或“无法访问”，但 Nginx 已经启动了？

A：99% 的情况是云服务器的安全组没有放行 8081 端口，请立刻去控制台检查。

Q：网页能打开，但刷新某个子路由报 404 错误？

A：检查 Nginx 配置文件中的location是否包含了try_files $uri $uri/ /index.html;这一行。

Q：上传时提示Permission denied？

A：检查是否使用root用户登录，或目标目录是否有写入权限：

chmod-R755/home/demo-show

🎯 总结

恭喜你！你现在已经掌握了前端部署的核心技能：

以后只需要重复第二阶段的步骤，就可以轻松地更新你的网站。如果有其他问题，欢迎随时记录和提问！🚀