플러터 파일 깃허브에 업로드하기 (깃 설치방법, 플러터 프로젝트 올리기)

제가 처음 배우면서 배운 내용을 토대로(오류 포함) 정리한 내용입니다. 초초초초보입니다.

깃에 올리면서 겪은 내용들이 모두 들어 있습니다.

플러터에서 작업하시는 거라면 1. 깃허브 가입하시고, 레포지토리 새로 만드시고, 4번으로 넘어가세요. 그리고 플러터 터미널에서 유저 이름과 유저 이메일을 넣으시면 됩니다. 따로 윈도우에서 설치하실 필요도 없는 거 같아요. 플러터 터미널 밑에 깃 탭이 있는데 거기서 크리에이트 어쩌고를 누르면 너 컴에 깃이 설치 안되어 있다는 메시지가 뜨고, 거기서 다운로드하시고, 인식 못하면 안드로이드 스튜디오 재시작하시고, 유저 이름, 이메일 각각 입력하시면 됩니다.

질문을 남기시면 답변을 해드리겠지만 워낙 초보라서 만족스러운 답변을 못 드릴 수도 있습니다. 같이 공부하는 입장으로 봐주세요.

1. 깃 허브 가입하고, 저장소 만들기

https://github.com/

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

New를 누르고 Repository name 설정하고, 공개할지, 비공개할지 결정 후 Creatve repository 클릭

2. 깃 다운로드 후 설치하기

https://www.git-scm.com/

Git

www.git-scm.com

다운로드 클릭 후 맥인지 윈도우인지 자신의 환경에 맞게 선택 후 다운로드

자신의 윈도우 비트를 모르면 돋보기 눌러서 시스템(제어판)을 선택하면 가운데쯤 시스템 종류에 정보가 뜹니다.

설치 시 저는 모두 next를 선택했습니다.

3. 깃 환경 설정(Git Bash)

//1. 사용자 이름 설정 코드
//2. 사용자 이메일 설정(깃허브 가입 시 작성한 이메일) 코드
//3. 깃 정보 확인하는 코드
git config --global user.name "사용자 이름"
git config --global user.email "깃허브 가입 시 사용한 이메일"
git config --list

아쉽게도 복사 붙여 넣기가 안 되네요.

4. 플러터에서 Build/Flutter/Build Web

- missing index.html 오류 시

- 플러터 터미널에서 아래와 같은 코드를 하나씩 입력해서 해결하시면 됩니다. 저는 6번부터 안 했고, 7번은 위 방법으로 했씁니다. 5번을 하면 web 폴더, 리눅스 폴더 등이 생깁니다.

1. flutter channel beta
2. flutter upgrade
3. flutter config --enable-web
4. flutter devices
5. flutter create .
6. flutter run -d chrome
7. flutter build web

- 위 방법으로 안될 경우 프로젝트에 web 디렉토리를 만들고, 그 폴더 안에 indext.html 파일을 생성 후 아래 코드 입력해 보세요. 아래 코드는 제 플러터에 생성된 코드입니다. 타이틀 등 본인에게 맞도록 수정하셔야 합니다.

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="random_dice">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>random_dice</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
</body>
</html>

4. 플러터에서 build/web으로 들어가서 index.html에 아래 부분 수정

<base href="/"> 부분을 <base href="/flutter/">으로 자신의 깃허브 레포지토리 이름을 그대도 넣으면 됩니다.

5. 플러터 터미널에서 아래 코드들을 입력합니다. 두번째 'git add .'은 모든 파일을 올리겠다는 의미입니다. 일부만 올리려면 아래 예시 사진처럼 작성하시면 됩니다.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/~~~~~~~~/flutter.git
git push origin master

- 역시나 쉽게 가지 않습니다. 오류가 발생했습니다. cd build/web으로 들어가라고 한 분도 계시는데, 안되길래 터미널 밑에 있는 git 탭을 눌러봤습니다. create git 어쩌고 가 나옵니다. 그걸 누르면 제 컴에는 아직 git이 설치 안되어 있다는 메시지. 다운로드했더니 이미 넌 상위 버전이 설치되어 있는데, 이거 설치하는 게 맞냐고 뜨네요.ㅜ.ㅜ 닫기 누르고, 안드로이드 스튜디오를 다시 껐다가 켜고, 위 코드를 입력하니 뭔가 작동합니다. 아마도, 안드로이드 스튜디오가 깃을 설치한 지 인식을 못했던 거 같습니다.

- 또, 오류!! 터미널에서 니가 누구냐~?라는 질문을 계속 던지네요. 그러면서 이름과 이메일을 다시 밝히래요. 아마도 윈도우에 설치한 git과 플러터에서 인식하는 git이 다른 거 같아요..ㅜ.ㅜ 그래서 3번 과정을 다시 거쳤습니다. 그랬더니 이제야 뭔가 일을 해주네요.