Heroku

2022年11月28日をもってHerokuフリープランが終了しました https://blog.heroku.com/new-low-cost-plans 個人開発する際にコスト面と手軽さを考えるとAWSにデプロイするのはあまりふさわしくないでしょう。Herokuだともっと手軽くデプロイできるし無料枠もあるので、個人で開発したおもちゃをデプロイするのはちょうどいい感じだと思います。この間筆者が開発した多言語WebニュースアプリもHerokuにデプロイしています。 本記事では、Herokuにデプロイする際のTipsをいくつかを紹介したいと思います。少しでもお役に立てれば幸いです。 Tip 1: GitHub Actionsで自動デプロイ https://devcenter.heroku.com/articles/git コマンドラインでいちいち打つのは面倒くさいので、自動デプロイしたほうが断然便利ですね。もちろんHerokuのGUIからも自動デプロイできますが、せっかくソースコードもGitHubで管理しているので、GitHub Actions を使ったほう便利だと思います。 heroku-deployというアクションを利用すると、Herokuのメールアドレスとheroku_api_keyさえわかれば、GitHub Actionsから自動デプロイできます。ちなみに、heroku_api_keyはこちらから取得できます。 GitHub Actionsの設定についてですが、他の記事を見たかぎりon: [push, pull_request]に設定している方もいました。本番にデプロイするという意味合いもあるので、個人的にはrelease（リリース作成するたびに、パイプラインが発火される）に設定したほうがいいではないかと思います。ミスってpushしちゃったのも防げます。 on: release: types: published name: Deploy to PROD jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: akhileshns/heroku-deploy@v3.12.12 with: heroku_api_key: ${{secrets.HEROKU_API_KEY}} heroku_app_name: 'your_app_name' heroku_email: ${{secrets.HEROKU_EMAIL}} Tip 2: 無料枠を使いこなす 現時点(2022年5月)Herokuのプランはこうなっています。 https://devcenter.heroku.com/articles/free-dyno-hours Personal accounts are given a base of 550 free dyno hours each month. In addition to these base hours, accounts which verify with a credit card will receive an additional 450 hours added to the monthly free dyno quota....

目的 筆者自身はトリリンガル（自称）のため、簡単に日本語、英語、中国語などの複数の言語のホットニュースを読めるサービスががあると便利だなとずっと思っていました。「Google Newsで良くない？」って言われそうなところですが、Google Newsはやや使いづらいと感じました。 例えば、 言語を切り替えるのに「言語地域→候補から選ぶ→更新」3回クリックする必要がある 本当にヘッドライトしか閲覧したくないのに、「おすすめ」や「ピックアップ」などがうるさい モバイルのweb版が見づらい・アプリをダウンロードしたくない 芸能ニュースにまったく興味がないため、ニュースの表示をカスタマイズしたい また、やってみないと（何かを残さないと）学んだ技術をすぐ忘れるのはもったいないのも考えて、多言語ニュースWebアプリを自作するという発想に至りました。 使った技術 バックエンド NodeJS Express フロントエンド インタラクションがほぼないため、フレームワークは使っておらず、DOMをいじっただけ CSSはStart Bootstrapの無料テンプレートを使用 DB MongoDB インフラ Heroku コスト 毎月7ドルだけです！！（Heroku Hobbyの料金） 成果物 https://www.multitrue.news https://github.com/aibazhang/multitrue それでは、詳細を解説していきます。 下準備 ニュースはどこから収集するか 最初はニュース収集するかについてけっこう時間を費やしました。ニュース関連のAPIがかなり多いですが、 ある程度の無料枠がある 多言語のニュースが簡単に取れる 使いやすさ 3つの観点から考えて、NewsAPIとNews dataの2つのAPIに絞りました。ただ、後々News dataは言語を指定しても他の言語のニュースが混ざっていることがあると気づいたので（例えば、言語を日本語と指定したにも関わらず、日本関連の英語ニュースが出てくる）、NewsAPI一択となりました。ちなみに、こちらの記事はNewAPIについて詳しく説明しています。また、RSSなど他の人が作ったニュースAPIを使わないという方法もあるようですが、今回は試していなかったです。 データベース ニュース情報を収集するAPIを見つけましたが、ユーザがリクエストを投げるたびに、NewsAPIに叩くのは明らかに現実ではないので、ニュースを保存するDBが必要です。データ量が少ないかつ永久無料枠がベストなので、MongoDB@Atlasを選びました。AWSとかにいい感じにデポロイしてくれるし、便利です。（無料枠の上限は500MB）また、テーブルはせいぜい1つ、2つくらい、リレーションも特にないはずなので、RDBを使う必要もありませんでした。 フロントエンド CSSから実装するはだるいので、Start BootstrapにあるClean blogを使わせてもらいました。（感謝） 詳細 システム構成はこんな感じです。図を見ていただくとわかると思いますが、特にややこしいことをやっていないです。 定期的にNewsAPIからデータと取って、Mongodbに入れます ユーザからのリクエストが来る度に、バックエンドでhtml（正確にいうとpug）を作って、レスポンスを返します。いわゆるSSR(Server Side Rendering)ですね。 コスト面とシンプルさを考えているため、デポロイはHerokuというクラウドプラットフォームサービスを利用しています NewsAPIからMongodb データの定期取得ために、Node.jsのスクリプトを書きました。 NewsAPIの無料枠は100req/dayそして複数の言語のニュースを取得したいといった制約があるので、cronを使って一日の取得回数を制限しています。data-import-config.jsonはルートの下にあるデータをインポートする際のconfigファイルです。 ソース const dotenv = require('dotenv'); const NewsAPI = require('newsapi'); const Cron = require('croner'); const dataImportConfig = require('....