Bongster's

Next.js 프로젝트 Firebase에 배포하기. Why i Wrote This Posts 지난번 Apps script를 사용해서 Firebase 에 디비 연결하기 포스트에 이어서  이번에 Frontend로 사용한 Next.js를 Firebase에 배포하는 작업에 대해서 적을까 합니다.  이 방법은 정말 배포에 대해서만 말하고 있어서, 내용이 짧을수도 있을것 같습니다. 이 내용에 대해서 적는 이유는 저처럼 삽질을 하는사람이 적었으면 하는 바람에서 적습니다. How to work about next.js to deploy to firebase 이 글을 적기 전에 Next.js를 Firebase에 배포하기를 구글에 찾아보면 Firebase 에 있는 Function을 통해서 Next에 연결할수 있는 API를 만들고, hosting에서는 rewrite로 hosting으로 요청이 왔을 경우에 API로 redirect하는 형태로 배포가 진행 됩니다. Step Create Firebase Function Create Firebase Hosting use dummy `public` folder When attached hosting API Redirect to Function API Endpoint 이유는 기존에 react 의 다르게 `next build` 를 통해서 빌드시에 html 파일을 만들지 때문에 static file만 지원하는 firebase hosting에서는 파일을 읽을수 없다는 이슈가 나옵니다. 그래서 유명한 github 프로젝트에서도 public/ 폴더를 강제로 만들어주고,  거기안에 의미 없는 html 파일을 하나 넣어줘서 해결하였습니다. 이렇게 할 경우 API와 static에 대한 처리를 둘다 할수 있다는 장점이 있지만, 저의 경우에는 배포도 느려지고,  설정도 복잡해져서 제가 사용할려고 설치한 deps 들을 잘 찾지...

