[웹개발] 웹 호스팅으로 내 웹을 올려보자! (1) : 웹 페이지 올리기 (feat. 카페24)

* 개인적인 공부 내용을 기록한 글입니다.

---

웹 호스팅으로 내 웹을 올려보자! (feat. 카페24)

 

 

개발을 독학하면서 가장 궁금했던건 그래서 이걸 어떻게 웹에 띄우지? 였다.

웹 호스팅, 서버 호스팅... 말로만 들어봤지 직접 해본 적은 한번도 없었기 때문에 뭔지 모를 두려움을 갖고 있었다.

호스팅 서비스를 이용하면 된다던데, 페이지는 파일을 올리면 된다치고, 그럼 DB는 어떻게 띄우지? 같은 의문도 있었다.

 

최근 우연히 계기가 생겨 그래 까짓꺼 한번 직접 해보자! 하는 마음으로 웹 호스팅을 사용해봤다.

그리고 알게된 사실은... 겁 먹었던게 무색할 정도로 정말 쉽고 간편하게 만들어진 서비스라는 점이었다!

 

그래서 이번 포스팅에서는 누구나 쉽게 따라할 수 있는 웹 호스팅 사용 방법을 정리해보고자 한다.

---

전제

 

1. 당연하지만 개발이 끝난 .html, .php 등의 파일이 있어야한다.

2. 이 포스팅은 Windows10 기준으로 작성되었다.

---

순서

 

[이번 포스팅]

1. 웹 호스팅 업체 선정

2. 웹 호스팅 신청

3. FileZilla 설치

4. 웹 올리기

 

[다음 포스팅]

5. 웹 서버에 PhpMyAdmin 세팅

6. 웹 서버의 DB에 접근하기

---

1. 웹 호스팅 업체 선정

 

 

가장 먼저, 호스팅 업체를 선정하여야 한다.

웹 호스팅 업체는 구글링을 통해 쉽게 찾아볼 수 있다.

다음은 2021 호스팅 업체 순위를 정리한 블로그 포스팅이다.

https://better-together.tistory.com/219

2021 호스팅 업체 순위(ft. 도메인으로 호스팅 업체 검색)

뭐 다 장단점이 있겠지만...

일일이 찾아보는 것도 피곤하고 가격대도 비싸봤자 만원 이내인 것 같아서

가장 시장점유율이 높고 어디서 많이 들어본 듯 낯익은 카페24를 택하게 되었다.

---

2. 웹 호스팅 신청

 

 

카페24를 예시로 웹 호스팅 신청 과정을 정리해보겠다.

다른 업체도 크게 다를건 없을 것 같다.

---

[1] 카페24 홈페이지에 들어간다. → https://www.cafe24.com/

[2] 네비바 호스팅 > 웹 호스팅 클릭

---

[3] 호스팅 페이지에 들어오면 스크롤을 내린 후 웹 호스팅을 클릭한다.

---

[4] 네비바 웹 호스팅 > 10G 광호스팅 클릭

* 회원가입 후 로그인 상태에서 진행한다.

---

[5] 상품 종류를 확인할 수 있다.

* 자신에게 맞는 상품을 택한 후 신청하기를 누른다.

* 나는 실사용 목적이 거의 없었기 때문에 가장 저렴한 절약형을 선택했다. (가격은 설치비+월사용료=5500원)

---

[6] 신청 폼을 작성한다.

* 신청 아이디는 기본 도메인에 들어가게 된다. (ex. apple → www.apple.cafe24.com)

* FTP, SSH, DB 비밀번호는 말그대로 해당 기능을 사용할 때 입력해야하는 비밀번호가 된다.

* 기입이 끝나면 다음으로 진행한다.

---

[7] 신청 기간, 서버 환경, 도메인 등을 선택한다.

* 기간 만료가 되면, 사이트는 차단되지만 자료는 2달 간 남아있게 된다. (만료 후 2달 이내 연장 신청이 가능하다.)

