무료 html 배포 - mulyo html baepo

React 앱을 배포하는 것은 일반적은 HTML, CSS 파일을 배포하는 것과는 사뭇 다릅니다.

보통 npm을 이용하여 모듈을 설치하고 빌드하고 배포하는 식의 과정을 거칩니다.

React 앱을 무료로 배포하고 이용할 수 있는 서비스 10가지를 소개합니다.

Vercel

https://vercel.com/docs

Vercel은 예전에는 ZEIT라고 알려졌던 서비스로 React, Angular, Vue 등을 위해 설계된 혁신적인 배포 서비스.

Vercel을 사용하여 GitLab 또는 Bitbucket에서 프로젝트를 쉽게 가져올 수 있음.

자동 SSL 가능.

Firebase

https://firebase.google.com/

Firebase는 애플리케이션을 개발하고 확장할 수 있는 통합 플랫폼.

호스팅뿐만 아니라 인증, Cloud Firestore, 클라우드 등 수많은 기능 제공.

Netlify

https://www.netlify.com/

GitHub, GitLab 및 Bitbucket에서 프로젝트를 쉽게 가져올 수 있고 

JAM stack(Javascript 와 API 그리고 Markup 으로 구성된 최신 웹 사이트를 구성하는 방법)을 구성할 때 많이 사용.

GitHub Pages

https://pages.github.com/

GitHub Pages는 가장 쉽고 널리 쓰이는 방법 중의 하나.

GitHub Action과 함께 사용하면 배포나 빌드를 자동화할 수 있음.

Heroku

https://www.heroku.com/

2007년 출시 이후 꾸준히 인기 있는 플랫폼.

Go, Node.js, Clojure 등 대부분의 언어 지원

Surge

https://surge.sh/

가장 빠르게 배포할 수 있는 서비스 중의 하나

Command Line 모드로 계정 생성부터 시작 가능

Render

https://render.com/

Disrupt SF 2019의 Startup Battlefield 에서 우승한 플랫폼

사이트 호스팅은 무료이나 Cron, Docker 등을 이용할 때는 비용 지불.

Roast

https://www.roast.io/

단일 페이지 애플리케이션(SPA)를 만드는데 적합한 플랫폼.

설정이 쉽고 문서가 간결함

Moovweb XDN

https://developer.moovweb.com/guides/overview

개발, 배포, 모니터링, 실행 등의 통합 플랫폼

기본적인 기능들 무료로 사용 가능

GitLab Pages

https://docs.gitlab.com/ee/user/project/pages/

정적인 페이지를 호스팅하고자 한다면 GitLab Pages를 사용하면 됨.

도메인 연결이나 TLS 인증 가능

조코딩 유튜브를 통해 개인적으로 실습한 내용을 정리한 것입니다.

HTML 진짜 기초 밖에 모르지만,

도메인으로 구현되는 것을 보니 진짜 신기하네요!!

이 유튜버 분은 정말 쉽고, 코딩에 흥미를 가질 수 있게 가르쳐 주는 것 같아요.

이 내용을 보기 전에 HTML에 대해 전혀 모르신다면,

제 이전 블로그 글과 조코딩 유튜브 영상들을 확인해주세요!

내가 만든 사이트를 인터넷에 공개하는 방법 2가지

1. 내 컴퓨터를 서버로 만드는 법

2. 외부 서버를 이용하는 법 (웹호스팅)

💻내 컴퓨터를 서버로 만드는 법
인터넷에 내 IP주소를 알리는 방법

개인 컴퓨터를 공개하는 것이기에 보안 취약

사람들이 언제나 접속하게 하려면 24시간 내 컴퓨터 가동 필요

유지비용이 많이 들기 때문에 보통은 이런 방법으로 하진 않겠죠..?

💻외부 서버를 이용하는 방법

큰 기업이 운영하는 자체 서버실의

서버 일부를 빌려서 내 HTML 파일을 배포

