Github
- Git 으로 된 프로젝트 저장 공간을 제공하고, Git을 편하게 사용 하 기 위한 여러가지 부가기능을 가짐
Sourcetree
- Git을 쉽게 사용하기 위한 도구
터미널 사용
- 터미널을 사용하여 Git을 사용하는 것도 가능 (CLI)
Git
- 형상관리 툴, 간단하게는 소스저장소
- 프로젝트의 버전 관리를 위한 도구
버전관리
- 누가, 언제, 현재상태(현재 프로젝트의 내용이 어떤 지)의
3가지 정보를 남긴다는 것 - 프로젝트 상태가 변경되는 정보를 알고 있다는 것
Git 초기화(Git initialize)
- 컴퓨터에 있는 프로젝트를 Git 이 관리하는 프로젝트로 만들기
- .git 생성 (cmd + sh + . 으로 숨김파일 확인 가능)
commit
- 현재 프로젝트 상태를 저장하고 조회하는 것
- 누가(author), 언제 commit 했는지의 정보와 프로젝트 변경 내용
- commit 메시지 : 작업내역이 어떤 것인지 알아볼 수 있게 적는 메시지
- commit id : commit 에 부여된 유일한 값
add (staging)
- commit에 반영할 파일을 선택하는 것
repo : git 으로 관리되고 있는 프로젝트
원격 repo(remote repo)
- 다른 곳에서 접속할 수 있는 공간에 저장되어있는 repository
로컬 repo(local repo)
- 내 컴퓨터에 저장되어있는 repository
추적(tracking)
- 로컬 레포가 원격 레포를 연결하는 것
push
- 로컬 레포의 commit들을 원격 레포에 반영하는 것
pull
- 원격 레포의 commit들을 로컬 레포에 반영하는 것
clone
-
원격 레포를 내 컴퓨터에서 사용하도록 초기 repo 가져오기
원격 repo 로컬 repo
- 원격 repo 만들기 1. 로컬 repo 만들기(git init)
3. 원격 repo와 로컬 repo 연결(tracking)
4. 브랜치 이름 변경 (main)으로 변경
5. 원격 레포 받아오기(pull)
6. 변경사항 생기면 로컬 레포 add, commit
7. 원격 레포에 반영(push)
협업
- issue
- branch
- merge
- pr 후 merge
issue
- issue 할당으로 작업 분배 가능
- 버그를 신고, 프로젝트 개선 제안, 해결하기위한 작업 단위
(bug report, enhancement)
ex) 이 버튼이 더 잘 보이면 좋겠어요. 이슈 등록해둘게요
6번 이슈 제가 처리할게요. 제 앞으로 할당할게요
branch
- 각자 공간에서 작업하기, 특정 commit에서 갈라져나와 작업 가능
- checkout : 작업할 브랜치로 바꾸는 것, 체크아웃된 브랜치에서만 commit 반영
merge
- 작업 내용 합치기]
- 브랜치를 다른 브랜치에 합치기(commit 들을 다른 브랜치의 commit 내역에 모두 반영)
merge confilt
<<<<<<< HEAD
{현재 브랜치의 다른 파일 내용}
=======
{충돌나는 브랜치명 또는 commit에서의 다른 파일 내용}
>>>>>>> 충돌나는 브랜치명 또는 commmit 아이디- merge confilct 를 고치려면,
내가 원하는 대로 파일을 수정하고(어떤 내용을 반영할지 결정)
<<<<<<< HEAD,=======,>>>>>>> 충돌나는 브랜치명 또는 commmit 아이디를 지우면 됨. - 후에 수정된 파일을 commit
Pull Request 후 Merge
- 작업한 내용을 리뷰하고 최종적으로 프로젝트에 반영함.
- 내 작업내역을 바로 merge하지 않고, 요청을 먼저 하는 것
- pr 완료 후 브랜치 삭제하기
추가 기능
amend
- 최신 commit 고치기 (메시지에 오타가 났거나 파일을 까먹고 add하는 경우)
- push 후 commit을 고치려면 Advanced - force push (나 혼자만의 브랜치에서만 사용)
revert
- 어떤 내용을 되돌렸는지 알리는 새로운 commit을 남기는 것
reset
- commit했던 작업내역을 리셋, 히스토리를 남기지 않고 변경하는 것으로 force push 해야 함.
soft(소프트)
commit 들을 되돌리고 변경된 파일 작업 내역은 보존해서 파일 변경사항으로 보여줍니다. 이때 변경사항은 add 되지 않은 상태로 보입니다.
mixed(믹스드)
commit 들을 되돌리고 변경된 파일 작업 내역은 보존해서 파일 변경사항으로 보여줍니다. 이때 변경사항은 add 된 상태로 보입니다.
hard(하드)
commit 들을 되돌리고 그동안 작업했던 모든 것도 없애버립니다. 즉, 작업내역을 복원할 수 없습니다.
stash
- 프로젝트의 변경사항을 임시적으로 보관해둘 때 사용(commit 전 변경사항만 보관해두고 싶을 때)
gitignore
-
공유하거나 공개되면 안되는 파일들을 .gitignore로 만들고 파일 또는 폴더이름을 적어주기
-
프로젝트 안에 a 폴더가 있고 그 안에 있는 b.txt 파일을 무시하고 싶은 거라면 gitignore 파일에는 아래처럼 적어주어야 함.
a/b.txt
gitignore 검색 사이트
README.md
- 프로젝트의 안내(마크다운 형식)
Github Action을 통한 자동 배포(AWS frontend)
- Github에서 제공하는, 서버에 소스를 배포하는 서비스
- CI/CD의 통합, 소스저장소와 배포시스템을 통합하는 것
(Continuous Integration : 지속적 통합)
(Continuous Deployment : 지속적 배포)
실제로 해보기
- IAM에서 권한 수정으로 S3 뿐만아니라 Cloudfront도 권한 추가
- git에 repo 만들기, 파이참이랑 연동(git client)
- 파이참에 계정 연동 (preferences)
- index.html, main.yml 파일 만들기
(.github 폴더 - workflows 폴더- main.yml 파일 ->github/workflows/main.yml ) - github의 Settings > Secrets 에 AWS key 저장
- 소스추가 push ({프로젝트 폴더}/.github/workflows/main.yml)?
- commit and push로 반영하기
- cloudfront 주소로 연결 확인
# index.html
<!Doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 나홀로 메모장</title>
<!-- style -->
<style type="text/css">
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
#post-box {
width: 500px;
margin: 20px auto;
padding: 50px;
border: black solid;
border-radius: 5px;
}
</style>
<script>
function save() {
alert("파일이 업로드 되었습니다!!");
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 이미지 메모장!</h1>
<p class="lead">중요한 이미지를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
</div>
<div id="post-box" class="form-post">
<div>
<div class="form-group">
<form id="upload-file">
<label for="post-url">이미지 파일</label>
<input type="file" name="file"/>
</form>
</div>
<button type="button" class="btn btn-primary" onclick="save()">저장</button>
</div>
</div>
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
# main.yml
name: my-front
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: 'ap-northeast-2'
steps:
- name: Checkout source code.
uses: actions/checkout@master
- name: Upload binary to S3 bucket
uses: jakejarvis/s3-sync-action@master
with:
args: --acl public-read --exclude '*' --include 'index.html'
env:
AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}
- name: Invalidate cache CloudFront
uses: chetan/invalidate-cloudfront-action@master
env:
DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
PATHS: '/index.html'
continue-on-error: true
# settings > secrets
# AWS_ACCESS_KEY_ID
# AWS_SECRET_ACCESS_KEY
# BUCKET_NAME
# DISTRIBUTION_ID (cloudfront)Github Action을 통한 자동 배포(AWS backend)
- Github에서 제공하는, 서버에 소스를 배포하는 서비스
- CI/CD의 통합, 소스저장소와 배포시스템을 통합하는 것
실제로 해보기
- IAM에서 권한 수정으로 Elastic Beanstalk 권한 추가
- git에 repo 만들기, 파이참이랑 연동(git client)
- application.py, main.yml 파일 만들기(수정, 코드 참고)
(.github 폴더 - workflows 폴더- main.yml 파일 ->github/workflows/main.yml ) - github의 Settings > Secrets 에 AWS key 저장
- EB의 환결설정 - 구성 - 소프트웨어 수정 - 환경속성 (Key 저장)
- 라이브러리 모음은 기존 pip 로 라이브러리를 설치했던 부분을 EB에서는
requirements.txt 파일을 만들어서 배포
(pip freeze > requirements.txt 터미널창에 설치)
(requirments.txt 파일 생기면 repo에 추가) - boto3 flask flask_cors 모두 설치 -> 다시 pipfreeze > req 하 면 txt 채워짐
- commit and push로 반영하기
- 프론트 & 백엔드 연동
(연동 확인 : cloudfront 주소 -> 실행 후 S3 버킷 확인)
프론트 & 백엔드 연동
- 프론트 코드 변경
# save() 함수 코드 변경, front - index.html
function save() {
var form_data = new FormData($('#upload-file')[0]);
$.ajax({
type: 'POST',
url: '{EB URL}/fileupload',
data: form_data,
processData: false,
contentType: false,
success: function (data) {
alert("파일이 업로드 되었습니다!!");
},
});
}
# EB url에 python-env url 넣기- application.py
# application.py
import boto3
from flask import Flask, render_template, request, jsonify
from flask_cors import CORS
import os # os에 저장된 환경변수 사용 (screct key)
application = Flask(__name__)
cors = CORS(application, resources={r"/*": {"origins": "*"}})
# cors 밑에 설명
@application.route('/')
def main():
return "hello python"
@application.route('/fileupload', methods=['POST'])
def file_upload():
file = request.files['file']
s3 = boto3.client('s3',
aws_access_key_id=os.environ["AWS_ACCESS_KEY_ID"],
aws_secret_access_key=os.environ["AWS_SECRET_ACCESS_KEY"]
)
# S3와 연동하기 위해 설정키를 소스에 추가
s3.put_object(
ACL="public-read",
Bucket=os.environ["BUCKET_NAME"],
Body=file,
Key=file.filename,
ContentType=file.content_type
)
return jsonify({'result': 'success'})
if __name__ == '__main__':
application.debug = True
application.run()
# Cross-Origin Resource Sharing :다른 도메인간에 API 통신을 허용한다는 뜻
# 프론트백엔드 간의 도메인이 다르기 때문에 API 통신을 하려면 CORS를 허용해야함- main.yml
# main.yml
name: backend
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@master
- name: Set up Python 3.8
uses: actions/setup-python@v1
with:
python-version: "3.8"
- name: Generate deployment package
run: zip -r deploy.zip . -x '*.git*'
- name: Get timestamp
uses: gerred/actions/current-time@master
id: current-time
- name: Run string replace
uses: frabert/replace-string-action@master
id: format-time
with:
pattern: '[:\.]+'
string: "${{ steps.current-time.outputs.time }}"
replace-with: '-'
flags: 'g'
- name: Deploy to EB
uses: einaregilsson/beanstalk-deploy@v16
with:
aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
application_name: python-app
environment_name: Pythonapp-env
version_label: "python-${{ steps.format-time.outputs.replaced }}"
region: ap-northeast-2
deployment_package: deploy.zip
하루에 한 개념씩