Axios - http -> https 변경 시 오류

문제상황

SSL 인증서를 붙혀서 통신 URI가 `https://api.salesync.site`로 변경됨

해당하는 URI에 맞춰 JS 요청 엔드포인트 변경

 

./src/api/BaseUrl.js

• 변경 전

const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL;

 

• 변경 후

const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL;

 

오류

배포시 통신 오류가 뜨고 데이터를 조회할 수 없음

분명 `https`로 변경했으나 `http`로 통신이 감

 

# 해결시도1      😀참조 : [https://velog.io/@shin6949/HTTPS에서-HTTP-요청-블락-에러-해결하기]

요청을 `http://` `https://`로 시작하는 것이 아닌 **"//"** 으로 시작하면 됩니다.
그럼 자동으로 접속되었던 방식으로 선택되어 넘어갑니다.

 

다시 한 번 JS 요청 엔드포인트 변경

./src/api/BaseUrl.js

• 변경 후

const URL = "//api.salesync.site";

export default URL;

 

# 해결시도1 - 오류

# 해결시도2 - 해결

CloudFront는 CDN이라 정적파일이 남아있음

캐시가 쌓여있어서 새롭게 배포한 React SPA가 반영이 안 됨 
(코드를 https로 수정해도 적용되지 않고 이미 기존의 http가 계속 유지됨)

## JS 요청 엔드포인트 변경

• 변경 후

./src/api/BaseUrl.js

const URL = "https://api.salesync.site";

export default URL;

 

 

## CloudFront 캐시 제거 스크립트 추가

• 변경 후

./.github/workflows/deploy.yml

name: Deploy to Amazon S3 bucket

on:
  push:
    branches: [ "main" ]

env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: salesync.site

  CLOUDFRONT_NAME: secret

:
:

      - name: CloudFront delete cache
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ env.CLOUDFRONT_NAME }}
          PATHS: "/*"
          AWS_REGION: ${{ env.AWS_REGION }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

https 통신이 되고 정상 작동되는 것을 확인