Github & Netlify 사용해보기 1편

 

 

Netlify와  Github를 이용한 웹 배포하기 1편

 

 

 

넷트리파이와 깃허브를 이용해서 쉽게 웹앱을 인터넷에 배포하는 방법을 활용해봅시다.

웹을 통해 내가 만든 간단한 서비스라도 공유하려면 도메인, 호스팅은 기본이고, 

잡지식이 필요한데, 다 귀찮다하시는 나같은 게으름뱅이 유목민에게는 유용한 방법이라 생각이 듬.

 

 

 

먼저 깃허브 세팅을 진행하는 것부터 시작합니다. 

아시는 분들 or 이미 세팅된 분들은 Skip

1편은 초보자 분들만 참고하세요. 

 

 

 

 

[Ready] 먼저, 깃허브에 계정이 있다는 전제하에 진행합니다. 없으신 분들은 미리 만드세요.

그리고,프로젝트에 사용할 "repository" 를 하나 생성해둡니다.

https://github.com/

 

GitHub: Let’s build from here

 

 

 

 

1. Git 사이트 방문 / 다운로드 클릭!

 위의 깃허브 사이트와는 다른 곳입니다.

 내 컴퓨터에 깃을 설치하는 과정입니다.

 

https://git-scm.com/

Git

 

 

 

 

 

 

 

 

2. 다운로드 (윈도우즈), 각자 OS에 맞게 선택!

 

 

 

3. 64-bit Git for Windows Setup 다운로드 (각자 컴퓨터 시스템에 맞게 선택)

 

 

 

 

4. Git 설치 후, Git Bash 실행

 

윈도우 시작에서 "Git Bash"를 실행합니다.

 

아래와 같이 커맨드창에 각각  넣어주고 enter 해줍니다.

 

사용자 이름과 이메일을 입력, 설정하는 과정입니다.

git config --global user.name "davelee"

git config --global user.email "davelee.meta@gmail.com"

git config --list

 

이런 리스트를 확인할 수 있습니다.

그 중에서 user.name 과 user.email 부분이 제대로 적용되었는지만 확인해봅니다.

 

 

 

 

 

5. 깃허브에 레포지토리에 들어가, 아래 내용을 참고하여 진행합니다

    차례대로 진행해봅니다.

 

   꼭 똑같이 할 필요는 없지만 깃허브에 새 레포지토리를 만들면 실행해야하는 부분이며,

   그 순서대로 진행합니다.

   그 전에 웹에 올리고싶은 파일을 하나 만들어서 테스트해봅니다.

   아래 처럼 html파일을 하나 만듭니다. 

   만드는 방법은 vsCode, 메모장, 뭐든 사용해도 됩니다만...

 

 

 

6. html 파일을 하나 만듭니다 (VS Code 예시)

• 아래 처럼 만들어서 index.html 로 저장해둡니다. plizm폴더 (개인마다 각자)를 하나 생성해서 프로젝트를 관리합니다.
• 하단 탭에서 Terminal 창을 엽니다.
• 터미널 탭을 선택하고, 우측 +버튼 옆 드롭다운 메뉴를 클릭하여 "Git Bash"를 선택해주면 
• 좌측 화면이 아래와 같이 바뀔겁니다. 

 

 

 

 

 

 

 

7. 깃 초기화 세팅을 합니다

• 아래 구문을 터미널 창에 입력합니다.
• git init

 

• 아래 경로가 보여지며, 깃 초기화 세팅이 되었음을 알려줍니다.

 

• 윈도우 탐색기로 폴더에 보면, "plizm"폴더에 "html"파일이 있고, ".git"이라는 폴더가 생성된 걸 확인할 수 있습니다.

 

 

 

 

 

7. 깃에 파일을 추가합니다

• 계속해서 , 아래 구문을 입력합니다. 

git add .

 

 *add 다음에  space 가 있고, 다음에 . 입니다.  (. 은 all 모든 파일을 말합니다 : 모든 파일을 올리겠다)

  혹은  index.html 파일만 올리고 싶다면 해당 파일명을 입력합니다.

 

 

• 아래 구문을 입력하여, 추가한 파일을 확인합니다.

 

git status

 

 

이 상태는 웹상에 올렸다는 뜻이 아니고, 

내 컴퓨터의 .git 에 추가했다는 뜻입니다.

 

 

 

 

 

