어쨌든 우리가 앞서서 티처블머신을 통해서 이미지를 학습시키고 혹은 오디오를 학습시키고 또는 나의 포제를 학습시키는 어플리케이션을 만들어 보았습니다 어플리케이션을 만들어 따기는 좀 그렇지만 학습시킨
모델을 만들어 봤다고 할 수 있겠죠 하지만이 모델을 익스포트 했을 때 자바스크립트 파일로 쉽게 생성된 것을 확인을 할 수가 있었습니다 우리는이 자바 스크립트 파일을 잔잔한 html5 파일에 집어넣으면
나만의 왜 어플리케이션이 완성되었는데요 웹 어플리케이션 완성된 것을 사실 나만의 브라우저에서 확인을 하는 것은 의미가 없습니다 왜냐하면 나 혼자만 있을 그것이 아닐 뿐더러 컴퓨터가 있어야지만 사용할 수
있는 단점이 있죠 그래서 우리가 기본적으로 만든 어플리케이션은 인터넷에 공개하는 것이 필요한데요 이것을 우리는 배포한다고 합니다 흔히 알 수 있듯이 브라우저 창에서 http www 이런 걸 웹
브라우저의 배포를 했다라고 할 수 있는데요
이번 이번 포스팅에서는 웹 배포 하는 방법에 대해서 알아보도록 하겠습니다 html 코드를 작성하는 것이 어려운 분들은 다양한 유튜브 채널을 통해서 html 하는 방법을 배우 셨으면 좋겠고요 기본적으로
html html 파일을 가지고 있는 분들의 대해서 조금 유익한 컨텐츠를 것 같습니다
html 파일을 배포한다는 것은 결국 정적인 페이지를 배포 한다라고 볼 수가 있구요 쉽게 말해서 온라인 상에 있는 클라우드에 나의 html 파일을 올려서 어디서든 접속할 수 있게끔 하는 것이 방법이라고
볼 수 있습니다이란 것을 포스팅 한다고 하는데 포스팅 할 수 있는 업체들은 여러가지가 있지만 우리가 무료로 사용할 수 있는 것은 바로 Netlify 에서 할 수 있습니다.
사실 외부 서버 파일을 올리는 것을 포스팅이라고 했는데요 호스팅하는 업체는 아마 많이 들어보셨을 것과 같이 아마존 웹서비스가 있고요 마이크로소프트에서는 AZure, 그리고 구글 클라우드 우리나라에 있는
카페 24 밥이야 그리고 오늘 학습해 보게될 netlify 입니다.
아마존 같은 경우는 클라우드게 업계 1위 볼 수가 있고요 장점은 보안이 아주 강하며 단점은 그만큼 비싸다는 것이 될 수 있습니다 아주 비싼 건 아니고요 조금 비싸다고 볼 수 있습니다
뭐 어쨌든 오늘은 netlify 통해서 만들어 보도록 하겠습니다
www.netlify.com에 들어가셔서 로그인을 해줍니다.로그인을 할 때는 깃허브 계정으로 로그인을 하면은 좀 더 편하게 사용을 할 수가 있습니다 이번 포스팅에서는 간단하게 html 파일을
드래그앤드롭으로 업로드를 할 예정이지만 깃허브를 조금 더 잘 사용하시는분들은 쉽게 배포가 가능합니다 왜냐하면 깃허브에 있는 레파지토리를 바로 불러올수가 있기 때문에 내가 기세 새로운 파일을 업로드를
하면 자연스럽게 netlify가 새로운 배포를 하게 되어 있습니다.
아주 유용하지 않나요
자 로그인을 하게 되면은 다음과 같은 화면이 뜨게 되는데요 여기에 New site from git 이라는 부분이 있는데 이부분을 통해서 git 과연동이 되지만,
전엔 하단에 드래그앤드롭으로 기존에 가지고 있던 프로젝트 파일을 올려 보도록 하겠습니다
올리면 자동적으로 로딩이 되면서 일정 시간 후에 업로드가 된 것을 확인할 수 있는데요 업로드가 하게 되면은 상단에 초록색으로 https라고 하는 도메인을 얻을 수가 있습니다. 이 도메인을 클릭하면 내가
만든 html 파일이 쉽게 업로드가 된 것을 확인할 수가 있죠 아주 간단하게 배포를 해 보았습니다 여러분들은 직접 Git 과 연동을 통해서 만들어 보시면 좋을 것 같습니다.
깃을 연동하는 방법은 아래와 같습니다.
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/kkongnamul11/test11.git
git push -u origin master
우선 터미널 창에 위와 같은 코드를 입력해 주시면 되고요이 코드을 입력하면 자동적으로 나의 길 레파지토리에 배포되는 것을 확인할 수가 있습니다.
추가적으로 여러분들이 웹 개발에 필요한 다양한 무료 템플릿을 제공해주는 사이트를 알려드리도록 하겠습니다
다양한 템프릿과 cSS/ Layout이 있는 사이트