在Azure上部署反应项目

我想在Azure云上部署我的反应项目。 我已经将它部署在heroku上，部署起来非常简单。 我只需要做git push heroku master把它部署在heroku上。 但是我对如何在蔚蓝的天空上做的事情一无所知。 所以我在我的项目中有一个bulid目录，每次运行gulp命令时都会生成这个目录。 它有所有的构build文件。 任何人都可以请指导我如何继续蔚蓝？

这是我的项目结构

Answer 1

有很多选项可以将您的应用程序部署到Azure网站/ Web应用程序，例如FTP，Local Git Repository和Visual Studio IDE等。我不是React专家，为了简单起见，我只是使用create-react-app工具和FileZilla将我的React应用程序部署到Azure Web App。 这是步骤。

基本上，创build和构buildReact应用程序就像

npm install -g create-react-app create-react-app my-app cd my-app/ npm run build 

现在，该应用程序已准备好部署！ 让我们进入Azure门户并创build一个将托pipe我们的React应用程序的新网站。

input唯一的应用程序服务名称，资源组的有效名称和新的服务计划。 然后点击保存 。

要启用FTP发布，请单击APP DEPLOYMENT菜单下的部署凭据 。 保存凭据并记下您创build的用户名和密码。

接下来，点击属性 ，并复制FTP主机名称和用户 。

最后，通过FileZilla连接到Azure Web应用程序，然后将之前创build的my-app/build文件夹的全部内容上传到Azure网站的/site/wwwroot/文件夹中。

现在我们可以在浏览器中通过URL访问应用程序： http://aaronreacttest.azurewebsites.net/ : http://aaronreacttest.azurewebsites.net/ ，它应该显示默认页面。

Answer 2

除了Aaron提供的步骤，我不得不添加web.config文件与下面的内容。 这是由其他技术人员在他们的博客和一些论坛提供的。

 <?xml version="1.0"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> 

Answer 3

这是如何将静态应用程序部署到Azure的完整指南。

PS这将是一样简单heroku – 推你的编译的Web应用程序到azure色的远程混帐。