浏览器不尊重Azure角路由 [英] Azure Angular Routing not respected in the browser
问题描述
我有一个使用CLI组合在一起的Angular应用程序，并成功部署到天蓝色.不幸的是，当我导航到我的站点时，浏览器中未遵循路由.基本上，到达站点后，路由在浏览器中是静态的.但仅当部署到天蓝色时.在本地，一切正常.
I have an Angular App I put together using the CLI, and deployed to azure semi successfully. Unfortunately, when I navigate to my site, routes are not respected within the browser. Basically, once you get to the site the route is static in the browser. But only when deployed to azure. Locally, everything works right.
例如:
假设我们从- http://my-awesome.site/
该路由将加载，并且将正常运行.
That route will load, it will function properly.
然后，我们单击一个链接，将我们带到 http://my-awesome.site/route-这里
Then we click a link that takes us to http://my-awesome.site/route-here
那行得通，它带我去了那条路.除非查看浏览器窗口，否则它仍显示为:
That works, it takes me to that route. Except if I look at my browser window it still reads:
此外，如果我从
Also, If I start on http://my-awesome.site/route-here the browser will reflect the proper route. Until you navigate to ANY OTHER ROUTE. Basically, the route you use to get to my site is static in the browser, I can do NOTHING to change it.
在本地，这一切都可以正常工作.
Locally, it all works correctly.
localhost:4200/有效，单击localhost:4200/some-route起作用，浏览器更新并反映localhost:4200/some-route的新URL
localhost:4200/ works, clicking localhost:4200/some-route works, the browser updates and reflects the new url of localhost:4200/some-route
我通过VSTS部署到Azure.我不太确定引擎盖上正在运行什么.老实说，我是Angular部署的新手，我确实在"Node.js Experience"中添加了"No".最近，我得知我的Windows应用程序服务器正在运行IIS，并假装为节点，这几乎让我大吃一惊.
I deployed to Azure through VSTS. I'm not exactly sure what's running udner the hood. Like honestly, I'm new to deploying Angular, and I really put the 'No' in "Node.js Experience". I was recently informed that my windows app server is running IIS pretending to be node, which pretty much blew my mind.
因此，我站起了一台Linux App Server，创建了一个Linux构建服务器，并添加了一个服务器文件夹，其中包含index.js和package.json以及从约翰·帕帕的github借来的代码
So, I stood up a Linux App Server and created a linux build server, and added a server folder, with an index.js and package.json with code from borrowed from John Papa's github
const express = require('express');
const app = express();
const port = process.env.PORT || 4200;
const publicweb = process.env.PUBLICWEB || './dist';
app.use(express.static(publicweb));
console.log(`serving \\${publicweb}`);
app.get('*', (req, res) => {
tres.sendFile(`index.html`, { root: publicweb });
});
app.listen(port, () => console.log(`listening on http://localhost:4200`));
package.json
{
"name": "one-with-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "node index.js"
},
"private": true,
"dependencies": {
"body-parser": "^1.17.2",
"express": "^4.15.3"
},
"devDependencies": {}
}
然后我按照
要成功部署我的网站.
当我将其部署到原始的Windows Azure服务器时，路由仍然不被接受.有了额外的好处，如果您进入到任何地方的路线，那您就输了.您获得了完整的404.因为原因.好吧，坦白地说，这就是为什么我在这里的一部分.
When I deployed it to my original windows azure server, the routes were STILL NOT RESPECTED. With the added bonus that if you came in with a route to anywhere, you lost. You got a full-on 404. Because Reasons. Ok, frankly that's part of why I'm here.
不，不，不是.我之前提到过Linux.我完全尝试配置VSTS构建以部署到那里.它确实成功"地部署到了那里.我可以从该服务器上获得503或404，但是我什么也没有.
No, no it wasn't. I mentioned that Linux box earlier. And I totally tried to configure the VSTS build to deploy there. And it did deploy there "successfully". I can get 503s or 404s from that server but I don't get anything else.
一些方向.
也许我错过了配置文件中的设置，就像一个名为"LetAngularRespectRoutesInTheBrowserWhenNotOnLocalhost"的应用程序设置
Maybe I've missed a setting in a configuration file that would be like an application setting named "LetAngularRespectRoutesInTheBrowserWhenNotOnLocalhost"
或
也许我在那个简单的index.js文件中错过了一些东西
Maybe I missed something in that simple index.js file
或
也许Linux实际上是关键，我需要弄清楚该构建的出了什么问题.
Maybe Linux actually is the key and I need to figure out what's wrong with that build.
谢谢
推荐答案
解决方案
是的，我能够找到解决方案.
The Solution
Yes, I was able to find the solution.
在会议上，我与一些专家坐了下来，我们一起走到了这个弯腰的底部.
I sat down with some experts at a conference and together we got to the bottom of this mind bender.
我在GoDaddy.com上注册了我的域名.然后，我在(some-domain).azurewebsites.net上将永久转发到azure托管站点的位置.
I registered my domain with GoDaddy.com. And then I set up a permanent forwarding to where I hosted the site in azure at (some-domain).azurewebsites.net.
显然，当您以这种方式重定向时，GoDaddy会执行一些非常有趣的操作.它返回一个非常简单的页面，其中包含< iframe></iframe> ，该页面实际上指向您的重定向站点.听起来很荒谬，但是是的.认真地说，除非我看到两个获取对网页的请求的请求，一个我不会相信，一个在(my-site).com/some-route，另一个在(my-azure-site)请求同一个页面.azurewebsites.net/some-route来自.
Apparently, GoDaddy does something very interesting when you redirect this way. It returns an extremely simple page with an <iframe></iframe> that actually points at your redirected site. Which sounds ridiculous, but yeah. Like seriously, I wouldn't have believed it unless I saw the two get requests for the web page, one at (my-site).com/some-route and another asking for the same page at (my-azure-site).azurewebsites.net/some-route from.
这意味着当我导航到不同的页面时，Angular正在工作，这很神奇，并且试图像应该的那样更新路线.除了所有这些好处之外，我的网站就是< iframe> .因此，浏览器从未更改过它所在的页面.但是一切看起来都正确.
That means that when I was navigating to different pages, Angular was working it's magic and attempting to update the routes just like it should. Except all of that goodness was sitting behind the window into my site that is the <iframe>. So the browser was never changing the page it was on. But everything looked correct.
该解决方案实际上非常简单.
The solution was actually fairly simple.
我们只需要在GoDaddy中更新几个DNS设置.
We just had to update a couple of DNS settings in GoDaddy.
- IP地址
- 类型:A
- 名称:@
- 值:(ip-address-from-azure)
- 类型:TXT
- 名称:@
- 值:(您的网站).azurewebsites.net
设置图片: GoDaddy设置
在Azure门户中:
导航到自定义域设置":主页>(您的站点名称)>自定义域(位于设置下)
Navigate to the Custom Domains Settings : Home > (your-site-name) > Custom Domains (It's under settings)
将您的(拥有的域)添加到自定义主机名列表中.您可能需要验证它，这就是为什么您必须首先进行DNS设置(然后再进行传播)的原因.
Add your (owned-domain) to the list of custom hostnames. You may need to validate it, and that's why you have to do the DNS settings first (and give them a second to propagate).
设置图片:天蓝色设置
感谢那些曾经帮助过并试图帮助自己的人.
Thank you to those who helped and attempted to help.
向阿西姆·侯赛因(Sim Hussain)和桑德·埃里亚斯(Sander Elias)大喊大叫，他们是帮助我在ngConf上解决这一问题的专家.
Huge Shout out to Asim Hussain, and Sander Elias who were the experts who helped me figure this out at ngConf.
这篇关于浏览器不尊重Azure角路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
