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

前端项目部署实战从 0 到 1 部署到阿里云服务器新手保姆级指南适用环境阿里云 ECSCentOS 7/8 或 UbuntuNginxVue/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 使用自带的终端TerminalWindows 使用 PowerShell 或 CMD2. 连接服务器打开本地终端输入以下命令登录服务器sshroot47.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/* root47.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-sreload7. 开放安全组端口最容易踩坑的地方服务器内部配置好了但云服务器默认会拦截外部请求。这一步至关重要请登录阿里云控制台 → 云服务器 ECS → 安全组 → 配置规则 → 入方向添加一条规则项目值协议类型TCP端口范围8081授权对象0.0.0.0/0保存后在浏览器打开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/* root47.108.199.2:/home/demo-show/dist/scp会自动覆盖同名文件上传完成后无需重启 Nginx。步骤 3刷新浏览器上传完成后直接在浏览器中强制刷新Mac按住Cmd Shift RWindows按住Ctrl F5即可看到最新效果。 进阶小技巧清理残留文件如果本地删除了某个文件为了保持服务器目录干净可以先清空dist再上传sshroot47.108.199.2rm -rf /home/demo-show/dist/*然后再执行上传命令。 常见问题排查FAQQ输入nginx -t报错提示unknown directive erver是什么问题A这是新手常见的拼写错误。打开/etc/nginx/conf.d/demo-show.conf检查第一行确保是server {而不是erver {。Q浏览器访问提示“连接超时”或“无法访问”但 Nginx 已经启动了A99% 的情况是云服务器的安全组没有放行 8081 端口请立刻去控制台检查。Q网页能打开但刷新某个子路由报 404 错误A检查 Nginx 配置文件中的location是否包含了try_files $uri $uri/ /index.html;这一行。Q上传时提示Permission deniedA检查是否使用root用户登录或目标目录是否有写入权限chmod-R755/home/demo-show 总结恭喜你你现在已经掌握了前端部署的核心技能阶段核心操作首次部署创建目录 → 上传文件 → 配置 Nginx → 开放端口更新部署本地打包 → scp 上传 → 强制刷新浏览器以后只需要重复第二阶段的步骤就可以轻松地更新你的网站。如果有其他问题欢迎随时记录和提问