静态Azure托管中的子文件夹 [英] Subfolders in static Azure hostings
问题描述
我想使用Azure blob文件存储来托管静态网站.
I want to use an Azure blob file storage to host a static website.
如果html页位于$ web-storage的根文件夹中，则此方法很好.
This works fine, if the html-page is located in the root folder of the $web-storage.
但是，如果我将网页放在子文件夹中，则相对链接(例如，指向CSS文件)不再起作用-因为它们被解释为基于根的链接
But if I put the webpage into a subfolder, the relative links (e.g. to css files) don't work anymore - since they are interpreted as root-based links
<link href="css/bootstrap.css" rel="stylesheet">
index.html位于"subfolder1"中
index.html is located in "subfolder1"
但不是
https://blablabla.web.core.windows.net/subfolder1/css
已解决
https://blablabla.web.core.windows.net/css
这是Azure的错误还是我的html中的误解/错误?
Is this an error of Azure or a misunderstanding/error in my html?
推荐答案
实际上，$web是Azure通用存储V2上的一个特殊容器，它是Apache HTTP服务器或wwwroot的根路径，例如www为IIS托管所有静态文件夹和文件.必须在$web容器中创建所有文件夹及其子文件夹.您可以在Azure门户上看到其信息，如下图.
Actually, $web is a special container on Azure General Purpose Storage V2, which be the root path like www for Apache HTTP server or wwwroot for IIS to hosts all static folders and files. All folders and their subfolders must have to be created in $web container. You can see its information on Azure portal as the figure below.
这是我的示例，用于创建两个文件夹a& b及其在Azure存储资源管理器中$web容器下的index.html.
Here is my sample to create two folders a & b and their index.html under $web container in Azure Storage Explorer.
如果访问我的主要端点https://<account name>.z7.web.core.windows.net，则我的静态网站的索引网页是下面的Angular示例网页
If access my primary endpoint https://<account name>.z7.web.core.windows.net, the index web page of my static website is an Angular sample web page as below,
然后，根据需要访问子文件夹a和b，如下所示这些子文件夹的索引页.
Then, to access the subfolder a and b like you want, the index page of these subfolders as below.
<html>
<body>
<h2>A</h2>
</body>
</html>
希望它有助于了解Azure General Purpose Storage V2上的静态网站的结构.
Hope it helps for understanding the structure of static website on Azure General Purpose Storage V2.
更新您的评论:
我更新我的a/index.html文件并添加一个新文件a/a.css，其代码如下.
I update my a/index.html file and add a new file a/a.css, the codes as below.
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h2>A</h2>
<span id='test'>Hello</span>
</body>
</html>
a/a.css
#test {
color: red;
}
浏览器工具有一些行为.
There are some behavior up to the browser implement.
问:http://host/a和http://host/a/有什么区别?
答:要在Chrome中访问它们，两个URL将响应来自a/index.html的相同内容.但是，它们的基本路径不同:http://host/a的/，而http://host/a/的/a/，这将导致加载相对路径资源a.css的行为不同，如下图所示.
Q: What's the difference between http://host/a and http://host/a/?
A: To access them in Chrome, the two urls will response the same content from a/index.html. However, their base paths are different: / for http://host/a , but /a/ for http://host/a/, that will cause different behavor for loading a relative path resource of a.css, as the figures below.
图1.
图2.
这篇关于静态Azure托管中的子文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
