在Azure App Service运行非静态Storybook遇权限问题求助

问题根源 #

Azure App Service默认依赖指定端口（由PORT环境变量分配，通常为8080），且需要明确的启动命令映射，而Storybook默认用6006端口，同时App Service默认逻辑找不到传统Node应用的server.js，导致启动后无法正常对外提供服务。

分步解决方案 #

1. 调整Storybook启动端口配置 #

修改package.json中的storybook启动命令，让它监听Azure分配的端口：

"scripts": {
  "storybook": "storybook dev -p $PORT"
}

如果是Windows容器环境，替换为：

"scripts": {
  "storybook": "storybook dev -p %PORT%"
}

2. 配置Azure App Service启动命令 #

登录Azure门户，进入你的App Service实例：

• 打开「配置」→「常规设置」
• 在「启动命令」栏输入 npm run storybook
• 保存配置，重启App Service

3. 验证部署与启动状态 #

• 确保部署包包含完整的node_modules目录，或在部署流程中添加npm install步骤（比如通过Azure Pipeline或部署中心配置）
• 查看App Service的「日志流」，确认日志中出现类似Storybook started on port [端口号]的提示，说明服务已正常启动

4. 排查网络与权限 #

• Azure App Service会自动将外部80/443端口映射到内部PORT变量指定的端口，无需额外配置入站规则
• 若仍提示权限问题，检查App Service应用服务计划的权限配置，确保服务有读取应用文件的权限（默认配置通常满足需求）

本地模拟验证 #

在本地设置PORT环境变量为8080，执行npm run storybook后访问localhost:8080，确认能正常加载Storybook，排除本地配置差异问题。

内容的提问来源于stack exchange，提问作者Kode