How do you upload files to a web server?

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

본 글은 어떻게 FTP 도구를 사용하여 사이트를 발행(publish) 할 수 있는지를 다루고 있습니다.

선행조건:

먼저 웹 서버가 무엇인지(what a web server is)와 어떤 식으로 도메인이 작동하는지(how domain names work)를 알아야 합니다. 더불어 어떻게 기본 환경을 구성하는지(set up a basic environment)와 간단한 웹 페이지 작성법(write a simple webpage)을 알고 있어야 합니다.

목표: FTP를 이용해 파일들을 서버에 올리기.

개요

당신은 이미 간단한 웹 페이지를 만들었습니다.(you have built a simple page 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 FTP를 통해 다뤄보고자 합니다.

따라해보기

아직 좋은 예제가 없습니다. 누군가 나서 주세요(Please, consider contributing).

깊이 파보기

FTP 클라이언트와 함께 해보기: FireFTP

세상에는 다양한 종류의 FTP 클라이언트들이 있습니다. 본 문서에서는 FireFTP를 다룰 겁니다.  FireFTP는 파이어 폭스에서 다루기 쉽습니다. 만약 파이어폭스를 사용하신다면 FireFTP 애드온 페이지(FireFTP's addons page) 에 가셔서l FireFTP를 설치하시면 됩니다.

물론 FireFTP 외에도 수 많은 대안이 있습니다. 관심이 있다면 퍼블리싱 도구: FTP 클라이언트(Publishing tools: FTP clients) 항목을 참조하시면 되겠습니다.

Open FireFTP in a new tab. Two ways to do so in Firefox:

  1. Firefox menu Developer ➤ FireFTP
  2. Tools Web Developer ➤ FireFTP

Now you should see something like this:

FireFTP : the interface, not connected to a server

Logging in

For this example, we'll suppose that our hosting provider (the service that will host our HTTP web server) is a fictitious company "Example Hosting Provider" whose URLs look like this: mypersonalwebsite.examplehostingprovider.net.

We have just opened an account and received this info from them:

Congratulations for opening an account at Example Hosting Provider.

Your account is: demozilla

Your website will be visible at demozilla.examplehostingprovider.net

To publish to this account, please connect through FTP with the following credentials:

  • FTP server: ftp://demozilla.examplehostingprovider.net
  • User: demozilla
  • Password: quickbrownfox
  • To publish on the web, put your files into the Public/htdocs directory.

Let's first look at http://demozilla.examplehostingprovider.net/ — as you can see, so far there is nothing there:

Our demozilla personal website, seen in a browser: it's empty

Note: Depending on your hosting provider, most of the time you'll see a page saying something like “This website is hosted by [Hosting Service].”

To connect your FTP client to the distant server, press the "Create an account..." button and fill in the fields with the information furnished by the hosting provider:

FireFTP: creating an account

Here and there: local and remote view

Let's now connect with this newly-created account:

The FTP interface, once logged

Let's examine what you're seeing:

  • On the left, you see your local files. Navigate into the directory where you store your website (in this case, mdn).
  • On the right, you see remote files. We are logged into our distant FTP root (in this case, users/demozilla)
  • You can ignore the bottom zone for now. It's a live log of every interaction between your FTP client and the server.

Uploading to the server

As you remember, our hosting provider told us that our files have to be stored in the Public/htdocs directory, so navigate there in your right pane:

Changing to the htdocs folder on the remote server

Now, to upload your files to the server, drag-and-drop them from the left pane to the right pane:

The files show in the remote view: they have been pushed to the server

Are they really online?

So far, so good, but double-check by going to http://demozilla.examplehostingprovider.net/ in your browser:

Here we go: our website is live!

Andvoilà ! Our website is live!

Other methods to upload files

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

  • Web interfaces. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
  • GitHub (advanced). Upload through git with a combination of commit/push methods. See our Publishing your website articles from our Getting started with the Web guide.
  • Rsync (advanced). A local-to-remote file synchronizing system.
  • WebDAV. An extension of the HTTP protocol to allow more advance file management.

Next steps

Well done, you're almost finished. The last important task is to make sure your web site is working properly.

문서 태그 및 공헌자

 이 페이지의 공헌자: kuil09
 최종 변경: kuil09,