yisj's blog

#34495E #41B883

간단한 영상 스트리밍 앱 만들기 vue-cli로 앱 만들기 $ vue create hello // Vue Version 3를 선택한다 $ vue add router $ vue add element-plus // Import on Demand와 en을 선택한다element-plus 스타일이 적용되지 않는 에러 해결하기 172... 로 시작하는 IP 주소는 AWS EC2의 프라이빗 IP 주소이다. 이것을 퍼블릭 IP 주소, 탄력적 IP 주소로 바꿔줘야 한다. 그러나 더 좋은 것은... 서버에서 실행할 것이 아니라, production으로 빌드된 Vue.js 앱을 그냥 static으로 전송하는 것이다. 그렇지 않을까? 그렇다면 이 에러는 굳이 해결할 필요가 없는 에러이다. router 설정하기 이 앱에는 다음..

Invalid Host header 로컬에서 개발할 때는 잘 됐다. 버츄얼박스 게스트에서 개발해서 호스트에서 접속하는 등 테스트를 할 때도 잘 됐다. 그런데 EC2 에서 vue-cli를 이용해 Vue.js 앱을 만들고 접속을 하려고 했더니 Invalid Host header 에러가 뜬다. 잠시 구글링을 해보니 이 에러는 webpack과 연관이 있는 듯하다. vue webpack invalid host header로 검색을 했더니 다음의 해결책을 발견했다. Vue.js 앱의 루트 폴더(babel.config.js가 있는 위치)에 vue.config.js를 만들고 위의 내용을 넣어서 저장한다. 그리고 Vue의 devServer를 재시작했더니 npm run serve 다음과 같이 에러가 사라졌다!

나의 EC2 초기 세팅 vim 내가 제일 먼저 하는 일은 vim 세팅을 바꾸는 일이다. 먼저 나의 yisj 저장소를 클론한다. $ git clone https://github.com/yisj/yisj 저장소 안에는 .vimrc 파일과 .vim 폴더가 있다. 각각 복사 붙여넣기한다. $ cp .vimrc ~/.vimrc $ cp -r .vim ~/ tmux tmux를 설치해야 갑자기 중간에 연결이 중단되더라도 터미널 세션이 죽지 않는다. 다시 이전의 세션을 사용할 수 있다. 그러므로 tmux는 필수품이다. $ sudo apt install tmux node.js 다음으로 내가 가장 좋아하는 서버 프레임워크인 express를 사용하기 위해 node.js를 설치한다. npm도 같이 설치한다. $ sudo ap..

EC2 종료 후 다시 새로 만들고 탄력적 IP 적용하기 현재 상태를 점검한다 키 페어 이름: gaedogkeypair 탄력적 IP: 3*.***.***.*** 인바운드 & 아웃바운드 규칙 AWS EC2 종료하기 AWS EC2 다시 시작하기 Ubuntu Server 20.04 LTS 선택 보안그룹, 키페어는 기존에 사용하던 것을 선택 탄력적 IP 연결하기 탄력적 IP를 할당받고 EC2에 연결하여 사용하지 않으면 과금이 된다. 어서 연결하자. 내가 할당받은 IPv4 주소 3.***.***.***을 클릭한다. 오른쪽 위 탄력적 IP 주소 연결 버튼을 클릭 후 새로 만든 인스턴스와 연결한다.

우분투에 Vue.js 개발환경 세팅하기 nvm, node, npm의 설치 nvm 설치 가장 먼저 할 일은 nvm의 설치이다. 다음 명령어를 통해 nvm을 설치한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash 위 명령어는 자주 쓰는 것이기 때문에 아예 외워 버리자, 다음과 같이 나눠서 외우면 된다. curl -o- -o: --output -: filename context 즉, install.sh로 저장한다는 뜻 https://raw.githubusercontent..

VirtualBox를 자주 쓰다보면, VirtualBox 게스트의 시스템 시간이 몇 분씩 자꾸 뒤쳐지는 것을 확인할 수 있다. 시간이 점점 안맞다가 하루 이틀 차이도 난다. 그렇게 되면 apt 명령어나 npm 명령어로 라이브러리를 다운받아 설치하려고 할 때 명령어가 작동이 되지 않는다. 이럴 때는 다음의 명령어를 이용하여, 우분투의 시스템 시간을 현재로 동기화한다. $ sudo hwclock --hctosys 위 명령어는 hardware clock의 줄임말로, --hctosys 옵션은 현재 시스템 시간을 하드웨어(커널)의 시간으로 맞춘다는 뜻이다.