닷홈을 이용한 웹 호스팅 환경 설정

1. 웹 서버 설정하기

웹 시스템 큰 그림

우리가 매일 사용하고 있는 인터넷을 구성하는 시스템을 웹 시스템(web system)이라고 한다. 이러한 웹 시스템은 아래의 그림과 같이 클라이언트(client)와 서버(server)로 구성된다.

서버란 간단히 말해 웹 서비스를 제공하는 컴퓨터를 의미한다. 클라이언트란 서버가 제공하는 웹 서비스를 이용하는 사용자 또는 사용자의 기기(브라우저)를 의미한다.

웹 서버

웹 서버는 HTTP를 통해 웹 브라우저에서 요청하는 HTML 문서나 이미지 파일 등을 전송해주는 서비스 프로그램을 말한다. 웹 서버 소프트웨어를 구동하는 하드웨어도 웹 서버라고 하기도 하지만 일반적으로 웹서버라고 하면 소프트웨어를 의미한다. 웹 서버의 주된 기능은 웹 페이지를 클라이언트로 전달하는 것이다. 주로 그림, CSS, 자바스크립트를 포함한 HTML문서가 클라이언트로 전달된다. 주로 콘텐츠를 제공하지만 클라이언트로부터 콘텐츠를 전달 받기도 한다. 이러한 기능은 파일 업로드를 포함하여 클라이언트에서 제출한 웹 폼을 수신할 때 쓰인다.

• 대부분의 웹 서버는 이러한 공통 기능을 가지고 있다.
  1. HTTP
  2. 통신 기록
• 웹 서버는 다음과 같은 기능도 제공한다.
  1. 인증
  2. 정적 콘텐츠 관리
  3. HTTPS 지원
  4. 콘텐츠 압축
  5. 가상 호스팅
  6. 대용량 파일 지원
  7. 대역폭 스로틀링

닷홈 무료 호스팅 신청

닷홈 무료 호스팅 신청

1. 회원가입

2. APM 공간 설치

2. FTP 클라이언트 프로그램 설치(Filezilla)

FTP란 File Transfer Protocol의 약자로 사용자 PC와 호스팅 서버 간의 파일을 송수신하는 프로그램을 의미한다. 파일이나 이미지 등 모두 서버로 업로드 되어야 웹이 동작하기 때문에 FTP 클라이언트 프로그램인 Filezilla client를 설치해준다. FTP 서버의 경우 이전에 신청했던 닷홈서버에서 이미 설치가 되어 있기 때문에 별도로 설치할 필요가 없다.

Filezilla client 설치

Filezilla client 사용 방법

3. 웹 에디터 설치

1. 웹 에디터로는 Visual Studio Code를 설치한다.

• 자신의 컴퓨터 OS에 맞는 버전의 VScode를 설치한다.

  Visual Studio Code 설치

2. 인코딩 설정

• 에디터의 인코딩을 UTF-8로 설정한다

• VS code에서 파일-기본설정-설정으로 들어가서 ‘encoding’이라고 검색한 후 인코딩을 UTF-8로 설정해준다

  

3. VS code Extension 설치

• HTML Snippets extension

  • HTML 태그의 자동 완성 기능을 제공한다

    

• Sftp extension

  • 로컬에서 웹페이지를 만들고 ftp 클라이언트를 이용하여 업로드 하는 과정 없이 VS code 내에서 ftp 설정 후 편집하는 즉시 ftp를 이용해서 업로드 할 수 있는 기능을 제공한다.

    

4. 작업폴더 생성

• 로컬에서 작업 후 서버에 업로드하기 위한 폴더이자 백업을 위한 폴더를 생성한다

  

• FTP를 이용해 현재 폴더와 서버를 연결하는 작업을 해준다

  • F1키 -> SFTP:Config 선택

    

  • host는 호스트 url, protocol은 ftp, port는 21, username은 ftp 아이디로 설정한 후 저장한다

    

  • SFTP:Config 설정을 완료하면 extension 아이콘 밑에 sftp 아이콘이 생성된다. My Server를 누르는 순간 ftp 암호를 입력하라고 뜨게 되는데 암호를 입력을 하면 html폴더가 생성된다. 이 폴더가 웹에서 root폴더가 된다. 따라서 모든 폴더와 파일들은 html폴더 아래에 들어가게 된다. FTP 접속이 잘 되었다면 작업폴더에서 우클릭 후 download folder를 눌러서 서버에 있는 모든 구조와 파일들을 로컬로 가져오면 된다.

    

5. index.html 파일 작성 및 업로드

• 작업폴더에서 html 폴더 아래에 index.html 파일을 생성한다. 파일 안에서 html이라고 쓰는 순간 기존에 설치했던 html snippet extension이 여러 html 템플릿을 옵션으로 주는데 그 중에 html:5 를 선택해준다.

  

• 파일을 다 작성 후 파일 이름에 우클릭 후 upload를 누르고 sftp메뉴에서 새로고침을 하면 서버에 업로드 되게 된다.

  

4. 결과

참고링크

• https://winteri-i.tistory.com/1
• https://winteri-i.tistory.com/2
• https://winteri-i.tistory.com/3