---
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 &gt; 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>