안녕하세요 위오의 배배입니다.
이번에는 이름궁합 테스트가 어떻게 어디서 서비스되고 있는지 공유드릴껀데요,
저희 이름궁합 테스트는 정적 웹호스팅 기업인 Netlify를 사용하고 있습니다.
따라서 이름궁합 테스트의 도메인에 netlify를 확인하실 수 있는데요.
도메인을 따로 구매하지 않고 사용하기 때문에 그렇습니다!(추후 변경할 예정이예요!)
https://namelovetest.netlify.app
2022.11.24 기존 사용하던 Netlify -> AWS 로 서버이전하였습니다 :)
(2023.05.01, 위오 공식 서비스 오픈)
위오
우리들의 감성 플랫폼 - WIO
wiodaily.com
Netlify에서 정적 웹페이지를 어떻게 배포하는지 알아보기 전에!
개인 사용자 및 소규모 업체가 사용하기에 적합한 호스팅 방법은 무엇인지 먼저 알아봅시다!
웹 페이지를 띄우기 위해선 반드시 서버가 필요합니다, 서버를 구축한다! 라고하면 사실 장비부터 시작해서 인프라 등 다양한 부분에서 신경쓸께 많고 그보다 돈이 많이 든다는 문제점이 있습니다.
그럼 개인이나 소규모 기업은 웹페이지를 만들 수 없을까요?
그래서 등장한 개념이 호스팅이라는 개념입니다.
서버를 직접 구축하는 것이 상가 빌딩을 새로 짓는 개념이라고 하면,
호스팅은 상가 혹은 빌딩을 임대하는 것이라고 할 수 있습니다~
(클라우드는 AWS이전시 따로 포스팅 하겠습니다.)
저희가 사용한 Netlify의 경우 웹호스팅 업체인데요, 웹호스팅은 서버 전체를 임대하는 것이 아닌 웹페이지를 띄울 수 있는 서버의 일부만을 임대하여 사용하는 것입니다! 매우 편한 것은 웹페이지를 띄우기 위해서 저희가 설치 및 구성해야할 웹서버 설치, HTTPS 세팅 등 모든 것이 이미 이루어져 있다는 것인데요, 저희 이름궁합 테스트의 경우에도 배포된 디렉토리만 업로드하여 간단하게 배포를 진행하고 있습니다.
하지만! 이말은 반대로, 사용하고있는 서버의 OS에 접근할 수 없어, 환경변수나 디렉토리 구조 및 떠있는 웹서버 등 많은 부분에서 접근이 불가하다는 의미이기도 한데요, 실제로 이름궁합 테스트를 운영하면서 간헐적으로 끊기는 현상이나 디렉토리 구조 등 확인할 수 없어 답답한 경우가 있기도 하였습니다.
(전혀 문제될께 아닐 수 있지만 서버에 접근하여 모든 걸 확인하고 싶은 제 욕심이기도 합니다.. ㅎㅎ)
그렇다고 해도, Netlify에서 여러 기능이나 Plugin들을 잘 지원해주기 때문에 충분히 원할하게 운영 가능하다는 점 참고 부탁드립니다.
자 이제! Netlify를 사용하여 우리가 만든 웹페이지를 간단하게 배포하는 과정을 살펴보겠습니다!
1. netlify 서비스를 이용하기 위해 사이트에 방문해줍니다!
Netlify: Develop & deploy the best web experiences in record time
A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!
www.netlify.com
2. netlify에 가입해줍니다! (git계정과 연동하면 편리합니다!)
3. Netlify에 가입이 완료됬으면 사실 준비는 다 됬습니다 ㅎㅎ!
사이트를 업로드 하는 방법은 다양합니다!
1. Git repository를 연동하여 push 배포
2. 폴더를 직접 드래그 앤 드롭으로 배포
3. Netlify에서 제공하는 템플릿 배포
저희 이름궁합 테스트에서 사용하고 있는 방법은 Git repository와 netlify연동하여 git push하는 것으로 자동으로 배포되는 아주 편리한 방법을 사용하고 있습니다.ㅎㅎ
(이 방법에 대해서도 다뤄보겠습니다!)
4. 자, 그럼 저희는 폴더를 직접 드래그 앤 드롭하여 웹 페이지를 간단하게 띄워봅시다!
sites 카테고리로 이동하여 웹페이지가 코딩된 폴더를 페이지로 직접 올려주면 되는데요,
우선 간단하게 예시 파일을 만들어 봅시다.
메모장을 키신 후, 아래 코드를 복사하여 붙여넣기해주세요!
그리고 index.html로 저장하면 끝입니다!
-------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Intro</title>
</head>
<body>
<h1>hello, i am baebae</h1>
</body>
</html>
-------------------------------------------------------------------------------------------------
여기서 중요한 것은!!
1 Depth 에 index.html 파일이 있어야한다는 것입니다.
업로드 시킬 최상단 폴더의 이름은 전혀 중요하지 않은데요, 예를 들어
namelovetest/index.html
alalal/index.html
asdasd/index.html 와 같은 구조는 모두 정상적으로 배포될 것 입니다.
그렇지 않고,
namelovetest/namelovetest/index.html
namelovetest/moon/sun/index.html 처럼 index.html이 위치한 폴더의 구조가 2 depth 이상이라면
netlify가 index.html 파일을 읽지 못해서 오류가 나게 됩니다, 주의하세요!
자 이렇게 index.html파일을 저장한 폴더를 드래그하여 드롭해주면!!!
5. 폴더를 드롭 하자마자 deployed된 모습을 확인하실 수 있으실 겁니다.
6. 드롭한 직후는 Netlify에서 자동으로 지정된 도메인을 변경해줍니다.
Domains> Custom domains> Option> Edit site name 에서 원하는 도메인으로 바꿔주면!!
netlify에서 제공하는 무료 도메인의 경우에는 지정한 이름 뒤에 .netlify.app이 자동으로 붙는다는 사실 잊지 마세요!~
(저는 wiowio로 바꿔주겠습니다 ㅎㅎ)
7. 두둥, 순식간에 저만의 웹 페이지 탄생입니다!
네, 여기까지가 Netlify의 무료 호스팅을 사용하여 웹페이지를 직접 배포하는 과정까지 함께 해봤습니다.
사실 간단하다면 간단한 과정 속에서 우리가 이해해야할 부분은 굉장히 많은데요,
서버 관련해서는 이 포스팅을 시작으로 지속적으로 업로드 예정이니 함께 해주시길 부탁드립니다 ㅎㅎ
제가 전문적인 기술자는 아니다 보니 기술적인 측면도 부족하고 많은 정보가 있는 것은 아닙니다만,
앞으로 프로젝트를 해나가면서 저에게 필요한 기능들을 어떻게 구현했는지가 포스팅의 중심이 될 것 같습니다 !_!
많은 관심 부탁드립니다.
배배였습니다.
'위오의 서버 및 개발환경' 카테고리의 다른 글
| flutter, vs code에서 구동하기! - [위오의 서버 및 개발환경] (4) | 2022.05.31 |
|---|---|
| 최신! AWS Route53 도메인 구매 방법 및 후기! - [위오의 서버 및 개발환경] (2) | 2022.05.28 |
| Window 10에서 Node.js 설치하기! - [위오의 서버 및 개발환경] (2) | 2022.05.19 |
| Window 10에서 Visual Studio Code 설치하기! -[위오의 서버 및 개발환경] (2) | 2022.05.19 |
| Window 10 에서 git, git bash 설치하기! - [위오의 서버 및 개발환경] (2) | 2022.05.18 |
댓글