企业官网建设流程全解析

angular-seed 生产部署指南：只需 app 目录？静态文件托管与同源策略实战

【免费下载链接】angular-seedSeed project for angular apps.项目地址: https://gitcode.com/gh_mirrors/an/angular-seed

angular-seed 是 AngularJS 应用经典的种子工程（starter 模板），它的核心理念是：应用完全由静态的 HTML、CSS 与 JavaScript 文件组成。这意味着生产部署极简——无需编译构建，把app/目录上传到任意 Web 服务器即可上线。本文用实战视角讲清楚三个关键问题：该保留哪些目录、如何做静态文件托管、遇到同源策略该怎么解决，帮助新手用最少步骤完成部署。

为什么生产部署只要 app 目录？

README.md 中官方给出了明确结论："all you need in production are the files under theapp/directory"（生产环境只需要app/目录下的文件，其余全部省略）。原因很简单：AngularJS 是纯前端技术，应用本质上就是一堆可以被浏览器直接访问的静态文件。

各目录职责与取舍一览：

关键细节在于app/lib目录：执行npm install时，postinstall钩子会自动触发copy-libs脚本，把 AngularJS 框架文件从node_modules拷贝进app/lib（见 package.json 的 scripts 定义）。这样app/目录天然自包含，部署时不存在"构建产物"这一环。

静态文件托管实战

方式一：http-server 快速本地验证

项目已预置start脚本（package.json）：

http-server -a localhost -p 8000 -c-1 ./app

执行npm start后访问localhost:8000/index.html即可看到示例应用。其中-c-1参数关闭缓存，适合开发调试；上线后可以开启缓存提升加载速度。

方式二：Nginx 承载生产流量

官方推荐把服务器配置指向app/目录即可（README.md）。最小化 Nginx 配置如下：

server { listen 80; root /var/www/your-app; # 即上传的 app/ 目录 index index.html; }

这里有个实用红利：应用路由采用 hash 模式，app/index.html 中的导航链接形如#!/view1，因此无需任何服务端重写规则，任意静态托管都能正确工作。

⚠️ 常见坑：别用 file:// 直接打开

浏览器对file://协议的页面有安全沙箱限制，XHR、Cookie 等能力常被禁用，导致功能异常。这正是官方建议"始终通过 Web 服务器以http://方式访问"的原因，生产环境更不应跳过这一步。

同源策略解决思路

当应用需要通过 XHR 请求后端 API 时，若静态文件与接口不在同一域名下，会被浏览器同源策略拦截。官方文档给出两种标准解法：

1. 静态文件直接由后端服务器托管：把app/放进 API 所在域名的站点目录，前后端天然同源，最简单可靠；
2. 反向代理：静态文件与后端服务部署在不同服务器，用 Nginx 把/api路径反代到后端。浏览器视角下始终是同源请求：

location /api/ { proxy_pass http://127.0.0.1:3000/; }

前端代码里请求/api/data即为同源调用，彻底规避 CORS 问题。

上线前 5 项检查清单 📋

• ✅ 已执行npm install，确认app/lib中框架文件齐全
• ✅ 仅上传app/目录，未混入测试脚本与node_modules
• ✅ 通过http://访问验证，而非file://
• ✅ 静态文件与 API 同源，或已配置反向代理
• ✅ 本地可用npm test回归单元测试（karma.conf.js），端到端场景见 e2e-tests/scenarios.js

总结

angular-seed 生产部署的核心可以浓缩为三句话：app/目录自包含、任意 Web 服务器托管静态文件、前后端同源解决跨域。掌握这三点，你可以在几分钟内把一个 AngularJS 应用部署到 Nginx、Apache 或任何静态托管平台。如果想进一步了解应用结构，可以参考两个示例视图的实现：app/view1/view1.js 与 app/view2/view2.js。

【免费下载链接】angular-seedSeed project for angular apps.项目地址: https://gitcode.com/gh_mirrors/an/angular-seed