在Azure上部署React项目 [英] Deploying react project on Azure

问题描述

我想将我的React项目部署在Azure云上。我已经在heroku上部署了它，部署起来非常容易。我只需要执行git push heroku master即可将其部署在heroku上。但是我对如何在蔚蓝的天空中做到这一点一无所知。因此，我的项目中有一个bulid目录，该目录在每次运行gulp命令时都会生成。它具有所有构建文件。有人可以指导我如何进行天蓝色吗？

这是我的项目结构

解决方案

有很多选项可以将您的应用程序部署到azure网站/网络应用程序，例如FTP，本地Git存储库和Visual Studio IDE等。我不是React专家，为简单起见，我只使用

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

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

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

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

I want to deploy my react project on azure cloud. I already deployed it on heroku and there it was very easy to deploy. I just had to do git push heroku master to deploy it on heroku. But I am clueless on how to do it on azure. So I have a bulid directory in my project which gets generated everytime I run gulp command. It has all the build files. Can anyone please guide me on how to proceed to azure?

This is my project structure

解决方案

There are many options to deploy your app to azure websites/ web app, such as FTP, Local Git Repository, and Visual Studio IDE, etc. I am not a React expert, here for simplicity, I just use create-react-app tool and FileZilla to deploy my React app to Azure Web App. Here are the steps.

Basically, creating and building React app is as simple as

npm install -g create-react-app

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

npm run build

Now, the app is ready to be deployed! Let’s go into Azure portal and create a new website that will host our React app.

Enter a unique app service name, a valid name for the resource group and a new service plan. Then click Save.

To enable FTP publishing, click Deployment credentials under the APP DEPLOYMENT menu. Save the credentials and make a note of the user name and password you create.

Next, click on Properties, and copy the FTP HOST NAME and the USER.

Finally, connect to Azure Web app via FileZilla, then upload the entire content of the my-app/build folder created earlier into the /site/wwwroot/ folder on your Azure Website.

Now we can visit the app in a browser via URL: http://aaronreacttest.azurewebsites.net/, and it should display the default page.

这篇关于在Azure上部署React项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！