1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: Как загрузить файлы на веб-сервер
slug: Learn/Common_questions/Upload_files_to_a_web_server
translation_of: Learn/Common_questions/Upload_files_to_a_web_server
---
<div class="summary">
<p>Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).</p>
</div>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые знания:</th>
<td>
<p>Вы должны знать <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">что такое веб-сервер</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">как работают доменные имена</a>. Также вы должны знать, <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">как установить базовую среду</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">как написать простую веб-страницу</a>.</p>
</td>
</tr>
<tr>
<th scope="row">Цель:</th>
<td>
<p>Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools).</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Сводка">Сводка</h2>
<p>Если вы создали простую веб-страницу (для примера смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.</p>
<h2 id="SFTP_Безопасный_Протокол_Передачи_Файлов">SFTP (Безопасный Протокол Передачи Файлов)</h2>
<p>Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать <a href="https://filezilla-project.org/">FileZilla</a>, тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки <a href="https://filezilla-project.org/download.php?type=client">FileZilla downloads page</a>, нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.</p>
<div class="note">
<p><strong>Примечание</strong>: Конечно, есть много других вариантов. Смотрите <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> для других способов.</p>
</div>
<p>Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
<h3 id="Вход_в_систему">Вход в систему</h3>
<p>В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией "Example Hosting Provider", чьи URL адреса выглядят следующим образом: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
<p>Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:</p>
<blockquote>
<p>Поздравляем с созданием аккаунта на сервисе "Example Hosting Provider".</p>
<p>Ваш аккаунт: <code>demozilla</code></p>
<p>Ваш сайт доступен по адресу:</p>
<p><code>demozilla.examplehostingprovider.net</code></p>
<p>Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:</p>
<ul>
<li>SFTP сервер: <code>sftp://demozilla.examplehostingprovider.net</code></li>
<li>Имя пользователя: <code>demozilla</code></li>
<li>Пароль: <code>quickbrownfox</code></li>
<li>Порт: <code>5548</code></li>
<li>Для публикации в интернет, поместите ваши файлы в папку <code>Public/htdocs</code> .</li>
</ul>
</blockquote>
<p>Давайте сначала посмотрим на <code>http://demozilla.examplehostingprovider.net/</code> — как вы можете видеть, то здесь пока ничего нет:</p>
<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
<div class="note">
<p><strong>Примечание</strong>: В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by [Hosting Service].”</p>
</div>
<p>Чтобы подключить SFTP клиент к удалённому серверу, выполните следующие действия:</p>
<ol>
<li>Выберите <em>File > Site Manager...</em> в главном меню.</li>
<li>В окне <em>Site Manager</em>, нажмите кнопку <em>New Site</em>, затем введите название сайта как <strong>demozilla</strong> в предоставленном месте.</li>
<li>Укажите SFTP-сервер вашего хоста в предоставленном поле: Host.</li>
<li>В раскрывающемся списке <em>Logon Type: </em>выберите <em>Normal</em>, затем введите предоставленные имя пользователя и пароль в соответствующие поля.</li>
<li>Введите правильный порт и другую информацию.</li>
</ol>
<p>Ваше окно должно выглядеть как показано ниже:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
<p>Теперь нажмите <em>Connect</em> для подключения к SFTP-серверу.</p>
<p>Примечание: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.</p>
<h3 id="Здесь_и_там_локальный_и_удалённый_просмотр">Здесь и там: локальный и удалённый просмотр</h3>
<p>После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):<img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
<p>Давайте посмотрим, что вы видите:</p>
<ul>
<li>По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, <code>mdn</code>).</li>
<li>По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: <code>users/demozilla</code>)</li>
<li>Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.</li>
</ul>
<h3 id="Загрузка_на_сервер">Загрузка на сервер</h3>
<p>Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: <code>Public/htdocs</code>." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши <code>index.html</code> , откуда ваши файл и другие активы будут отправлены.</p>
<p>После того, как вы нашли правильный удалённый каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.</p>
<h3 id="Как_узнать_что_они_online">Как узнать, что они online?</h3>
<p>Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, <code>http://demozilla.examplehostingprovider.net/</code>) в вашем браузере:</p>
<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
<p>И вуаля! Наш сайт работает!</p>
<h2 id="Rsync">Rsync</h2>
<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p>
<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p>
<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>
<ul>
<li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li>
<li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li>
<li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li>
<li><code>x.x.x.x</code> is the IP address of the remote server.</li>
<li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li>
</ul>
<p>You'd need to get such details from your hosting provider.</p>
<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>
<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p>
<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>
<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>
<h3 id="Rsync_GUI_tools">Rsync GUI tools</h3>
<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p>
<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p>
<h2 id="GitHub">GitHub</h2>
<p>GitHub allows you to publish websites via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages).</p>
<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p>
<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p>
<h2 id="Other_methods_to_upload_files">Other methods to upload files</h2>
<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p>
<ul>
<li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li>
<li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li>
</ul>
|