* PHP 버전은 개발 시 사용한 버전에 근접하게 맞춰주면 된다.

* 프로그램 자동 설치는 웹 서버에 파일을 업/다운로드 하는데 사용되는 프로그램을 말한다. 이 포스팅에서는 자동으로 깔리는 프로그램 말고 더 간편하게 사용할 수 있는 프로그램을 사용할 것이기 때문에 그냥 패스해준다.

* 나는 무료 도메인을 사용했지만, 원한다면 나만의 도메인을 만들 수도 있다. (유료)

* 다음으로 진행하면 신청이 완료된다.

---

[8] 신청이 완료되면, 다시 메인페이지로 돌아온 후 네비바 나의 서비스관리 > 호스팅 관리를 클릭한다.

---

[9] 호스팅 관리로 들어오면 다음과 같은 화면을 볼 수 있다.

---

[10] 좌측 네비바 스크롤을 내려 서비스 접속관리 > 서비스 접속정보를 클릭한다.

---

[11] 해당 메뉴로 들어오면, FTP/SSH 및 DB 접속 정보를 확인할 수 있다.

---

여기까지 왔다면 기본 세팅은 끝이다!

다음은 프로그램을 이용해 내 웹을 준비된 웹 서버에 찔러넣는 과정을 다뤄보겠다.

---

3. FileZilla 설치

 

 

웹 서버에 파일을 올릴 때는 CLI 상에서 작업할 수도 있지만, 영 불편한게 사실이다.

GUI 상에서 편하게 올렸다 내렸다 할 수 있게 프로그램의 도움을 받는게 현명하다.

여러가지 프로그램이 있지만, 웹 호스팅 튜토리얼에서 가장 자주 마주치게 되는 FileZilla를 사용해보도록 하겠다.

---

[1] FileZilla를 다운받아서 설치한다. → https://filezilla.softonic.kr/

* 설치 과정은 별 게 없어서 생략한다.

---

4. 내 웹 올리기

 

 

이제 방금 설치한 FileZilla를 통해서 내 웹 페이지들을 웹 서버에 올려보도록 하겠다!

---

[1] FileZilla를 실행하면 다음과 같은 화면을 볼 수 있다.

* FileZilla는 FTP 접속을 위한 프로그램이다.

* 왼쪽은 로컬 서버, 오른쪽은 리모트 서버라고 보면 된다.

---

[2] 계정 정보를 입력한 후 빠른 연결을 클릭한다.

* 호스트 : 도메인 주소

* 사용자명 : 신청 아이디

* 비밀번호 : FTP 비밀번호

* 포트 : 21

---

[3] 오른쪽에 리모트 서버의 디렉토리 정보가 뜬다.

* 나는 이미 파일을 업로드해둔 상태라 뭐가 많다.

---

[4] 이제 로컬 쪽에서 내 웹 파일들을 찾아서 리모트 쪽으로 드래그 해주면 끝이다.

* 리모트의 웹 루트는 /www/ 이다. 여기에 index.html 파일을 넣으면, 브라우저 주소창에 www.[도메인주소]/index.html을 입력함으로써 접근할 수 있다.

* 리모트 쪽에서 로컬 쪽으로 파일을 드래그하면 다운로드도 가능하다.

---

[5] www.[도메인주소].cafe24.com/[파일명] 으로 접속한 모습이다.

* 리모트 서버에 업로드한 /www/[파일명] 가 뜨게 된다!

---

[6] 여기까지 성공했다면 웹 올리기는 끝났다!

* 외부 네트워크에서도, 핸드폰에서도 문제 없이 접속할 수 있다! 이제 사이트 주소를 다른 사람에게 알려줄 수도 있고 웹앱을 만들어볼 수도 있다.

---

이번 포스팅에서는 웹 서버에 내가 만든 웹 페이지를 올리는 방법에 대해 다뤄보았다.

다음 포스팅에서는 웹 서버의 DB에 접근하는 방법에 대해 다뤄보도록 하겠다!