8. 히스토리를 만들어줍니다

    커밋을 통해 우리가 만든 html파일을 계속 업데이트할 수 있게 됩니다. 

    네가 수정한 파일을 업데이트한다고 보면됩니다.

    그 첫 번째 커밋을 진행하는 것입니다. 

    "first commit"이라는 메시지를 포함하여 커밋한다는 뜻입니다.

    "1 file changed" 라고 변경되었다고 나타내주고 있습니다.

git commit -m "first commit"

 

   여기서도 마찬가지로 웹상에 커밋했다는 뜻이 아니고,

   내 컴퓨터에서 웹으로 올리기 위한 준비를  git에게 했다는 뜻입니다.

 

 

 

 

 

9. 내 깃 레포지토리와 연결해줍니다.

 

    아래 구문을 입력합니다.

git remote add origin https://github.com/nomadicages/plizm.git

 

 

 

    뒤에 붙은 주소는 자신의 깃허브 레포지토리 주소입니다.

    말 그대로 이제부터 내 컴퓨터의 .git과 웹의 깃허브 주소와 연결했다는 뜻입니다. 

    일단 실행해보면 아무일도 일어나지 않습니다.

    아래 구문을 입력하여 확인해봐야 알 수 있습니다.

git remote -v

 

 

   

 

 

 

 

10. 내 깃 레포지토리에 올려줍니다.

 

•    아래 구문을 입력합니다.

git push origin master

 

    이제 진정 내 컴퓨터의 .git에서 웹의 깃허브에 올리는 것을 의미합니다.

    아래 창이 뜨면 브라우저로 로그인을 선택합니다. (아마 로그인 된 상태에서는 이런 창은 pass 할 겁니다)

 

 

•     아래 창이 뜨면 로그인합니다

•     아래 창이 뜨면 깃 에코 시스템 인증합니다

 

 

•    인증 확인

 

 

•     깃 로그인 상태 확인이 되면, 아래 처럼 제대로 올라갔다고 보일겁니다.

 

 

 

 

•   내 깃 레포지토리에 가서 화면을 리프레쉬 합니다.

         index.html 파일이 잘 올라간 것을 확인할 수 있습니다.

 

 

 

 

11. 내용 수정했을 경우, 파일 업데이트 하기

 

   이제 처음 내가 만든 html파일을 깃허브에 올렸으며, 

   앞으로 뭔가 수정하고 업데이트하려면 어떻게 하는 지를 간략히 보여줍니다.

 

 

•    먼저 아래 구문을 입력해서 깃 (내컴)에 추가해주고

git add .

 

 

 

 

 

 

•    커밋할 히스토리를 만들어줍니다.

       "second commit" 라고 메시지를 적어줍니다.

git commit -m "second commit"

 

 

 

 

 

•      이제 깃 (허브)에 푸쉬로 올려줍니다.

git push origin master

 

 

 

    

 깃허브의 레포지토리를 리프레쉬하면 다음과 같이 second commit이 진행된 것을 확인할 수 있습니다.

 

 

 

 

  index.html 파일을 선택해보면 코드를 확인할 수 있습니다.

 

 

 

 

 

*정리해보면, 수정하여 업데이트하는 순서는 다음과 같습니다.

 

1) git add .    : 내 컴의 깃에 모든 파일을 추가하겠다.

2) git commit -m "second commit"     :  "두번째 커밋"이라는 메시지를 포함하여 커밋하겠다.

3) git push origin master     :  이제 파일을 마스터에 업데이트 하여 실제로 커밋 진행하겠다.

 

 

 

참고!

혼자서 작업하더라도 바로 master에 올리는 것은 위험할 수 있습니다.

물론 back up  파일이 있으면 큰 문제가 없겠지만, 그렇지 않다면 바로 웹 페이지에 적용되어 

문제가 있었을 경우에 그 것이 해결되는 동안 사이트가 제대로 보이지 않을 수도 있는 것입니다.

그래서 보통 팀작업이라 간주하고, branch 를 참여자 인원별로 추가하고(나 자신도 참여자라고 가정하여), 커밋 허락에 대한 master의 확인과 승인을 통해서만 업데이트 할 수 있도록 제한을 걸어놓습니다. 이는 깃허브 사이트에서 설정을 해두면 됩니다.

 

 

 

 

 

 

To be continue