初めてHerokuを使ってみました。いろいろ新しい発見があったため、メモを残しておきます。
成果物
技術文章を入力してボタンをクリックすると、誤字や、修正した方が良い箇所を教えてくれます。
趣味＋勉強を兼ねて開発してみました。
レポジトリはこちら。
構成
インフラ
Heroku
言語
Node.js
フレームワーク
Vue.js
文章入力→校正結果のレンダリングに利用
express
webアプリのホスティングに利用
校正エンジンに採用したライブラリ
textlint
textlint-rule-preset-ja-technical-writing
エディタ
Ace Editor
Herokuについて
いわゆる PaaS (Platform As A Service) として有名なサービス。サーバー・ミドルウェアなどがワンセットになっており、コードをデプロイするとウェブアプリが公開できる。個人向けの無料プランから、商用のビジネス向けプランまで。
AWSのAmplify、GCPのFirebaseのようなサービス。
Salesforce社のサービスの一つ。2010年前後にSF社がHerokuを買収。
Herokuの開発、デプロイ
ほぼ公式ドキュメントどおりに進めました。
brew で、HerokuのCLIをインストール
brew install heroku/brew/heroku
npm initして、開発用のディレクトリ作成
Expressをインストール後、htmlとJSでゴリゴリ開発
HerokuのCLIを使い、ローカルでテスト
heroku local web
開発したアプリをローカルでgit commitして、Herokuへプッシュ
git push heroku main
HerokuのGitとGitHub
Heroku CLIでは、ローカルにgitレポジトリを作成して開発します。開発したアプリは、 git push でHerokuにデプロイできます。
…が、デプロイした後に気がついたのですが、HerokuはGitHubをオリジンのレポジトリとして指定できる。
GitHubのアカウントをお持ちの方は、レポジトリをGitHubにまとめた方が何かと便利かと思います。
Aceエディタ
このシステムでは、入力した文章の行番号を検知し 「何行目の※＊が間違っています」と表示するよになっています。
入力欄に行番号を表示する方法を色々調べたのですが、エディタライブラリを使うのが一番簡単に思えたため、OSSのエディタを調査しました。
最終的に Monaco Editor と Ace Editor のどちらかを採用することに。
Monaco Editor
Visual Studio Code に採用されているエディタ。非常に高機能。
Ace Editor
AWS の Cloud9 に作用されているエディタ。 AWS以外にも採用事例が多く、人気が高い
インストールして触った結果、Aceの方がシンプルで個人的に理解しやすかったため、Aceエディタを組み込みました。
textlint
textlintは、自然言語のチェックができる総合的なライブラリ。辞書エンジンを組み替えることによって、多種多様な言語・ルールを設定することができます。
初めて触った時「こんな便利なライブラリがあるのか」と、本気で感動しました。先人の皆様の知見と情熱に、頭が下がる思いがします。
開発してみた感想
Herokuの便利さに驚きました。
Expressを利用した構成をデプロイするだけで、ウェブ上できちんとアプリとして動作します。パスやライブラリの配置変えることなく、そのまま使えました。めっちゃ便利。なんで今まで使ってなかったんだろう。
PaaSサービスって、本当に便利で面白いですね。
今度はぜひ AWS の Amplify や CodeStar で構築してみて、Firebase や Heroku との違いを実感してみたいです。
↧