👨‍💻

「JupyterNotebookを一瞬で記事にするプラットフォーム」Magicodeの現在の技術スタック、(2021 11/21更新)

2021/07/30に公開約2,100字

Magicodeとは

Magicodeは、「Jupyter Notebookを一瞬でブログ化」がコンセントのサービスです。それ以外はこちらのZennやQiitaと同じようなブログサービスですが、Jupyter Notebookを使う人、つまりデータサイエンスなどのサイエンス領域に特化したプラットフォームです。→https://jp.magicode.io/

動画は↓

https://www.youtube.com/watch?v=IWcUbVnQxkw

Magicodeができたきっかけ

実は最初はまったく別のプロダクトを作っていました。そのプロダクト上で、Djangoで作ったCMSがあり、「Jupyter Notebookで原稿を書いて、HTMLに変換する機能」を実装していました。これは完全に自分たち用で作ったもので気に入って使っていました。

あるとき「この機能だけ切りはなしたら面白いのでは?」となり、2か月ほどかけ今のMagicodeをリリースしてみました。具体的な機能についてはこちらのQiitaに投稿しています。(Qiitaトレンド4位に載りました!ありがとうございます!!)

「1.フロントエンド」、「2.バックエンド」、「3.インフラ」、「4.その他の連携サービス」
の順で書きとめます。もっとこうしたほうがいいなどご意見ありましたらぜひコメントで教えていただけると幸いです。

1.フロントエンド

フロントエンドはNextjsを使っています。とても快適に開発できて気に入っています。Zennのこの記事を参考にさせていただきブログ部分ではISRを使っています。いまZennは少し変わったようですが。

UIフレームワークにはMaterial-UIを使っています。賛否両論あるところですが、デザイナーなしで素早くかつそこそこきれいに開発するのにはとてもいいと思います。個人的にはSnackbarがお気に入りです。いわゆるToastです。

2.バックエンド

バックエンドにはDjango REST frameworkを使っています。個人的にDjangoを一年近く触っていて慣れているというのが大きいです。PythonでJupyter Notebookの変換が容易にできるのもあります。

3.インフラ

フロントエンドはVercelにデプロイしています。最初はAmplifyやServerless Frameworkを使ってAWSにデプロイしたかったのですが、あきらめて簡単なVercelにしました(けっきょくAWSですが笑)。Zennが少し前にGCPに移行した記事を見ていろいろ考えています。

と思っていたら、Nextjs12など、Vercelの勢いがすごいので信頼できると2021 11月現在感じています。

バックエンドはAWSのElasticBeanstalkにデプロイしており、現在Fargateに移行しようとしています。
====2021 11/21 追記====
Fargateに移行しました。
========

DBはRDSのPostgreSQLです。画像など静的ファイルはS3にアップして、CloudFrontから配信しています。

4.その他連携サービス

Stripe

決済のため。Magicodeでは、有料で公開できる機能、記事に投げ銭やスーパーコメント(YouTubeのスパチャに近い)ができる機能があるので、その部分で使っています。
ダッシュボード最高です。今回は使っていませんがStripe Checkoutの、このYouTube動画が雰囲気を理解するのにとても参考になりました。(NextjsでStripe Checkoutを実装する動画)

SendGrid

メール通知のため。

Github Actions

CIのため

Github apps

自分のGithubレポジトリ上のJupyter Notebookを自由に追加できるように使用しています。Github OAuth Appで認証してGithub APIで情報を取得しています。

Firebase Authentication

ユーザ認証のため

最後に

ここまで読んでいただきありがとうございました!
興味を持っていただけたらぜひ使ってみてください!またアドバイス、フィードバックお待ちしております、よろしくお願いします。

https://jp.magicode.io/

Discussion

ログインするとコメントできます