[Django] DAY25. 익명 게시판 이미지 파일 보관소를 S3로 연결하기

2024년 2월 25일 일요일

📙 강의 내용 요약

해당 강의는 25강1, 25강2로 이루어져 있습니다

[25강 -1 : S3 생성]

• AWS 계정 생성

  • 주소 작성 시, 영문 주소로 입력해야 한다.

• S3

  • 파일 저장소
  • 익명 게시판에서 사용한 이미지를 S3에 올리는 목적으로 사용
  • 적용 순서 정리
    • 검색 > “S3” 검색 또는 스토리지>S3 클릭
      
    • “버킷 만들기” 클릭
      • 버킷 이름은 고유(다른 유저와 겹칠 수 X)
        • hayan-anonymous
      • 버킷 퍼블릭 액세스 차단 설정 체크 해제하기 → 버킷 생성
        • 모든 유저가 볼 수 있도록 설정할 것이기 때문.
          
          

• 생성한 S3 버킷 테스트

  • 이미지 업로드 테스트하기
    

    • 업로드 > 파일 추가 > 이미지 선택 > 체크 후 업로드 클릭
      
      

• 이미지가 보이는지 확인

  • 이미지 클릭 > 객체 url 접속 → Access Denied 확인

    • 그 이유는 아직 퍼블릭 상태가 아니기 때문(퍼블릭 옵션을 추가해놓기만 한 것)

      

    • 버킷으로 돌아가 “권한” > 버킷 정책의 “편집” 클릭
      

      

      버킷 정책 조건
      - 이미지를 누구나 올릴 수는 없지만, 누구나 볼 수 있게 하기

    • 정책 예제 클릭 및 권한 복사

      
      

    • 붙여넣기 & 버킷 이름 설정한 이름으로 변경, 변경사항 저장

      
      

• S3 권한 설정해주기

  • 쓰기 권한을 별도로 지정해야 함.
  • “IAM” 설정(보안, 자격 증명 및 규정 준수 서비스에 있음)
    • 사용자 > 사용자 추가 클릭
    • 사용자 이름은 자유롭게 입력
    • 프로그래밍 방식 엑세스 체크
      
    • 기존 정책 직접 연결 클릭 → Admin 검색 → AdminstaratorAccess 체크
      
    • 검토 후 사용자 추가
      → 액세스 키와 비밀 액세스 키가 부여되니 반드시 안전히 따로 저장!
      

• 현재 발급받은 키를 통해 프로젝트와 S3 연결하기

  • requirements.txt에 S3 관련 패키지 추가해 설치

    ...
    boto3
    django-storgaes
    
    ------------------------
    # Terminal
    pip install -r requirements.txt
    
    # 설치 완료 확인
    pip list

    