이러한 외부 서버를 활용하는 방식을

웹 호스팅 or 클라우드 서버

라고 합니다.

간혹 아마존과 같은 큰 기업에서도 서버 관리에 문제가 생기기도 하는데,

그래도 개인 컴퓨터를 사용하는 것보다 훨씬 안전한 방식.

💻웹 호스팅 (클라우드 서버) 제공 업체

Amazon(클라우드 업계 1위이나 요금이 비싼 편)

Microsoft Azure, GoDaddy, Google Cloud, netlify 등

다양한 서비스가 있습니다.

이 중 코딩 공부를 위해 사용할 업체는

netlify입니다.

netlify는

일단 무료이고

편리하고 다양한 부가기능을 제공하며

초보에게도 쉬운 구성으로

이루어졌다고 합니다.

💻netflify 이용해 내 사이트 배포해보기

1) html free template 다운받기
2) html 코드 수정하기
3) netlify.com을 이용해 배포하기

순으로 진행하겠습니다.

먼저, 이 실습을 위해서는 HTML파일이 필요합니다.

지금은 만들어 둔 것이 없기 때문에,

HTML 템플릿을 다운 받아 연습해보겠습니다.

1) html free template 다운받기

구글 검색창에 'html free template' 검색

아무 사이트나 들어가셔서

원하는 템플릿을 다운 받아주시면 됩니다.

제가 연습용으로 파일을 다운 받은 사이트는

https://www.free-css.com/free-css-templates

이곳 입니다.

다운을 받아 압축을 풀면 파일들이 많이 있습니다.

이때, 무료로 변경 및 배포가 가능한 파일인지,

상업적 이용이 가능한지 등

저작권 관련 파일에 명시되어 있으니 꼭 확인해보세요!

2) HTML코드 수정하기

그리고,

'index.html' 파일을

VScode같은 코드 편집기로 열어줍니다. 

(그냥 클릭해서 열면 웹페이지 형태가 나옵니다)

자신의 콘텐츠로 내용을 수정하면 됩니다.

일단은 제목만 바꿔보겠습니다.

제목만 바꾸기 위해서는

HTML창에서 '제목' 태그가 어디있는지

바꾸고자 하는 요소가 HTML로 어떻게 쓰였는지 알아야합니다.

코딩 언어를 공부 많이 공부하면 자연스럽게 읽히겠지만, 처음에는 어렵겠죠?

이때, 개발자 도구를 이용해 쉽게 찾을 수 있습니다.

다운받은 템플릿의 index.html 파일을 열고,

F12 키나 오른쪽 마우스 클릭 후 '페이지 소스보기'를 눌러서

HTML 코드가 보여지는 개발자 도구를 엽니다.

위의 이미지에 표시한대로 바꾸고자 하는 (저는 제목 부분) 요소의

태그를 찾으시면 됩니다.

저는 VScode를 이용해 연 index.html 파일에서

저렇게 '템플릿으로 코딩 연습하기'로 제목을 바꿔주었습니다.

3) netlify.com을 이용해 배포하기

회원가입 후,

작업한 파일이 들어있는 폴더를 통째로 드래그합니다.

잠시 기다리면,

deploy이가 완료됩니다.

이제, 주소(도메인 네임)를 바꾸기 위해

Site settings를 클릭합니다.

Chanage site name을 클릭하고,

원하는 주소를 입력합니다.

이제 변경 된 주소로 누구나 접속할 수 있는

사이트가 생성되었습니다!

https://selfstudytest.netlify.app

저는 이렇게 해봤네요..ㅎㅎ

계속 연습하면서 수정해보도록 하겠습니다!

*링크의 유튜브 내용을 보고 독학하며 정리한 내용입니다.

자세한 내용과 영상을 보며 따라하고 싶으신 분들은 링크를 참조해주세요.

https://www.youtube.com/watch?v=LnGgndT308Q