[TIL] 20240610 81일차

도메인 연결

[기능 구현]

 

• 해당 도메인으로 이동 시 서비스 중인 페이지(배포 페이지) 보이도록 작업

https://velog.io/@pp2lycee/Route53에서-도메인-구매해-서버와-연결하기

▲ 위 작업 마친 이후 프로젝트에 추가로 설정할 부분

• 프로젝트 settings.py ALLOWED_HOST에 도메인 추가
• nginx에 server_name으로 도메인 추가
• server { listen 80; server_name sparta-games.net; ... } server { listen 80; server_name *.sparta-games.net; ... }
• www. 도 동작하도록 하려면 Route 53 → 호스팅 영역 → 추가한 도메인 클릭 후 레코드 생성으로 CNAME 등록. 값으로 도메인을 입력한다.

 

HTTPS 설정 & CORS error

[기능 구현]

 

HTTPS Setting

https://woojin.tistory.com/94

▲ 위 링크대로 진행하되 몇 가지 상이한 부분 있음

• 로드 밸런서 생성 진행할 때 네트워크 매핑에서 서브넷 선택 시 적어도 하나는 EC2에서 사용하는 서브넷으로 설정해야 한다.
• HTTP:<사용중인 포트> 에 대한 리스너 규칙을 설정할 때, 기존의 규칙은 놔두고 추가로 규칙을 생성한다.
  • 조건: 호스트 헤더: 도메인 값 입력
  • 작업(다음 수행): 리다이렉션 → HTTPS
  규칙을 생성하고 나면 해당 규칙의 우선순위는 1로 설정. 리스너 및 규칙 목록에서 HTTP:<사용중인 포트> 에 대한 규칙 개수가 2로 표시가 되어야 함
• 대상 그룹 → 등록된 대상에서 443 포트에 대해 대상 등록을 진행할 필요 없음
• health check 는 설정한 경로값(default: ‘/’)에 대해서 응답 코드 200이 오는 지를 확인하는 것이기 때문에, https 연결이 잘 됐고 서버가 잘 동작한다면 고려할 필요 없음. 하지만 해당 check을 healthy로 하고 싶다면 응답코드 200을 response 하는 api 주소 등을 경로값으로 설정해주면 된다.

CORS 문제

https://velog.io/@qkrqudgns/Django-CORS-설정하기

django-cors-headers 패키지를 설치하고 프로젝트의 settings.py 를 아래와 같이 작성

# settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# Allow specific origins
CORS_ALLOWED_ORIGINS = [
    "<https://example.com>",
    "<https://sub.example.com>",
]

# Optionally, configure allowed methods
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

# Optionally, configure allowed headers
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

• 이에 추가로 AWS S3에서 해당 버킷의 권한 → CORS 설정으로 아래와 같이 입력

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

• 위와 같이 세팅 후 확인해보니 기존에 존재했던 파일들에 대해선 여전히 CORS 문제가 발생했지만, 세팅 이후에 추가한 파일들에 대해선 CORS 오류가 간헐적으로만 발생하여 절반만 해결된 상태이다. 시간적 여유가 된다면 완전히 해결할 것이다.

<시간이 남을 경우 앞으로 해야 할 작업>

• CORS 오류 완전히 출력되지 않도록 수정

 

 

6월 10일자 hotfix

[오류 개선]

 

• 페이지 navbar 프로필 사진 옆의 파란 줄(a link) style 속성 설정으로 제거
• 각종 버튼 디자인 bootstrap 디자인으로 통일
• 검색 페이지 최신순/평점순/조회순 버튼을 radio toggle button group 으로 변경
• 페이지 아이콘 추가
• navbar 및 footer의 메인 페이지 이동 아이콘 이미지 수정
• 검색 페이지 - tag_q가 제대로 동작하지 않는 점 수정
  • api view 함수에서 tag_q로 검색되지 않는 태그일 경우 .get 메서드를 사용할 경우 error가 발생하여 이를 수정
  • # 변경 전 Tag.objects.get(name=tag_q).games # 변경 후 Game.objects.filter(tag__name__icontains=tag_q)
• 프로필 페이지의 버튼 요소 id를 중복하여 작성한 문제 수정
• 검수 페이지에서 해당 게임의 디테일 페이지로 이동할 수 있도록 a 태그의 href 속성값 수정

<시간이 남을 경우 추가로 수정할 목록>

• 디테일 페이지에서 관리자일 경우 수정/삭제
• 댓글 닉네임이 길 경우 줄임 처리
• 태그 게임 추천 서비스에서 출력값으로 이모지가 나오지 않도록 프롬프트 수정