• .gitignore 설정을 통해 AWS 시크릿 키를 올리지 않도록 설정

  env.json --> 실제 서버에 올릴 때 민감한 정보 및 서버 세팅을 여기에 몰아넣어 관리
  venv/*
  .vscode/*
  .idea/*
  *.pyc

[25강 -2 : 프로젝트와 S3 연결]

• 루트 위치 → env.json

  {
  	"AWS_ACCESS_KEY_ID":"발급받은 키 입력",
  	"AWS_SECRET_ACCESS_KEY":"발급받은 시크릿 키 입력",
  	"S3_BUCKET_NAME":"hayan-anonymous", // 버킷 이름
  	"S3_ROOT_URL":"https://hayan-anonymous.s3.ap-northeast-2.amazonnaws.com",
  }

  • S3_ROOT_URL
    • AWS S3 > 버킷 접속 > 객체 URL의 앞 도메인까지만 복사

• anonymous > settings.py

  ...
  INSTALL_APPS = [
  
  ...
  
  'storages'
  
  ]
  
  ...
  
  # MEDIA_ROOT는 주석 처리
  # MEDIA_ROOT = 'upload'
  
  DEFAULT_FILE_STORAGE="storages.backends.s3boto3.S3Boto3Storage"
  
  import json
  
  env_json = 'env.json'
  with open(env_json) as f:
  	env_json = json.loads(f.read())
  
  env_json
  
  # print(type(env_json))
  AWS_ACCESS_KEY_ID=env_json['AWS_ACCESS_KEY_ID']
  AWS_SECRET_ACCESS_KEY=env_json['AWS_SECRET_ACCESS_KEY']
  AWS_STORAGE_BUCKET_NAME=env_json['S3_BUCKET_NAME']
  
  S3_ROOT_URL=env_json['S3_ROOT_URL']
  ...

  

• env.json에 github 정보 숨기기

  ...
  	"SECRET_KEY":"어렵게 입력하기"
  }

  # settings.py
  
  SECRET_KEY ='ddddddd' -> 삭제
  ...
  
  S3_ROOT_URL=env_json['S3_ROOT_URL']
  SECRET_KEY=env_json['SECRET_KEY']

• board > views.py 수정

    		if img:
              img_name = uuid.uuid4()
              ext = img.name.split('.')[-1]
  						img_url = f"/upload/{img_name}.{ext}"
  
              default_storage.save(img_url, img)
              

• 실제 서버에서 이미지 게시글 올린 후 S3에서 확인
  
  

• 프로젝트에서 이미지 보여주기
  • templates > page > post_detail.html

    ...
                    {% if post.img_url %}
                        <img src="https://hayan-anonymous.s3.ap-northeast-2.amazonnaws.com{{ post.img_url }}">
                    {% endif %}
                </div>
            </div>

    

• 이미지 url을 매번 입력하지 않아도 되도록 설정

  ...
                  {% if post.img_url %}
                      <img src="{{ IMG_URL }}{{ post.img_url }}">
                  {% endif %}
              </div>
          </div>

• anonymous에 새로운 파일 ”common_context.py” 생성

  from django.conf import settings
  
  def img_url_context(request):
  	return {"IMG_URL":settings.S3_ROOT_URL}

  # settings.py...
  TEMPLATE = [
  
  ...
  		'OPTIONS':{
  				'context_processors':[
  					...
  					'anonymous.common_context.img_url_context'
  				],

♻️느낀점&인사이트

오늘은 25강이 총 2개의 강의로 나뉘어져 있어 연달아 강의를 수강했다.

먼저, 익명 게시판의 이미지 업로드 기능을 배포할 때 용이하게 하기 위해 S3 버킷을 생성했다.

AWS에서 S3를 검색 후, 버킷을 생성해주고 현재 컴퓨터에 있는 이미지를 올려서 업로드 테스트를 해주었고 퍼블릭 설정을 위해 버킷 정책을 업데이트해줬다.

그 다음, 특정 사용자 즉 관리자만 이미지 업로드 권한을 주기 위해 사용자 추가를 해 권한을 설정했다.

그리고 다시 프로젝트로 돌아와 .gitignore로 앞으로 설정할 환경설정과 키 설정에 관련된 민감 정보가 github에 업로드되는 것을 방지하기 위해 설정했다.

AWS S3에서 발급 받은 키는 env.json에 몰아 넣어 별도로 관리하며 보안 위험을 방지하는 방식을 사용한 것이다.

그 다음 단계는, env.json을 직접 적어주고 anonymous의 settings.py에 실제 설정을 해주는 것이었다.

Default 파일 저장소를 S3로 변경한다음 json을 import해서 env.json을 읽어들일 수 있도록 설정했고, post_detail.html에서 해당 이미지를 S3 객체 URL로 불러 올 수 있도록 설정을 마쳤다.

또한 도메인 정보를 포함한 객체 URL을 IMG_URL로 불러올 수 있도록 common_context.py를 새로 생성해 IMG_URL에 대한 함수를 작성해준 다음, settings.py의 TEMPLATE 설정에 추가를 해주는 방식으로 연결을 마무리했다.

오늘 강의는 구현 강의보다는 비교적 빠르고 쉽게 들을 수 있어 좋았다.

또한 S3 버킷 구성은 처음 해봤는데, 버킷의 이름 설정을 고유하게 해야한다는 좋은 정보와 퍼블릭으로 설정해야 하는 이유, 그리고 버킷 정책에 대한 예제를 간단히 가져오는 방식으로 쉽게 강의를 진행하며 그 이유에 대해서 조금 더 생각해볼 수 있도록 하는 내용이었던 점이 가장 좋았던 것 같다.

앞으로의 강의에서는 RDS 연결과 EB 연결 역시 진행하는데, 이런 방식으로 빠르고 쉽게 연결을 하고 프로젝트에 설정을 할 수 있는 강의일 것으로 예상되기 때문에 매우 기대중이다!

얼마 남지 않은 강의들을 얼른 수강해서 RDS와 EB까지 모두 연결을 해서 배포를 마치게 된다면 휴대폰으로도 해당 프로젝트를 얼른 접속해 사용해보고 싶다는 생각이 더더욱 많이 들게된 오늘이었다🙌