Apps script로 데이터 관리하기!!  이번에 새로운 파일럿 프로젝트를 들어가면서 개발자 한명 !! 이서 모든걸 관리해야하는 상황 이 왔습니다.  그 개발자가 바로 저였습니다. :( 그래서 일단 요구사항에 대해 생각 해보도록 하였습니다. * Something storage for saving information. * Web Hosting. * Frontend page. * Serving something for communicate between Database and Frontend. * Authentication.  음.. 그럼 필요한게 * Backend * Frontend * Infra * Database * Database Tools. 이정도 인것 같은데, 이걸 다 혼자 할 경우 Timeline에 원하는 기능을 만들지 못할것 같다는 생각을 했습니다. 그럼 어떻게 해야 줄일수 있을까? 생각하다가 담으로 생각한게 그럼 Infra를 줄여보자라고 생각해서 Serverless로 API쪽 개발을 하고 Frontend랑 묶어주자!! 라는 생각이 들었습니다.  그 이후에 그럼 Database Scheme는 어떻게? 제일 편한건 Mysql인데 이걸 쓰면 되나? 그럼 관리는?  디비는 어떻게 보여주지? 어드민은? 그냥 Client로 접근하라고 할까? 그럴경우 SQL을 가르쳐줘야하는데, 모를텐데 이런 생각이 들었습니다.  결국 주저리 주저리 했지만, 제가 정한 최종 스펙은, * Something storage for saving information. -> Firebase database, Apps scripts, Google Spread sheets * Web Hosting. -> Firebase hosting * Frontend page. -> React * Serving...

React app Amazon s3에 배포하기. 이번에 2주 동안 어드민 사이트를 개발 하게 되면서 Frontend 단에 있었던 문제나 해결 방법에 공유할까 합니다. 2주동안 가능할수 있었던 이유는 따로 대시보드 차트에 대한 페이지 가 따로 필요하지 않았고, 단순한 페이지 2개에 대해서 읽기, 쓰기, 수정에 대한 기능만 지원하면 되어서 2주 동안 개발을 완료할수 있었습니다. 개발에 사용한 스펙의 경우에는 Design coreui bootstrap reactstrap Frontend 는 React Redux Redux-thunk Redux-logger React-router Backend Node.js express mysql sequelize Deploy Frontend : AWS s3 를 통해 static html 을 서빙하는 방식 Backend : docker + elastic beanstalk 을 통해서 배포하였습니다. 이런식으로 구성했으며, 지금은 Frontend에 배포에 대해서 설명할까 합니다. 이게 제일 쉽고, 제가 처음 하던 작업이라 메뉴얼 하게 한 부분도 몇개 있거든요. Requirements AWS 계정 amazon console command coreui에서 제공하는 react 버전의 app https://coreui.io/react/ 일단 이정도만 가지고도 충분히 배포는 가능할것 같네요. Steps 배포 과정은 간단합니다. AWS에서 호스팅 관련된건 다 지원해주고, react-scripts에서 build를 통해 static 페이지로 바로 나올수 있도록 지원해줘요. AWS bucket 생성 AWS bucket에 대해서 public으로 권한 변경 static hosting 기능 켜기. frontend 프로젝트에서 npm run build 명령어 실행. aws s3 sync build/ s3://MY_BUCKET_NAME --acl public-read ...

RubyOnRails 배우기. Python을 배웠던 내가 Ruby을 배워야 겠다고 생각한 이유는, 반 프리랜서로 지내면서  외국에서 일을 하고 싶다는 생각에 외주를 찾아보거나 외국의 회사를 찾아보고 있었는데, 생각보다 Ruby개발자를 찾는 needs가 너무 많이 있었고, Python에 대한 Needs는 생각보다 적어서 Rails를 할수 있을 경우에 얻을수 있는 JOB이나 TASK들이 생각보다 많았습니다.  그래서 이참에 Ruby를 공부 하면서 Django와 비교해서 어떤게 좋은지 아니면 어떤게 불편한지 (지극히 개인적인 생각입니다)에 대한 이야기를 할까 합니다.  RubyOnRails의 스터디의 경우는 기존에 제가 했던 Python Django와 비교해보면서 공부할 예정이고,  짧게는 1주~2주정도로 Tutorial을 익힌 다음에 Django로 되어 있는 Side project를 Ruby + React기반의 프로젝트로 옮기는 작업을 진행하면서,  RubyOnRails에 대한 심화공부를 진행 할것 같습니다.  모든 코드는 Github에 올라와있습니다. 기존 Django Project에 대한 github주소 공부하고 있는 Rails에 대한 코드 https://github.com/bongster/RubyOnRailsTutorial 1. RubyOnRails Tutorial 따라 하기. https://guides.rubyonrails.org/getting_started.html 처음에는 RubyOnRails 에 있는 Tutorial 그대로 따라 하는 방법으로 진행하겠습니다. 아마 web site에 있는걸 따라 하는 수준이라서 따로 공유 드릴것이 없을것 같은데, 하다가 문제가 발생하거나 이슈가 발생하면 그때 맞춰서 따로 적도록 하겠습니다. 여기서 부터 gem install rails를 실행하고 rails new blog 라는 명령어를 입력시 `sudo`로 해달라는 이슈...

로컬 doctor 환경에서 elasticcache 사용하기.  지금 개발하고 있는 서비스 스펙 구성이 elasticbeanstalk 을 기반으로 Multiple docker 환경으로 서비스가 구성되어 있습니다.  이번에 cache가 필요한 상황이라 사용하기 위해서 redis를 container를 한개 더 서비스안에 구성해서 작업을 진행 할까 하다가 그렇게 되면 scaling 이슈나 백업과 같은 운영 이슈가 발생할것 같아서 (핑계지만 지금 서버 개발자가 저 혼자예요 ㅠㅠ. 그래서 아직 오케스트레이션도 아직 세팅 해놓지 않았습니다. ) 열심히 리서치 중? (사실 옵션이 별로 없었습니다.) elasticcache를 사용하기로 결정 했고, AWS console을 통해서 elasticcache를 세팅 했습니다. 이제 세팅이 완료 되었으니 연결이 되나 테스트를 해봐야겠죠? 그래서 로컬 환경에서 테스트를 진행해볼려고 하는데... Connection refused error가 발생하는 겁니다. .. 또 다시 구글 검색 시작... 검색해보니 elasticcache의 경우에는 vpc 안에서만 연결이 된다고 하더군요. 아니면 elastic beanstalk에 config를 조정해서 beanstalk에서 사용할수 있는 elasticcache를 따로 세팅하는 것이였습니다. 나는 내꺼 만들어 놨는데?? 이거 쓰고 싶은데 ㅠㅠ. 이상한 오기가 생겨서 그럼 어떻게 하지? 생각해보다가 elastic beanstalk과 elasticcache 사이는 같은 vpc 망 안에 있어서 security group에서 port만 열어주면 되는것을 확인해서 포트를 열어주고 이론상으로는 연결이 다 된것 같은데, 혹시라도 테스트를 해보고 싶어서 어떻게 하면 할수 있을까 고민하던중에. 찾아보니, beanstalk에 있는 인스턴스와 로컬 사이에 ssh tunneling을 연결하고, beanstalk과 elasticcache 사이에는 port forwardi...

새로운 프로젝트에서 서버개발 및 인프라를 담당하게 되면서 배포 및 서비스 운영에 대해 생각을 하다가 마침 관심있게 생각하는 AWS 서비스 중에 beanstalk이 있어서 사용해보면 좋을것 같다라는 생각에 도입을 하게 되었고, 도입할때 tutorial을 통해서 테스트 및 서비스를 배포해보면서 발생한 문제점 및 pre-requirement 에 대해서 적을까 합니다. 해야 했던 일 database setting setup security consider scaleable service setup ec2 instance for service setup load balancer management deploy setup log system 이거 하려면 ec2를 세팅해야하고,  load balancer도 세팅해야하고 vpc도 만들어야 하고,  매핑도 시켜야하고 scaling도 공부해야하고,  매핑도 해봐야하고,  상태체크 및 log system도 구축해야하고…  너무 귀찮고 힘들고,  처음해보는거라 실수라도 생기면… 나 막 그렇게 부지런한 개발자가 아니라서 ㅠㅠ 귀찮은데 누가 해줬으면 좋겠어.!! beanstalk을 선택한 이유 security, scaling, log system 등을 한번에 관리할수 있다. automatically setting security sample command method 귀찮거나 사람이 실수할수 있는 문제를 자동으로 세팅해줌. 방법은 amazon documentation site에 있는 beanstalk 에 있는 tutorial을 따라서 진행을 하였습니다.  한국어로 되어있는 문서도 있었는데, 영어로 하면 좀 더 자세히 되어 있을까봐 영어문서를 보고 했습니다. (영어공부도 해볼 겸 …) 일단 tutorial을 따라 적는건 의미가 없을것 으로 판단해서 제가 진행하면서 막혔던 ...

2019/09/29 날씨 맑음  오늘은 어제 UI를 통해서 그린 그림을 가지고, 실제로 프로젝트에 적용하는 작업을 하였습니다. 위에 화면이 저녁 밥 먹고 21시부터 시작해서 23시까지의 결과 물입니다. 코드는 github 에 들어가시면 확인하실수 있습니다.  간단하게 과정을 설명해드리면,  지금 보이는 설정 화면과 디테일 화면사이에는 createStackNavigator로 연결을 했으며,  거기서 만들어진 TimeStack을 TabNavigator에 연결해주는 방식으로 구현을 했습니다. 밑에 보이는 navigationOptions가 아래쪽에 한번 더 정의 되어 있는 이유는 위에 StackNavigator로 구성을 하고 추가를 하였을 경우에 UI Tab 화면에 아이콘이 보이지 않는 이슈가 있어서,  이슈에 대해서 찾아보다가 결국 찾지 못해서 저렇게 코드를 한번 더 Navigator 만들때 추가로 정의했습니다.  * 혹시 이 이슈 해결방법에 대해 아시는분 코멘트 부탁드립니다. 내가 보기에도 허접한 화면에 달랑 페이지 두개. 실제 작업은 30분도 안걸렸지만, 이제 한시간 반 동안 제가 어떤 삽질을 했으며, 또 그걸 해결하기 위해서 어떻게 해야하는지 적을까 합니다.  React-native가 기본적으로 제공하는 유저 Input을 받을수 있는 Components는 TextInput 와 Picker 입니다. 기본적인 웹에서 사용하는 form 과 같은 tag를 사용하고 싶을때는, react-native에서 구현되어있는 package를 설치해서 사용하면 더 정신건강에 좋습니다.  어떤 library를 사용해야할지 모르겠어서 어떻게 할지 찾아보다가 awesome-react-native 란 사이트를 찾아서 여기서 필요한 기능별 library를 추가하면 편하게 사용하실수 있습니다.  화면을 그리는것에 ...