在Azure上部署react项目

Question

我想在azure云上部署我的反应项目.我已经在heroku上部署了它,并且它很容易部署.我只需要执行git push heroku master将其部署到heroku上.但我对如何在天蓝色上做这件事毫无头绪.所以我的项目中有一个bulid目录,每次运行gulp命令时都会生成该目录.它包含所有构建文件.任何人都可以指导我如何进入azure？

这是我的项目结构

Answer 1

有很多选项可以将您的应用程序部署到azure网站/网络应用程序,例如FTP,本地Git存储库和Visual Studio IDE等.我不是React专家,为简单起见,我只使用create-react-app工具和FileZilla将我的React应用程序部署到Azure Web App.这是步骤.

基本上,创建和构建React应用程序非常简单

npm install -g create-react-app

create-react-app my-app
cd my-app/

npm run build

现在,该应用程序已准备好部署!让我们进入Azure门户并创建一个新网站来托管我们的React应用程序.

输入唯一的应用服务名称,资源组的有效名称和新的服务计划.然后点击保存.

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

接下来,单击" 属性",然后复制FTP主机名和USER.

最后,通过FileZilla连接到Azure Web应用程序,然后将my-app/build之前创建的文件夹的整个内容上载到/site/wwwroot/Azure网站上的文件夹中.

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

Answer 2

除了Aaron提供的步骤之外,我还必须添加带有以下内容的web.config文件.它由其他技术人员在他们的博客和一些论坛中提供.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Static 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>
  </system.webServer>
</configuration>