서버를 재시작하지 않고 루비 온 레일즈의 수정사항을 반영할 수 있나요?
서버를 재시작하지 않고도 루비 온 레일즈 프로젝트의 수정사항을 반영할 수 있습니다.
소스 코드를 수정 및 저장한 후에 애플리케이션에 접속 중인 브라우저를 새로고침 하시면 됩니다.
LiveReload를 이용하면 브라우저를 새로 고칠 필요 없이
프론트엔드 코드의 수정 사항을 반영할 수 있습니다.
1. 아래 링크로 접속하여 LiveReload extension(크롬 확장프로그램)을 설치해주세요.
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. 아래와 같이
Gemfile 을 열고 :development 그룹을 추가해주세요.group :development do gem 'guard' gem 'guard-livereload', '~> 2.5' gem 'rack-livereload', '~> 0.3.16'end
3. 터미널에 아래 명령어를 입력해주세요.
bundle installguard init livereload
4. 상단 메뉴 [프로젝트] > [실행 URL과 포트] 에서 URL을 등록하세요.
컨테이너를 생성할 때 하나의 URL이 기본으로 생성되어 있으므로,
새로운 URL을 추가하여 총 2개로 만들어주시면 됩니다.
아래 화면처럼 세팅해주신 후,
적용 > 확인을 눌러 창을 닫습니다.
(URL 및 포트는 자유롭게 세팅해주시면 됩니다.)
첫번째 URL은 Rails 서버를 실행하는 데 사용될 URL이며,
두번째 URL은 LiveReload 서버가 브라우저 및 웹소켓과 통신할 때 사용됩니다.
5.
config/environments/development.rb파일에 아래 내용을 추가해주세요.config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload, host: 'Second URL', port: 80
https://을 제외한 나머지 URL을 입력해주세요. (포트는 80입니다.)
6.
Guardfile 파일을 열고 아래 내용을 찾으세요.
(가드 파일 파일이 표시되지 않으면 프로젝트 탐색기 오른쪽 상 단에 있는
새로 고침 버튼을 클릭하고 다시 찾아보세요.)guard 'livereload' do
위에서 찾은 내용을 아래와 같이 변경해주세요.
guard 'livereload', port: 3001 do
port 부분에는 두번째 URL의 포트를 입력하세요.
LiveReload는 확장자가 있는 파일이 바로 아래 확장자에 설정된 경우에만 발생하고 수정된다는 점에 유의하세요.
7. 아래 명령어를 터미널에 입력하여 LiveReload를 실행하세요.
guard
만약
INFO-LiveReload is waiting for a browser to connect 이 메시지가 나타난다면
성공적으로 마무리된 것입니다.
8. 상단 도구 모음에서 실행 버튼을 클릭하여 레일 프로젝트를 실행하고, 연결할 URL을 클릭하세요.
https를 통해 연결되는 경우 주소 표시줄에서 주소를 http로 변경하고 다시 시도해주세요.
9. 이때 guard 콘솔에
INFO-Browser connected 라는 메시지가 표시되면 성공적으로 완료된 것입니다.
이제 파일을 변경할 때마다 자동으로 브라우저상에서도 내용이 수정되는 것을 볼 수 있습니다.
Last modified 3yr ago