게이츠비, React, Netlify, 아마존 S3를 사용하여 팟캐스트 사이트 구축
6개월 전에 가장 친한 친구 중 한 명에게 연락해서 인코딩 아나운서를 시작했어요!우리는 우리가 소프트웨어 개발자로서 지금까지의 과정을 반성하고 자신을 더욱 큰 한계로 끌어올리기를 바란다.
최근에야 우리는 모든 주요 플랫폼에 팟캐스트를 발표했다!여기 있다Code Chefs
우리는 처음부터 모든 것을 짓기로 결정했다!우리는 분배를 완전히 통제하고 싶다.따라서 우리는 스포티파이의 출시 방식, 광고 제어 방식 등을 맞춤형으로 제작할 수 있고, 팟캐스트 플레이어가 될 수 있는 사이트도 만들 수 있다!
GatsbyJs, React, Netlify, Amazon S3를 어떻게 사용해서 완성했는지
스택 작업 원리 개요
TL;박사 01 명
GatsbyJS는 내장된 유행 JAMstack 프레임워크다.그것은 블로그 세계에서 자주 사용되고 팟캐스트 사이트도 크게 다르지 않다.그중의 한 편.
대부분의 팟캐스트 플랫폼, 예를 들어 스포티파이, 애플 팟캐스트 등은 RSS Feed가 제어한다.게이츠비도 이런 상자를 열면 바로 사용할 수 있는 기능을 제공했기 때문에 우리는 서로 다른 플랫폼에 따라 이를 미세하게 조정할 수 있다는 것을 의미한다.
mp3 파일을 위탁 관리하는 것은 완전히 다른 문제다.이는 1분당 오디오의 후처리 용량이 약 1~2MB인 셈이다.정적 프런트엔드 사이트와 동일한 대역폭 내에서 파일을 호스팅하는 것은 무의미하므로 amazon S3을 선택했습니다.
AmazonS3는 이미지, 동영상 또는 mp3 파일과 같은 정적 자산을 배포하기 좋은 장소입니다.이것도 많은 돈을 쓸 필요가 없다. 나는 아직 데이터를 분석하지 않았지만, 매달 몇 센트씩 받는다.
Google은 게이츠비
.md 파일에서 위탁 관리된 mp3 파일이 S3에 있음을 지정했습니다.그런 다음 게이츠비가 작성할 때 작성한 RSS Feed에 끌어 넣습니다.Netlify를 사용하여 이 코드를 전송했습니다. 이 사이트는
https://codechefs.dev에 있습니다.Netlify는 GitHub 재구매 프로토콜 (예: development 에서 지점을 겨냥할 수 있는 CI/CD 기능을 가지고 있으며, 지점이 업데이트될 때마다 전방 사이트도 업데이트됩니다.우리 팟캐스트 사이트의 코드는 원본이다!방문here on github
GatsbyJs 및 RSS 구성
만약 당신이 이전에 ReactJS를 사용한 적이 있다면,GatsbyJS를 배우는 것은 사실상 상당히 혼란스러운 것이다.적어도 나한텐 그랬어!입문 테마 템플릿을 썼을 때, 나는 그것이 어떻게 작동하는지 알게 되었다. here하지만 가장 간단한 해석으로 분해할 테니 용서해 주세요!
GatsbyJS는 백엔드 시스템이자 프런트엔드 시스템입니다.그것은 내장된 nodej와 React이다.GatsbyJS 사이트가 Netlify, 심지어 로컬 호스트에 위탁 관리될 때 정적 (전단) 내용만 표시됩니다.너는 전단을 세워야 해!명령줄
$ gatsby build을 입력할 때 NodeJS를 사용하여 리포의 내용을 봅니다.그리고 SEO의 친절한 게시물과 페이지, 그리고 이후의 RSS Feed를 생성합니다.이것이 바로 게이츠가 JS보다 블로그 플랫폼으로서 매우 효과적인 이유이다!사이트에 대한 유일한 변화는 보통 새로운 블로그 게시물을 발표할 때나, 이 예에서 새로운 팟캐스트를 발표할 때이다.주식 거래 프로그램과 같은 빈번한 실시간 업데이트가 필요한 프로그램의 작업 효과가 좋지 않다.
GatsbyJS의 백엔드 구축 시간은 두 파일을 기준으로 구성됩니다.
만약 네가 이 두 문건을 통독한다면, 그것이 무엇을 하는지 한눈에 이해하기는 매우 어렵다.GraphQL 위에 세워졌고, 게이츠비는 전문적인 도서관 조수가 백스테이지에서 많은 일을 하고 있기 때문이다.
Gatsby-node.js는 정적 전면을 구축하는 입구점이다.그것은 SEO의 우호적인 웹 페이지, 분류, 라벨 등을 생성한다.대부분의 파일
gatsby-node.js이 서로 비슷해 보이므로 RSS Feed에 대한 구성에 대해 살펴보겠습니다.gatsby-config.js는 HTML, RSS Feed 등 가격 인하 콘텐츠를 생성하는 데 사용되는 모든 플러그인입니다.만약 당신이 Word Press를 사용한 적이 있다면, 그것들은 마치 Word Press 플러그인과 같다.이 라이브러리들은 직접 가져와서 작성할 필요가 없는 흔한 작업을 완성할 수 있습니다Gatsby-config.js에 gatsby-config.js라는 플러그인이 있습니다.이것이 바로 우리가 스포티파이, 애플 팟캐스트 등을 위해 RSS 원본을 생성하는 방식입니다!다음은 모든 플랫폼에 RSS를 생성하는 플러그인 구성
gatsby-plugin-feed입니다.{
resolve: "gatsby-plugin-feed",
options: {
setup(ref) {
const ret = ref.query.site.siteMetadata.rssMetadata;
ret.allMarkdownRemark = ref.query.allMarkdownRemark;
ret.generator = "GatsbyJS Advanced Starter";
return ret;
},
query: `
{
site {
siteMetadata {
rssMetadata {
site_url
feed_url
title
description
image_url
copyright
}
}
}
}
`,
setup: options => ({
...options, // https://www.npmjs.com/package/rss#feedoptions to override any specs
custom_namespaces: {
itunes: 'http://www.itunes.com/dtds/podcast-1.0.dtd',
},
site_url: 'https://codechefs.dev',
custom_elements: [
{ 'language': 'en'},
{ 'itunes:author': 'Vincent Tang & German Gamboa' },
{ 'itunes:explicit': 'clean'},
{ 'itunes:subtitle': "Hungry Web Developer Podcast"},
{ 'itunes:summary': "Looking to expand your skills as a Web Developer? Vincent Tang and German Gamboa break down topics in Javascript, NodeJS, CSS, DevOps, AWS, and career development!"},
{ 'itunes:owner': [
{'itunes:name': "Vincent Tang"},
{'itunes:email': "[email protected]"}
]},
{'itunes:category': [
{_attr: {
text: 'News'
}},
{'itunes:category': {
_attr: {
text: 'Tech News'
}
}}
]},
{'itunes:category': [
{_attr: {
text: 'Technology'
}},
]},
{'itunes:category': {
_attr: {
text: 'Education'
}
}},
{'itunes:type': "episodic"},
{'itunes:image': [
{_attr: {
href: 'https://codechefs.dev/logos/code_chefs_podcast_art.png'
}},
]},
{'image': [
{'url':'https://codechefs.dev/logos/code_chefs_podcast_art.png'},
{'title':'Code Chefs'},
{'link': 'https://codechefs.dev'},
]},
{
'itunes:keywords':"javascript, webdevelopment,html,css,js, codechefs"
},
],
}),
feeds: [
{
serialize(ctx) {
const { rssMetadata } = ctx.query.site.siteMetadata;
return ctx.query.allMarkdownRemark.edges.map(edge => ({
categories: edge.node.frontmatter.tags,
date: edge.node.fields.date,
title: edge.node.frontmatter.title,
description: edge.node.excerpt,
url: rssMetadata.site_url + edge.node.fields.slug,
guid: rssMetadata.site_url + edge.node.fields.slug,
custom_elements: [
{ "content:encoded": edge.node.html },
{ "itunes:author":"Vincent Tang & German Gamboa"},
{ "itunes:subtitle": edge.node.excerpt},
{ "itunes:duration": edge.node.frontmatter.showLength},
{"itunes:explicit": "no"},
{'enclosure': [
{_attr: {
url: config.s3bucket + edge.node.frontmatter.audioPath,
length: Number(edge.node.frontmatter.fileSize) * 1000 * 1000, // megabytes to bytes
type: "audio/mpeg",
}},
]},
]
}));
},
query: `
{
allMarkdownRemark(
limit: 1000,
sort: { order: DESC, fields: [fields___date] },
) {
edges {
node {
excerpt
html
timeToRead
fields {
slug
date
}
frontmatter {
title
cover
date
category
tags
shortDescription
episodeNumber
audioPath
showLength
fileSize
}
}
}
}
}
`,
output: config.siteRss,
title: config.siteRssTitle
}
]
}
}
gatsby-plugin-feed에 XML RSS Feed가 생성됩니다.먼저 사이트에 대한 데이터를 출력한 다음 각 세트를 XMLhttps://codechefs.dev/rss.xml 태그로 포장
codechefs 생성 RSS Feedhere를 환영합니다.
Amazon S3 구성
Amazon S3는 다른 PodCast 릴리스에 원본 mp3 파일을 호스팅하여 사용합니다.기본적으로 이 버킷의 모든 내용은 공공입니다. 모든 탐지기가 접근할 수 있기 때문입니다.
이 설정을 사용하면 언제든지 s3 메모리통에 mp3를 업로드할 수 있습니다.
업로드된 모든 mp3 파일을 대중이 읽을 수 있도록 해야 할 수도 있습니다. 이 파일을 누르고 액세스 제어 목록 (ACL) 으로 이동해서 읽기 속성을 부여하십시오.
또한 아마존 S3 버킷에cloudwatch를 추가하고 Google analytics를 추가하여 당신의 사이트와 관련된 통계 데이터를 볼 수 있습니다
ReactJS 오디오 플레이어
ReactJS는 사이트의 물리적 팟캐스트 플레이어로 사용됩니다.기본 HTML 오디오 플레이어는 상당히 제한되어 있기 때문에 사용자 정의 이벤트 처리 프로그램과 사용자 정의 UI를 사용하여 이 이벤트를 제어합니다.
예를 들어 파일의 재생 속도, 음량, 정지 에피소드 등을 조절할 수 있다
다음은 audio player의 소스 코드입니다.
잠시 후 나는 단독 블로그 글을 써서 어떻게 일을 하는지 소개할 것이다.
Netlify+Github
Netlify는 GatsbyJS 사이트를 배치하는 데 사용되고 Github는 위탁 관리 코드 자체에 사용됩니다.우리는 환매 협의 중
<item> 지점의 최신 변화에 따라 게이츠비를 배치하여 갱신한다.설치 절차는 다음과 같습니다.
Netlify는 사용자 정의 도메인도 제어합니다.호스트 공급업체 Namecheap의 이름 레코드를 가리키고 Netlify를 가리킵니다.더 많은 정보를 찾을 수 있습니다here
작업흐름
다음은 모든 것의 조합 방식!두뇌 폭풍 한 편에서 모든 팟캐스트 플랫폼에 발표하는 방법:
그리고 이 파일을 AmazonS3에 수동으로 업로드합니다. GatsbyJS에서 메타데이터를 사용하여 블로그 태그 파일을 만듭니다.보아하니 이렇다.
---
title: "React vs. Vue"
slug: "react-vs-vue"
cover: "code_chefs_podcast_art.png"
date: 2020-05-23
audioPath: 002_react_vs_vue.mp3
episodeNumber: 002
fileSize: 67.8
showLength: 49:23
category: "tech"
shortDescription: "How do these two popular frontend frameworks compare with each other?"
tags:
- programming
- react
- vue
---
### How do these two popular frontend frameworks compare with each other?
In this episode, we discuss the similarities and differences between React and ..........
development는 최종 기록의 최종 크기가 몇 메가바이트인지를 가리킨다.애플은 특히 이런 데이터(그리고 팟캐스트와 관련된 많은 데이터)가 필요하기 때문에 이런 정보를 미리 수집하는 것이 중요하다.파일 크기를 동적으로 자동으로 정할 수 있는 방법은 많지만 mp3 파일 크기의 내용을 검사하는 데는 많은 노력이 필요하지 않다.fileSize는 mp3 파일의 길이를 가리킨다.showLength는 파일 자체의 이름이며, 게이츠비가 이 파일의 위치를 알 수 있도록 s3 버킷을 이 위치에 배치합니다.이 블로그를 만든 후, 우리는 그것을
audioPath 지점으로 밀어 넣었다.Netlify 에서 분기의 변경 사항을 읽고 새 RSS 소스를 게시합니다.각 팟캐스트 플랫폼은 이 요약에서 업데이트하는 데 약 3-4시간이 걸린다.
요약
이것은 당신이 자신의 팟캐스트 사이트를 만드는 데 도움을 줄 수 있기를 바랍니다.GatsbyJS 팟캐스트 사이트를 처음부터 만드는 것에 대한 정보를 많이 찾지 못했기 때문에 저희가 처음 시작할 때 갖고 싶었던 안내서를 만들었습니다.
추가 링크:
codechefs.dev - Dell PodCast 웹 사이트
code chefs source code - 소스 코드
vincentntang.com - 개인 홈페이지
Reference
이 문제에 관하여(게이츠비, React, Netlify, 아마존 S3를 사용하여 팟캐스트 사이트 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vincentntang/building-a-podcast-site-using-gatsby-react-netlify-and-amazon-s3-58m7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
