iframe에 Jupyter 노트북 배치

Jupyter Notebook을 열고 iframe에 붙여넣기

내 서비스 페이지에 iframe으로 Jupyter Notebook을 첨부하려면:

당신은 태그 할 수 있습니다 아래와 같이 사용합니다. <div> <pre class="shell" data-ke-language="shell"><code> ..생략.. </b-card> <iframe src="http://localhost:8888/" width="100%" height="500px"></iframe> </div> ..생략..</code></pre> </div> 하지만 아래와 같은 오류가 발생합니다. <div class="crp_related crp-rounded-thumbs"> '추천 관련글, <ul><li><a href="https://last.eternals.kr/media-literacy-self-test-chatgpt-%ec%a0%9c%eb%8c%80%eb%a1%9c-%ec%82%ac%ec%9a%a9%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/" class="crp_link post-1326"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" title="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" data-lazy-src="http:http:http:http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" title="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" /></noscript></figure>(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법</a></li><li><a href="https://last.eternals.kr/%ec%a7%81%ec%9e%a5%ec%9d%b8-%ec%b2%ab-%ec%82%ac%ec%9d%b4%eb%93%9c%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8-%eb%82%98%ed%98%bc%ec%9e%90%eb%8f%84%ec%a0%84%ea%b8%b0/" class="crp_link post-1240"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="직장인 첫 사이드프로젝트 나혼자도전기" title="직장인 첫 사이드프로젝트 나혼자도전기" data-lazy-src="http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="직장인 첫 사이드프로젝트 나혼자도전기" title="직장인 첫 사이드프로젝트 나혼자도전기" /></noscript></figure>직장인 첫 사이드프로젝트 나혼자도전기</a></li><li><a href="https://last.eternals.kr/ai-math-1-%eb%b2%a1%ed%84%b0%ea%b0%80/" class="crp_link post-1276"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="Ai math. 1. 벡터가" title="Ai math. 1. 벡터가" data-lazy-src="http:http:http:http:http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="Ai math. 1. 벡터가" title="Ai math. 1. 벡터가" /></noscript></figure>Ai math. 1. 벡터가</a></li><li><a href="https://last.eternals.kr/%ec%9e%ac%eb%af%b8%ec%9e%88%eb%8a%94-gif-%eb%aa%a8%ec%9d%8c/" class="crp_link post-1494"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="재미있는 GIF 모음" title="재미있는 GIF 모음" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTJfMTEy/MDAxNjgxMjY5ODcyMjE1.z7sXy8B8qRVPi2QfZvRAp2SfJ_FaeRCJQmLUP42kBlAg.Q-UnVSvD8aQ9O92FB2xsKOCIpfc8XHEWCtG9AhlY5jUg.GIF.cuhouse1/1681269791747%EF%BC%8D1.gif?type=w800" /><noscript><img width="150" height="150" src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTJfMTEy/MDAxNjgxMjY5ODcyMjE1.z7sXy8B8qRVPi2QfZvRAp2SfJ_FaeRCJQmLUP42kBlAg.Q-UnVSvD8aQ9O92FB2xsKOCIpfc8XHEWCtG9AhlY5jUg.GIF.cuhouse1/1681269791747%EF%BC%8D1.gif?type=w800" class="crp_thumb crp_first" alt="재미있는 GIF 모음" title="재미있는 GIF 모음" /></noscript></figure>재미있는 GIF 모음</a></li></ul><div class="crp_clear"></div></div> <figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="337" data-origin-height="254"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" data-lazy-srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuOloB%2Fbtr6bu3bllL%2Fu4F69xzOYLT0AA3tWNpdlk%2Fimg.png" data-origin-width="337" data-origin-height="254" data-lazy-src="https://blog.kakaocdn.net/dn/cuOloB/btr6bu3bllL/u4F69xzOYLT0AA3tWNpdlk/img.png"><noscript><img decoding="async" src="https://blog.kakaocdn.net/dn/cuOloB/btr6bu3bllL/u4F69xzOYLT0AA3tWNpdlk/img.png" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuOloB%2Fbtr6bu3bllL%2Fu4F69xzOYLT0AA3tWNpdlk%2Fimg.png" data-origin-width="337" data-origin-height="254"></noscript> </figure> <figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="389" data-origin-height="59"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" data-lazy-srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAq4FZ%2Fbtr6oJETl3b%2FFkJUAbLKzTikTyVyk0LGF1%2Fimg.png" data-origin-width="389" data-origin-height="59" data-lazy-src="https://blog.kakaocdn.net/dn/bAq4FZ/btr6oJETl3b/FkJUAbLKzTikTyVyk0LGF1/img.png"><noscript><img decoding="async" src="https://blog.kakaocdn.net/dn/bAq4FZ/btr6oJETl3b/FkJUAbLKzTikTyVyk0LGF1/img.png" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAq4FZ%2Fbtr6oJETl3b%2FFkJUAbLKzTikTyVyk0LGF1%2Fimg.png" data-origin-width="389" data-origin-height="59"></noscript> </figure> Jupyter의 설정을 변경합니다. <blockquote data-ke-style="style3">vi ~/.jupyter/jupyter_notebook_config.py</blockquote> 아래에서 설정 섹션을 찾으십시오. <blockquote data-ke-style="style2">/ tornado_settings를 누르고 n을 눌러 검색합니다. </blockquote> Jupyter 노트북을 포함하려면 아래에 도메인과 IP 주소를 입력하세요. <blockquote data-ke-style="style3">c.NotebookApp.tornado_settings = { ‘헤드라인’: { ‘Content-Security-Policy’: ‘frame-ancestors self http://localhost:9000’, } } </blockquote> 여기서 localhost:9000 프레임선조 의미 허용 그리고 다시 Jupyter Notebook을 실행하면, localhost:9000의 아무 페이지에서나 붙여넣기만 하면 됩니다. <iframe loading="lazy" src="about:blank" width="100%" height="500px" data-rocket-lazyload="fitvidscompatible" data-lazy-src="http://localhost:8888/">

더.