[英]How do I deploy a React Webpack web app to Azure App Service?
My Azure web app deployment from Dropbox does not work. 我从Dropbox部署的Azure Web应用程序无法正常工作。
I have an App service running. 我正在运行一个应用程序服务。 I am trying to deploy my React Webpack app.
我正在尝试部署我的React Webpack应用程序。 I have tried deploy from my Bitbucket repo, but that whole project is loaded into D:\\home\\site\\wwwroot and just sits there since Kudu apparently thinks it is a node.js app.
我曾尝试从Bitbucket存储库中进行部署,但是由于Kudu显然认为这是一个node.js应用程序,所以整个项目都被加载到了D:\\ home \\ site \\ wwwroot中,并且就坐在那里。 From what I've read Kudu does that with any git deployment with a package.json file.
从我读到的内容来看,Kudu会对带有package.json文件的任何git部署进行此操作。 So I tried to deploy from Dropbox instead.
因此,我尝试从Dropbox进行部署。 I set up my app's source correctly to my Dropbox/Apps/Azure/ directory and then clicked Sync.
我将应用程序的源正确设置到我的Dropbox / Apps / Azure /目录中,然后单击“同步”。 I got the following result:
我得到以下结果:
Title Synchronization Request Submitted Description The repository for web app is being updated.
标题同步请求已提交描述Web应用程序存储库正在更新。 Status Informational Timestamp Wed Nov 23 2016 08:44:09 GMT-0500 (Eastern Standard Time) UTC Timestamp Wed, 23 Nov 2016 13:44:09 GMT Correlation IDs 447bf0d0-a533-49dd-898a-57b5be6b5738 Percent Completed 100
状态信息时间戳2016年11月23日星期三08:44:09(东部标准时间)UTC时间2016年11月23日星期三星期三13:44:09 GMT相关ID 447bf0d0-a533-49dd-898a-57b5be6b5738完成百分比100
But the bits at D:\\home\\site\\wwwroot still show the code from the old git repo deploys. 但是D:\\ home \\ site \\ wwwroot中的位仍然显示旧git repo部署中的代码。 At my Dropbox page I have the bits that I want to deploy, namely from the build folder after a Webpack build run.
在我的Dropbox页面上,我有要部署的部分,即在Webpack构建运行后从build文件夹中进行部署。 They have index.html at the root, so I expect it would be served correctly if just copied over to Azure.
他们的根目录有index.html,因此,如果将其复制到Azure,我希望它可以正确提供。
I am quite new at this whole Azure thing, can someone help? 我在整个Azure方面还是个新手,有人可以帮忙吗?
EDITED WITH MORE INFORMATION BELOW. 编辑下面有更多信息。
To be clear, I am not deploying any code like app.js/server.js contained in a wwwroot folder. 需要明确的是,我不会部署wwwroot文件夹中包含的任何代码,例如app.js / server.js。 I have copied only the results from a Webpack build run over to the Dropbox folder that is specified to Azure as the source.
我只将运行结果的Webpack构建中的结果复制到了指定给Azure作为源的Dropbox文件夹中。 That Dropbox folder looks like this:
该Dropbox文件夹如下所示:
asset-manifest.json
favicon.ico
index.html
splash.css
static
css
main.63e4d058.css
main.63e4d058.css.map
js
main.68797484.js
main.68797484.js.map
media
dell-300-426.b435b6bd.png
duck.1d942aad.svg
example1.9443ef49.png
icon_question.3672f035.png
ipad-montecarlo-demo.2d964854.png
moneyplan-imac-300-552-new.8814ce0f.png
web.config
The index.html file has a script tag with code that points to the main.68797484.js file, which is the bundled app code. index.html文件具有一个脚本标记,该脚本标记的代码指向main.68797484.js文件,该文件是捆绑的应用程序代码。
But in Azure Deployment options, after clicking Sync, the result reads "No deployments found", even though there was a notification that "The repository for web app is being updated." 但是,在Azure部署选项中,单击“同步”后,即使显示“正在更新Web应用程序的存储库”的通知,结果也将显示为“未找到部署”。
I created a repo that should solve this problem with automatic deploys. 我创建了一个可通过自动部署解决此问题的存储库。
https://github.com/ulrikaugustsson/azure-appservice-static https://github.com/ulrikaugustsson/azure-appservice-static
In short it will build the project and then copy the build folder to wwwroot. 简而言之,它将构建项目,然后将构建文件夹复制到wwwroot。
Per my experience, if app.js/server.js
is contained in wwwroot
floder, then Kudu will think it is a node.js app and generate the web.config
. 根据我的经验,如果
wwwroot
floder中包含app.js/server.js
,那么Kudu会认为这是一个node.js应用程序并生成web.config
。 So if your app is not node.js app, the wwwroot
floder should not cover neither app.js nor server.js. 因此,如果您的应用程序不是node.js应用程序,则
wwwroot
floder不应覆盖app.js和server.js。
For your reference, I wrote the react & webpack hello world project and successfully deployed to Azure. 供您参考,我编写了react&webpack hello world项目并将其成功部署到Azure。 Below is the concrete steps, could you please have a try?
以下是具体步骤,请您尝试一下吗?
In your app's menu blade in the Azure portal , click APP DEPLOYMENT > Deployment options . 在Azure门户的应用程序菜单刀片中,单击“ APP DEPLOYMENT” >“ 部署选项” 。 Click Choose Source , then select the deployment source.
点击选择源 ,然后选择部署源。
In the Deployment source blade, choose the project and branch to deploy from. 在“ 部署源”刀片中,选择要从中进行部署的项目和分支。 When you're done, click OK .
完成后,点击确定 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.