Projects/뮤직 플레이 리스트
-
04. 모바일 관련 문제들 해결하기 (우클릭 방지, input range 등)Projects/뮤직 플레이 리스트 2021. 6. 14. 14:06
body { ... -webkit-touch-callout: none; } 모바일에서 안되는 것 투성이...? 이 전 포스트에서 CI / CD 툴을 연동한 이유는 사실 이번 포스팅의 문제를 해결하기 위해 구축한 사전 작업이다. 분명 PC 브라우저에서 화면의 레이아웃이나 동작들이 모두 이상없이 잘 작동했는데, 모바일로 들어가보니 되는 기능이 하나 없었다. 그 중 대표적인 몇 가지를 적어 보자면 아래와 같다. 1. 화면 레이아웃 깨짐 (100vh 문제 포함) 2. 이미지 버튼을 꾹 누르면 브라우저의 이미지 저장 창이 나타나서 음악을 5초뒤, 5초 전으로 건너 뛸 수 없음 3. 에서 드래그 작동 안함 4. javascript로 volume 컨트롤이 안됨 5. drag & drop 기능 작동 안함 설렌다... ..
-
03. CI / CD 툴을 적용해 단순 반복 작업 해결하기 (Jenkins)Projects/뮤직 플레이 리스트 2021. 6. 12. 15:33
단순 반복 작업의 연속... 그 전까지 나는 앱을 배포하기위해 다음과 같은 과정을 거쳤다. 1. 로컬 환경에서 테스트 하기 2. 이상이 없는 최종 버전 build하기 3. build로 나온 결과물인 dist폴더에 있는 내부 작업물들을 복사해서 build버전이 있는 git 레포지토리 폴더에 옮겨넣기. 4. build 프로젝트 git push 하기 5. 터미널에서 내 서버로 접근한 뒤(ssh) build 프로젝트 pull 받기 6. 배포 버전에 이상이 있다면 위 과정 반복하기. 모바일 환경에서 테스트할 수 밖에 없는 상황이면 다음과 같은 과정을 수 없이 반복해야 했고, 그러한 단순 작업에 들어가는 시간적, 감정적 비용이 상당했다. CI / CD란? 이러한 문제를 해결하기 위해 우리의 위대한 개발자들은 코드 ..
-
02. SSL 적용하기 (AWS Certificate Manager, Route 53)Projects/뮤직 플레이 리스트 2021. 6. 6. 17:11
이제 도메인(http://music.leehov.in)을 입력하면 내가 만든 music player 앱을 확인할 수 있다. 하지만 https가 아닌 http로만 접속이 가능하다. 조금더 안전한 사이트로 만들기 위해 ssl 인증서를 발급받아서 https로만 접근을 할 수 있도록 만들어보자! 1. 네임 서버 변경하기 (Route 53) 우선 아마존에서 무료로 제공하는 SSL인증서를 이용하기 위해서는 내 도메인의 네임서버(NS)를 변경해주어야한다. 네임서버(NS)는 A나 CNAME등의 특정 도메인에 관한 DNS 레코드를 저장하는 서버다. 그래서 사실 내가 music.leehov.in라고 쳤을때에는 leehov.in에 등록되어있는 NS에 먼저 접근을 해서 관련 DNS 레코드들을 확인 후 응답하는 형식이다. 우선..
-
01. 앱 내 서버에 배포하기 (AWS EC2, nginx)Projects/뮤직 플레이 리스트 2021. 6. 6. 15:16
mbti 프로젝트에서 배포에 대해서 다루긴 했지만 이번 포스팅에서는 AWS와 관련해서 조금 더 자세하게 다뤄보고자 한다. 해당 포스팅은 도메인을 구매했다는 가정하에 나머지 내용을 다룬다. (나는 Gabia에서 도메인을 구매를 했다.) 1. react build로 배포버전 생성하기 npm run build 우선 명령어를 통해 react 앱을 빌드한 뒤 형성된 build 폴더를 git에 푸쉬했다. 2. 인스턴스 (EC2) 생성하기 인스턴스란 쉽게 말해 서버 컴퓨터를 말한다. AWS에서 제공하는 클라우드 인스턴스를 EC2라고 한다. 우선 인스턴스를 만들어 배포할 App을 올려보자! EC2 > 인스턴스 > 우측 상단의 인스턴스 시작 버튼 클릭 > 원하는 사양의 인스턴스 선택 인스턴스는 내가 원하는 사양으로 선택..