New Relic 및 CodeStream을 사용한 Phoenix 웹 응용 프로그램 디버그
Elixir와 Phoenix는 빠르게 발전하고 있지만, 생산 프로그램의 성능 문제에 주의해야 합니다.New Relic One을 사용하여 Phoenix 애플리케이션의 성능 문제를 확인할 수 있습니다.더 좋은 것은 New Relic CodeStream을 사용하면 감지된 New Relic 예외에서 IDE와 문제가 발생한 코드 행으로 직접 이동할 수 있습니다.이 강좌에서는 New Relic One의 코드 흐름을 이용하여 개발자의 업무 효율을 높이는 방법을 배울 것입니다.작은 웹 응용 프로그램을 만들고 버그를 도입한 다음CodeStream을 사용하여 코드에서 문제를 찾습니다.
이 블로그는 다음과 같은 업무 지식을 가정했다.
본고의 예시 응용 프로그램은 Heroku에 배치되었습니다. GitHub repository of the sample application의 자술 파일을 클릭하여 예시 응용 프로그램을 배치할 수 있습니다.Heroku는 클라우드 플랫폼 서비스로 웹 사이트를 신속하게 배치할 수 있으며 기본 계정은 무료입니다.사용자가 좋아하는 클라우드 배포 서비스에 응용 프로그램을 배치할 수도 있습니다.
우리 시작합시다!
저장소를 복제하고 시험적으로 사용하려면 https://github.com/newrelic-experimental/nr-phoenix-demo-app에서 완전한 작업 응용 프로그램을 찾을 수 있습니다!
TailwindCSS를 사용하여 새 Phoenix 응용 프로그램 만들기
TailwindCSS를 응용 프로그램의 CSS 프레임워크로 사용하여 새 Phoenix 응용 프로그램을 만듭니다.
mix phx.new #{name_of_your_app} 명령을 사용하여 새 Phoenix 응용 프로그램을 초기화한 후 응용 프로그램의 /assets 디렉토리에 설치하여 Tailwind를 추가합니다.당신은 this tutorial의 절차에 따라 조작할 수 있습니다.Phoenix 응용 프로그램 설정
이 프로그램은 두 가지 노선이 있다.첫 번째 경로는 홈 페이지이고 두 번째 경로는
/make_trouble을 가리키며 버그를 도입합니다.기본 라우팅은 새 Phoenix 웹 응용 프로그램을 초기화할 때 제공되는 기본 템플릿을 사용합니다.Tailwind 클래스를 사용하는 스타일을 HTML 파일에 추가하여 제조 문제 경로에 대한 링크를 만들기만 하면 됩니다.
/templates/page/index.html.heex 파일을 열고 다음 HTML을 추가합니다.<section>
<div class="bg-black text-white py-20">
<div class="container mx-auto flex flex-col md:flex-row items-center my-12 md:my-24">
<div class="flex flex-col w-full lg:w-1/3 justify-center items-start p-8">
<h1 class="text-3xl md:text-5xl p-2 text-yellow-300 tracking-loose">Phoenix</h1>
<h2 class="text-3xl md:text-5xl leading-relaxed md:leading-snug mb-2">
❤️ New Relic
</h2>
<p class="text-sm md:text-base text-gray-50 mb-4">Add New Relic monitoring to your Phoenix app deployed on Render</p>
<a
href="/make_trouble"
class="mt-5 bg-transparent hover:bg-red-600 text-red-600 hover:text-black rounded shadow hover:shadow-lg py-2 px-4 border border-red-600 hover:border-transparent"
>
Make Some Trouble
</a>
</div>
<div class="p-8 mt-12 mb-6 md:mb-0 md:mt-0 ml-0 md:ml-12 lg:w-2/3 justify-center">
<div class="h-48 flex flex-wrap content-center">
<div>
<img class="inline-block mt-28 hidden xl:block" src="https://user-images.githubusercontent.com/54521023/116969935-c13d5b00-acd4-11eb-82b1-5ad2ff10fb76.png">
</div>
<div>
<img class="inline-block mt-24 md:mt-0 p-8 md:p-0" src="https://user-images.githubusercontent.com/54521023/116969931-bedb0100-acd4-11eb-99a9-ff5e0ee9f31f.png">
</div>
<div>
<img class="inline-block mt-28 hidden lg:block" src="https://user-images.githubusercontent.com/54521023/116969939-c1d5f180-acd4-11eb-8ad4-9ab9143bdb50.png">
</div>
</div>
</div>
</div>
</div>
</section>
/make_trouble 명령을 실행하여 mix 보기의 컨트롤러, 보기 및 상하문을 생성합니다.$ mix phx.gen.html Page Trouble make_trouble
/templates/trouble/index.html.heex을 엽니다.<%= @not_here %>
router.ex 파일은 다음 내용을 정의하고 이 두 루트의 역할 영역을 웹 응용 프로그램으로 제한해야 합니다.get "/", PageController, :index
get "/make_trouble", TroubleController, :index
mix phx.server을 실행하고 브라우저에서 localhost:4000을 탐색하여 시작할 수 있습니다.New Relic Elixir 에이전트를 설치하고 취약점을 추적할 때입니다!New Relic One을 사용한 Phoenix 애플리케이션 모니터링
이제 정상적인 Phoenix 프로그램이 생겼습니다. New Relic One 모니터링과 관찰성을 추가하겠습니다.다음 세 가지 단계가 있습니다.
Elixir 에이전트를
mix.exs 파일에 추가하여 다음과 같이 설치합니다.{:new_relic_agent, "~> 1.0"}
config.exs 파일을 열고 에이전트에 새 설정을 추가합니다.귀하는 귀하의 계좌에서 마음대로
app_name을 변경할 수 있습니다.이 예제에서는 환경 변수를 사용하여 New Relic 라이센스 키도 저장합니다.허가증 키가 공공git 저장소에 제출되지 않았는지 확인하십시오. 기밀이기 때문입니다.New Relic One이 애플리케이션에 설정되어 있으며 모든 원격 탐지 데이터를 추적하여 문제를 진단하고 예외를 감지할 수 있습니다.응용 프로그램이 로컬 컴퓨터, 로컬 서버, 클라우드 배치에서 실행되든 상관없습니다.오류를 만들고 코드 흐름으로 추적합시다.
코드 흐름 추적 오류 사용하기
브라우저에서 응용 프로그램으로 이동한 다음 제조 문제 빨간색 버튼을 선택합니다.기본적으로 내부 서버 오류 페이지가 생성됩니다.잘못된 뷰는 Phoenix에서 사용자 정의할 수 있지만 기본 뷰입니다.
무슨 일이야?New Relic One을 사용하여 오류를 찾은 다음 IDE의 오류로 바로 이동합니다.
New Relic One의 여러 위치에서 오류를 볼 수 있습니다.다음 화면 캡처에서 두 개의 가능한 경로를 가리켰습니다.하나는 오른쪽 아래 모서리의 오류율을 시각화하는 것이고, 다른 하나는 이벤트 제목의 측면을 통해 탐색하는 것이다.
더 자세한 정보를 보기 위해 발생하는 모든 오류를 선택할 수 있습니다.잘못된 스택 추적이 있는 경우 CodeStream을 사용하여 오른쪽 상단의 Open in IDE를 선택하여 IDE의 문제 소스로 직접 이동할 수 있습니다.
IDE와 configured with your New Relic user key에서 CodeStream을 확장자로 추가하면 IDE에서 CodeStream의 Observability 옵션을 볼 수 있고, New Relic이 식별하는 생산 오류 원본을 볼 수 있으며, 편집기를 떠나지 않아도 됩니다.
New Relic One을 사용하여 Elixir 애플리케이션을 모니터링, 관찰 및 디버깅하는 방법은 무엇입니까?New Relic Slack을 통해 대화에 참여하시거나 [email protected]을 통해 저희에게 메시지를 보내주세요!
다음 단계
New Relic One 계정이 없으면 sign up today으로 전화하십시오.무료 계정에는 월 100GB의 무료 데이터 수신, 무료 완전 접근 사용자, 무한한 무료 기본 사용자가 있습니다.
Reference
이 문제에 관하여(New Relic 및 CodeStream을 사용한 Phoenix 웹 응용 프로그램 디버그), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/newrelic/debugging-phoenix-web-applications-with-new-relic-and-codestream-128h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
