doc-exports/docs/obs/umn/obs_03_0338.html
zhangyue b55201d729 OBS UMN DOC
Reviewed-by: Sabelnikov, Dmitriy <dmitriy.sabelnikov@t-systems.com>
Co-authored-by: zhangyue <zhangyue164@huawei.com>
Co-committed-by: zhangyue <zhangyue164@huawei.com>
2024-03-18 15:39:30 +00:00

125 lines
23 KiB
HTML

<a name="obs_03_0338"></a><a name="obs_03_0338"></a>
<h1 class="topictitle1">Using a User-Defined Domain Name to Configure Static Website Hosting</h1>
<div id="body1511254307396"><p id="obs_03_0338__p56030134165822">OBS allows you to access static websites hosted by OBS using user-defined domain names. This section uses a specific scenario as an example to describe how to use a user-defined domain name to configure static website hosting. For a basic understanding of the concepts and operations about the static website hosting on OBS, see <a href="en-us_topic_0045853755.html">Configuring Static Website Hosting</a>.</p>
<div class="section" id="obs_03_0338__section9519744162048"><h4 class="sectiontitle">Scenario</h4><p id="obs_03_0338__p29930568143324">Company <strong id="obs_03_0338__b133045244011">A</strong> has a large number of files to archive but it does not want to put the time and effort into its storage resources. Therefore, the company subscribes to OBS for hosting static websites and expects that the usernames under the company account can access the static resources through a user-defined domain name. See <a href="#obs_03_0338__fig4961082014460">Figure 1</a>.</p>
</div>
<div class="fignone" id="obs_03_0338__fig4961082014460"><a name="obs_03_0338__fig4961082014460"></a><a name="fig4961082014460"></a><span class="figcap"><b>Figure 1 </b>Using a user-defined domain name to access hosted static website</span><br><span><img id="obs_03_0338__image11372108164616" src="en-us_image_0129288906.png" title="Click to enlarge" class="imgResize"></span></div>
<div class="section" id="obs_03_0338__section66351230165353"><h4 class="sectiontitle">Operation Process</h4><p id="obs_03_0338__p2060647165413">Create a bucket on OBS Console first, for storing static website resources, and enable static website hosting for this bucket. Then use DNS to create and configure domain name hosting. The procedure is as follows:</p>
<ol id="obs_03_0338__ol31653336195447"><li id="obs_03_0338__li66473879195447"><a href="#obs_03_0338__li60359246145535">Register a domain name.</a></li><li id="obs_03_0338__li27650023195513"><a href="#obs_03_0338__li3389392914569">Create a bucket.</a></li><li id="obs_03_0338__li4540396692428"><a href="#obs_03_0338__li40840329145633">Upload static website files.</a></li><li id="obs_03_0338__li134358919254"><a href="#obs_03_0338__li55012967145655">Configure static website hosting on OBS.</a></li><li id="obs_03_0338__li142081038183113"><a href="#obs_03_0338__li1181751112130">Bind a user-defined domain name.</a></li><li id="obs_03_0338__li2490315392534"><a href="#obs_03_0338__li25854022145746">Create and configure domain name hosting.</a></li><li id="obs_03_0338__li42857788101056"><a href="#obs_03_0338__li52936006101225">Verify the configuration.</a></li></ol>
</div>
<div class="section" id="obs_03_0338__section25592940165428"><h4 class="sectiontitle">Data Planning</h4><p id="obs_03_0338__p2356352814126"><a href="#obs_03_0338__table519146461490">Table 1</a> describes the data to be planned before this configuration.</p>
<div class="tablenoborder"><a name="obs_03_0338__table519146461490"></a><a name="table519146461490"></a><table cellpadding="4" cellspacing="0" summary="" id="obs_03_0338__table519146461490" frame="border" border="1" rules="all"><caption><b>Table 1 </b>Data planning</caption><thead align="left"><tr id="obs_03_0338__row609262061490"><th align="left" class="cellrowborder" valign="top" width="26.94269426942694%" id="mcps1.3.5.3.2.4.1.1"><p id="obs_03_0338__p562454241490">Item</p>
</th>
<th align="left" class="cellrowborder" valign="top" width="39.72397239723972%" id="mcps1.3.5.3.2.4.1.2"><p id="obs_03_0338__p595854991490">Description</p>
</th>
<th align="left" class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.3.5.3.2.4.1.3"><p id="obs_03_0338__p616960901490">Example</p>
</th>
</tr>
</thead>
<tbody><tr id="obs_03_0338__row183939011490"><td class="cellrowborder" valign="top" width="26.94269426942694%" headers="mcps1.3.5.3.2.4.1.1 "><p id="obs_03_0338__p135109821490">User-defined domain name</p>
</td>
<td class="cellrowborder" valign="top" width="39.72397239723972%" headers="mcps1.3.5.3.2.4.1.2 "><p id="obs_03_0338__p49414949141215">Indicates user's own domain name.</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.3.5.3.2.4.1.3 "><p id="obs_03_0338__p618525371490">www.example.com</p>
</td>
</tr>
<tr id="obs_03_0338__row407694771490"><td class="cellrowborder" valign="top" width="26.94269426942694%" headers="mcps1.3.5.3.2.4.1.1 "><p id="obs_03_0338__p139933781490">Static website homepage</p>
</td>
<td class="cellrowborder" valign="top" width="39.72397239723972%" headers="mcps1.3.5.3.2.4.1.2 "><p id="obs_03_0338__p29426482142545">Indicates the index page that is returned when you access a static website, that is, the homepage.</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.3.5.3.2.4.1.3 "><p id="obs_03_0338__p56294761490">index.html</p>
</td>
</tr>
<tr id="obs_03_0338__row4170134916222"><td class="cellrowborder" valign="top" width="26.94269426942694%" headers="mcps1.3.5.3.2.4.1.1 "><p id="obs_03_0338__p1717117492222">404 error page</p>
</td>
<td class="cellrowborder" valign="top" width="39.72397239723972%" headers="mcps1.3.5.3.2.4.1.2 "><p id="obs_03_0338__p917154919221">When an incorrect static website path is accessed, the 404 error page is returned.</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.3.5.3.2.4.1.3 "><p id="obs_03_0338__p8171124916224">error.html</p>
</td>
</tr>
</tbody>
</table>
</div>
<ul id="obs_03_0338__ul19882191592710"><li id="obs_03_0338__li138821815162711">For example, the content of the <strong id="obs_03_0338__b963041620456">index.html</strong> file is as follows:<pre class="screen" id="obs_03_0338__screen51613215101043">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello OBS!&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to use OBS static website hosting.&lt;/p&gt;
&lt;p&gt;This is the homepage.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</li><li id="obs_03_0338__li76513221273">For example, the content of the <strong id="obs_03_0338__b1516392194516">error.html</strong> file is as follows:<pre class="screen" id="obs_03_0338__screen9819164212715">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello OBS!&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to use OBS static website hosting.&lt;/p&gt;
&lt;p&gt;This is the 404 error page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</li></ul>
</div>
<div class="section" id="obs_03_0338__section61661470165443"><h4 class="sectiontitle">Procedure</h4><ol id="obs_03_0338__ol3842917145535"><li id="obs_03_0338__li60359246145535"><a name="obs_03_0338__li60359246145535"></a><a name="li60359246145535"></a><span>Register a domain name.</span><p><p id="obs_03_0338__p9458136145759">If you have a registered domain name, skip this step.</p>
<p id="obs_03_0338__p8357122153510">If you do not have a registered domain name, register one with a registrar of your choice. In this scenario, the example domain name <strong id="obs_03_0338__b1844665244163253">www.example.com</strong> is used. In practice, you need to replace the domain name with the one you actually planned.</p>
</p></li><li id="obs_03_0338__li3389392914569"><a name="obs_03_0338__li3389392914569"></a><a name="li3389392914569"></a><span>Create a bucket.</span><p><p id="obs_03_0338__p560203163214">There are no special requirements on bucket names. Create a bucket for storing static website files as prompted. The following example describes how to create a bucket named <strong id="obs_03_0338__b17518105942913">example</strong>:</p>
<ol type="a" id="obs_03_0338__ol4679272161643"><li id="obs_03_0338__li39030758161641">Log in to OBS Console.</li><li id="obs_03_0338__li21003125162357">Click <strong id="obs_03_0338__b58164421413">Create Bucket</strong> in the upper right corner of the page.</li><li id="obs_03_0338__li364566781776">Configure the following parameters in the dialog box that is displayed:<ul id="obs_03_0338__ul455547717719"><li id="obs_03_0338__li1797810217736"><strong id="obs_03_0338__b783182223516">Region</strong>: Select a region closest to you.</li><li id="obs_03_0338__li128571344355"><strong id="obs_03_0338__b2074811811363">Bucket Name</strong>: Enter <strong id="obs_03_0338__b11783172215366">example</strong>.</li><li id="obs_03_0338__li2666114517740"><strong id="obs_03_0338__b148446310304">Storage Class</strong>: It is recommended that you select <strong id="obs_03_0338__b075115248308">Standard</strong>.<div class="note" id="obs_03_0338__note260215441314"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><p id="obs_03_0338__p86038444320">You can also select the Warm, or Cold storage class based on the website requirements for access frequency and speed. For details about storage classes, see <a href="en-us_topic_0050937852.html">Storage Classes Overview</a>.</p>
</div></div>
</li><li id="obs_03_0338__li267135417746"><strong id="obs_03_0338__b9503158142015">Bucket Policy</strong>: Select <strong id="obs_03_0338__b2785253163114">Public Read</strong> to allow any user to access objects in the bucket.</li><li id="obs_03_0338__li1482865793118"><strong id="obs_03_0338__b481182317538">Default Encryption</strong>: Select <strong id="obs_03_0338__b2641195015216">Disable</strong>.</li></ul>
</li><li id="obs_03_0338__li64227293163627">Click <strong id="obs_03_0338__b20175124210810">Create Now</strong> to complete the creation.</li></ol>
</p></li><li id="obs_03_0338__li40840329145633"><a name="obs_03_0338__li40840329145633"></a><a name="li40840329145633"></a><span>Upload static website files to the bucket.</span><p><p id="obs_03_0338__p37646382164740">Prepare the static website files to be uploaded and perform the following steps to upload all static website files to bucket <strong id="obs_03_0338__b67543308516358">example</strong>.</p>
<ol type="a" id="obs_03_0338__ol12819859165543"><li id="obs_03_0338__li45621167165543">Click the bucket name <strong id="obs_03_0338__b212320231520">example</strong> to go to the <strong id="obs_03_0338__b10123142317214">Objects</strong> page.</li><li id="obs_03_0338__li49611755172647">Click <strong id="obs_03_0338__b1385411468382">Upload Object</strong>. A dialog box shown in <a href="#obs_03_0338__fig18806520194814">Figure 2</a> is displayed.<div class="fignone" id="obs_03_0338__fig18806520194814"><a name="obs_03_0338__fig18806520194814"></a><a name="fig18806520194814"></a><span class="figcap"><b>Figure 2 </b>Uploading objects</span><br><span><img id="obs_03_0338__obs_03_0307_image10536191814483" src="en-us_image_0153827167.png" title="Click to enlarge" class="imgResize"></span></div>
</li><li id="obs_03_0338__li43271656164119">Drag the prepared static website files to the <strong id="obs_03_0338__b1278181144318">Upload Object</strong> area.<p id="obs_03_0338__p5316155610415">You can also click <strong id="obs_03_0338__b2809846174012">add file</strong> in the <strong id="obs_03_0338__b81388451276">Upload Object</strong> area to select files.</p>
<div class="note" id="obs_03_0338__note338074113016"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><ul id="obs_03_0338__ul10380174111305"><li id="obs_03_0338__li19380541143015">The static website files cannot be encrypted for upload.</li><li id="obs_03_0338__li19380114116302">The website home page file (<strong id="obs_03_0338__b137281628174415">index.html</strong>) and 404 error page (<strong id="obs_03_0338__b20624163394414">error.html</strong>) must be stored in the root directory of the bucket.</li><li id="obs_03_0338__li33801741123012">It is recommended that you select <strong id="obs_03_0338__b1892531444513">Standard</strong> for the storage class. If the storage class of a static website file is Cold, you need to restore the static website file before you can access it. For details, see <a href="obs_03_0320.html">Restoring Objects from the Cold Storage</a>.</li></ul>
</div></div>
</li><li id="obs_03_0338__li48547704174845">Click <strong id="obs_03_0338__b50087637163615">Upload</strong> to complete the upload.</li></ol>
</p></li><li id="obs_03_0338__li55012967145655"><a name="obs_03_0338__li55012967145655"></a><a name="li55012967145655"></a><span>Configure static website hosting.</span><p><p id="obs_03_0338__p26234448181123">After uploading the static website files, you need to configure the static website hosting function for the bucket.</p>
<div class="note" id="obs_03_0338__note972617324616"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><p id="obs_03_0338__p2726138465">You can also redirect the entire static website to another bucket or domain name. For details, see <a href="en-us_topic_0066088957.html">Configuring Redirection</a>.</p>
</div></div>
<ol type="a" id="obs_03_0338__ol326316562498"><li id="obs_03_0338__li1126395614497">Click the bucket name <strong id="obs_03_0338__b14001731944">example</strong> to go to the <strong id="obs_03_0338__b17401231042">Objects</strong> page.</li><li id="obs_03_0338__li923242075011">In the navigation pane, choose <strong id="obs_03_0338__b132557318249">Basic Configurations</strong> &gt; <strong id="obs_03_0338__b152031118142416">Static Website Hosting</strong>. The <strong id="obs_03_0338__b6966426192419">Static Website Hosting</strong> page is displayed.</li><li id="obs_03_0338__li720344934317">Click <strong id="obs_03_0338__b045253851320">Configure Static Website Hosting</strong> to open the dialog box.</li><li id="obs_03_0338__li16729105453">Enable <strong id="obs_03_0338__b16515467412">Status</strong>.</li><li id="obs_03_0338__li13201511640">Set <strong id="obs_03_0338__b15612183012446">Hosting By</strong> to <strong id="obs_03_0338__b105916269448">Current bucket</strong>.<div class="fignone" id="obs_03_0338__fig1131112528711"><span class="figcap"><b>Figure 3 </b>Configuring static website hosting</span><br><span><img id="obs_03_0338__en-us_topic_0045853755_image27411688519" src="en-us_image_0145846197.png" title="Click to enlarge" class="imgResize"></span></div>
<div class="note" id="obs_03_0338__note280912573545"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><p id="obs_03_0338__p38151457185413">You can also configure redirection rules based on service requirements to implement website content redirection. For details, see <a href="en-us_topic_0045853755.html">Configuring Static Website Hosting</a>.</p>
</div></div>
</li><li id="obs_03_0338__li1572905695316">Set the <strong id="obs_03_0338__b082817194265">Home Page</strong> to <strong id="obs_03_0338__b146111364261">index.html</strong> as planned, and the <strong id="obs_03_0338__b8115221172719">404 Error Page</strong> to <strong id="obs_03_0338__b1640093616271">error.html</strong>.</li><li id="obs_03_0338__li640163265411">Click <strong id="obs_03_0338__b067574317275">OK</strong>.</li></ol>
</p></li><li id="obs_03_0338__li1181751112130"><a name="obs_03_0338__li1181751112130"></a><a name="li1181751112130"></a><span>Bind a user-defined domain name.</span><p><p id="obs_03_0338__p69831351175514">To bind a user-defined domain name to a bucket, perform the following steps:</p>
<ol type="a" id="obs_03_0338__ol860917715720"><li id="obs_03_0338__li759510555410">Click the bucket name <strong id="obs_03_0338__b85836178516">example</strong> to go to the <strong id="obs_03_0338__b6909124885011">Objects</strong> page. In the navigation pane, choose <strong id="obs_03_0338__b991554885012">Domain Name Mgmt</strong>.</li><li id="obs_03_0338__li1860910785710">Click <strong id="obs_03_0338__b1330116109377">Bind User Domain Name</strong> and set <strong id="obs_03_0338__b780715191387">User Domain Name</strong> to <strong id="obs_03_0338__b112105408366">www.example.com</strong>.<div class="fignone" id="obs_03_0338__fig81134944713"><span class="figcap"><b>Figure 4 </b>Binding a user domain name</span><br><span><img id="obs_03_0338__image110463511245" src="en-us_image_0000001121218940.png" title="Click to enlarge" class="imgResize"></span></div>
</li><li id="obs_03_0338__li693565619439">Click <strong id="obs_03_0338__b1973202011520">OK</strong>. The user-defined domain name is bound to the bucket.</li></ol>
</p></li><li id="obs_03_0338__li25854022145746"><a name="obs_03_0338__li25854022145746"></a><a name="li25854022145746"></a><span>Create and configure domain name hosting.</span><p><p id="obs_03_0338__p250686695157">To facilitate unified management of your user-defined domain names and static websites and implement cloud-based services, directly manage your user-defined domain names on DNS. After the hosting is configured, you can perform subsequent management of the domain name on DNS, including managing record sets and PTR records, as well as creating wildcard DNS records.</p>
<p id="obs_03_0338__p78588629527">Alternatively, you can add a CNAME record to the DNS at the DNS registrar, mapping to the static website domain name hosted by the bucket.</p>
<p id="obs_03_0338__p4220806119739">To create and configure domain name hosting on DNS, perform the following steps:</p>
<ol type="a" id="obs_03_0338__ol500421991943"><li id="obs_03_0338__li222103321943">Add a public zone.<p id="obs_03_0338__p5726638615510"><a name="obs_03_0338__li222103321943"></a><a name="li222103321943"></a>Use the root domain name <strong id="obs_03_0338__b8423527069453">example.com</strong> created in <a href="#obs_03_0338__li60359246145535">Step 1</a> as the name of the public zone to be created. For details about how to create a public zone, see "Step 1. Create a Public Zone" in section "Routing Internet Traffic to a Website" of the <em id="obs_03_0338__i3580388517032">Domain Name Service User Guide</em>.</p>
</li><li id="obs_03_0338__li3707667819410">Add a CNAME record.<p id="obs_03_0338__p5890708415515"><a name="obs_03_0338__li3707667819410"></a><a name="li3707667819410"></a>In DNS, add a record set for the sub-domain name <strong id="obs_03_0338__b842352706162231">www.example.com</strong> of the hosted domain name, to map the CNAME of the sub-domain name to the static website domain name hosted by OBS. Configure the parameters as follows:</p>
<ul id="obs_03_0338__ul60498999151431"><li id="obs_03_0338__li30002790151431"><span class="parmname" id="obs_03_0338__parmname108511610815455"><b>Name</b></span>: Enter <span class="parmvalue" id="obs_03_0338__parmvalue70808877715455"><b>www</b></span>.</li><li id="obs_03_0338__li48396269152559"><strong id="obs_03_0338__b8106132812373">Type</strong>: Select <strong id="obs_03_0338__b64671154173714">CNAME-Canonical name</strong>.</li><li id="obs_03_0338__li02520165713"><strong id="obs_03_0338__b35051637155710">Line</strong>: Select <strong id="obs_03_0338__b14505737145711">Default</strong>.</li><li id="obs_03_0338__li35852280164652"><strong id="obs_03_0338__b15995171184917">TTL (s)</strong>: Retain the default value.</li><li id="obs_03_0338__li3097263415268"><strong id="obs_03_0338__b15372183720599">Value</strong>: Domain name to map, that is, the static website domain name hosted by bucket <strong id="obs_03_0338__b5391934996">example</strong>.</li></ul>
<p id="obs_03_0338__p22629151151033">For details, see section "Adding a CNAME Record Set" in the <em id="obs_03_0338__i1775118525117">Domain Name Service User Guide</em>.</p>
</li><li id="obs_03_0338__li37048951153215">Change the DNS server address at your domain name registrar.<p id="obs_03_0338__p42998550153244"><a name="obs_03_0338__li37048951153215"></a><a name="li37048951153215"></a>At your domain name registrar, change the DNS server address in the NS record of the root domain name to the cloud DNS server address. The specific address is the NS value of the public zone in DNS.</p>
<p id="obs_03_0338__p51442633153244">For details about how to change the addresses of the DNS servers, see "Step 4. Change DNS Servers of the Domain Name" in section "Routing Internet Traffic to a Website" of the <em id="obs_03_0338__i4302106517032">Domain Name Service User Guide</em>.</p>
<div class="note" id="obs_03_0338__note60330515153244"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><p id="obs_03_0338__p96794689545">The address change will be effective within 48 hours. The actual time taken varies depending on the domain name registrar.</p>
</div></div>
</li></ol>
</p></li><li id="obs_03_0338__li52936006101225"><a name="obs_03_0338__li52936006101225"></a><a name="li52936006101225"></a><span>Verify that the configuration is successful.</span><p><ul id="obs_03_0338__ul985145474418"><li id="obs_03_0338__li12851054154413">Enter the following URL in the address box of the browser: <strong id="obs_03_0338__b4487115345516">www.example.com</strong>, to check whether the default homepage can be accessed. See <a href="#obs_03_0338__fig37569995102120">Figure 5</a>.<div class="fignone" id="obs_03_0338__fig37569995102120"><a name="obs_03_0338__fig37569995102120"></a><a name="fig37569995102120"></a><span class="figcap"><b>Figure 5 </b>Default homepage</span><br><span><img id="obs_03_0338__image822165515586" src="en-us_image_0129289255.png"></span></div>
</li><li id="obs_03_0338__li16174320104518">In the web browser, enter a static file access address that does not exist in a bucket. For example, enter <strong id="obs_03_0338__b78951534135613">www.example.com/imgs</strong> to verify that the 404 error page (error.html) can be returned. <a href="#obs_03_0338__fig117531153115316">Figure 6</a> displays the error page.<div class="fignone" id="obs_03_0338__fig117531153115316"><a name="obs_03_0338__fig117531153115316"></a><a name="fig117531153115316"></a><span class="figcap"><b>Figure 6 </b>404 error page</span><br><span><img id="obs_03_0338__image11754053185317" src="en-us_image_0129289469.png"></span></div>
</li></ul>
<div class="note" id="obs_03_0338__note470155614211"><img src="public_sys-resources/note_3.0-en-us.png"><span class="notetitle"> </span><div class="notebody"><p id="obs_03_0338__p19707561023">In some conditions, you may need to clear the browser cache before the expected results are displayed.</p>
</div></div>
</p></li></ol>
</div>
<div class="section" id="obs_03_0338__section521481451418"><h4 class="sectiontitle">Website Update</h4><p id="obs_03_0338__p2395227101818">If you need to update a static file, such as a picture, a piece of music, an HTML file, or a CSS file, you can re-upload the static file.</p>
<p id="obs_03_0338__p72716013155">By default, if two files in a path share one name, the newly uploaded file overwrites the original one. To prevent files from being overwritten, you can enable the versioning function. Versioning allows you to keep multiple versions of a static file, so that you can retrieve and restore history versions conveniently. With versioning enabled, data can be restored rapidly when accidental operations or application faults occur. For detailed information about versioning, see chapter <a href="en-us_topic_0045853504.html">Versioning Overview</a>.</p>
</div>
</div>
<div>
<div class="familylinks">
<div class="parentlink"><strong>Parent topic:</strong> <a href="obs_03_0336.html">Static Website Hosting</a></div>
</div>
</div>
<script language="JavaScript">
<!--
image_size('.imgResize');
var msg_imageMax = "view original image";
var msg_imageClose = "close";
//--></script>