如何在Azure Windows服务器上部署分离的Laravel API与React项目并通过公网IP访问

一、虚拟机基础配置准备 #

• 先在Azure控制台对应虚拟机的网络安全组中添加入站规则，开放所需端口：默认80（HTTP前端）、443（HTTPS）、如果后端单独用端口可以开放8000，同时也要在Windows Server系统的防火墙中开放对应端口的入站权限。
• 虚拟机内安装必备运行环境：
  • 安装IIS服务：服务器管理器→添加角色和功能→勾选Web服务器（IIS）安装即可
  • 安装匹配你Laravel版本的PHP（推荐8.1及以上），开启fileinfo、mbstring、curl、pdo_mysql等必要扩展，将PHP根目录添加到系统环境变量Path中
  • 安装Composer（Laravel依赖管理工具）
  • 按需安装数据库服务，比如MySQL/SQL Server，也可以直接对接Azure云数据库

二、部署Laravel API后端 #

• 将Laravel项目代码上传到虚拟机指定目录，比如C:\inetpub\wwwroot\laravel-api
• 进入项目根目录，执行composer install安装所有依赖
• 复制.env.example重命名为.env，修改配置项：数据库连接参数、APP_URL、CORS允许的前端地址等，执行php artisan key:generate生成应用密钥
• 如有数据迁移需求，执行php artisan migrate --seed初始化数据库表和测试数据
• 给项目下的storage和bootstrap/cache目录添加IIS_IUSRS用户的读写权限，避免运行时报权限错误
• 打开IIS管理器，右键添加网站：站点名称自定义，物理路径选择Laravel项目的public子目录，绑定IP选「全部未分配」，端口设为8000，主机名留空即可
• 本地测试：虚拟机内访问http://localhost:8000/api/你的测试接口，能正常返回数据即后端部署成功

三、部署React前端构建产物 #

• 本地开发环境执行npm run build打包React项目，得到build文件夹，将整个文件夹上传到虚拟机目录，比如C:\inetpub\wwwroot\react-dist
• 打开IIS管理器，再次添加新网站：物理路径选择上述build目录，绑定IP选「全部未分配」，端口设为80，主机名留空
• 如果你用了BrowserRouter路由模式，需要在build目录下新增web.config配置URL重写规则，避免页面刷新报404错误
• 本地测试：虚拟机内访问http://localhost能正常加载前端页面，且接口请求能正常调用后端接口即前端部署成功

四、公网访问说明 #

部署完成后可以通过公网IP访问系统，前提是满足两个条件：

• 你的Azure Windows Server虚拟机已经分配了公网IP（建议配置静态公网IP，避免虚拟机重启后IP变更）
• 之前的Azure网络安全组和Windows防火墙都正确开放了对应端口的入站规则

访问方式：前端直接访问http://你的虚拟机公网IP，后端API访问http://你的虚拟机公网IP:8000。如果要避免跨域问题，可以配置IIS反向代理，将所有/api开头的请求转发到后端8000端口，这样前后端都用80端口访问即可。

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