NuxtとPython FastAPI、Postgresqlでブログサービスをサクッと作ってVercelとHerokuで無料デプロイしてみた

作ったもの

作った動機

ブログサービスは昔Railsで作ったことあるんだけど、VueかReact使ってSPAでまた作りたいなーとぼんやり思ってたので。あとPython FastAPIが最近評判良さそうで使ってみたかった。

2021/8/29現在実装した機能

ユーザ登録、ログイン
記事投稿
記事の詳細確認

まあ、とりあえず基本機能ができた程度の進捗。

デプロイ手順

FastAPIのherokuへのデプロイ

FastAPI用のDockerイメージを開発環境用に使ってたんでそのイメージを使い回してHerokuにデプロイしたいんだけど、ただ開発環境では開発用のシェルで実行していたんで本番環境ではそこを外したイメージを用意した。

FROM tiangolo/uvicorn-gunicorn-fastapi:python3.7

RUN /usr/local/bin/python -m pip install --upgrade pip

COPY ./app /app
RUN pip install -r requirements.txt

↓本番用のDockerではこれを外す
CMD /start-reload.sh

heroku.yml

build:
  docker:
    web: Dockerfile.production

heroku.ymlを用意したらFastAPIのプロジェクトフォルダで以下のコマンドを実行するとデプロイできる

# herokuにログイン
heroku login
# アプリケーション作成
heroku create
# Docekrコンテナでデプロイするよう設定
heroku stack:set container
# デプロイ実行
git push heroku main

また、Postgreのデータベースを作成してテーブルを作成する（テーブル作成用のプログラムは現状作ってないので手動のSQLで作っておく）

## 無料のデータベース作成
heroku addons:create heroku-postgresql:hobby-dev
# herokuのコマンドプロンプトを立ち上げてそこからSQL実行
heroku pg:psql

Herokuの注意点

Heroku上でアプリケーションのポートを保持するPORTという環境変数がデフォルトで作られているのでプログラム上それを使用するようにしておく（自分で80とか3000とかポート指定できないっぽい）
PostgreのURLが設定されているDATABASE_URLという環境変数も作られているのでPostgreへの接続にはその変数を使用するようにしておく

NuxtのVercelへのデプロイ

VercelでのデプロイはNuxtの場合簡単。

作業としてやることは

vercel.jsonを用意してNuxtのルートディレクトリに置いておく
GithubにpushしてVercelの管理画面上でレポジトリ選択してデプロイ実行
環境変数でバックエンドのURLを指定しているのでVercelの管理画面上からPython FastAPIをデプロイしたherokuのURLを設定する
デプロイ後、VercelのURLが発行されるのでFastAPIのCORSでそのURLを許可する

vercel.jsonはこんな感じ

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ]
}

Vercelの注意点

ドメインが複数発行されるようなので全てCORSに追加しといた方がいいかも。1つしか使わないなら1つだけ指定でもいいけど

今後やりたいこと

ソーシャルログイン
記事のタグ付け
ユーザのフォロー機能
マークダウン対応
ユーザ登録はセッション周りはちゃんと作ってないので改善する？
記事へのタグ付け
画像や動画の埋め込み対応。。。

などなどやろうと思えばいくらでもあるけどまあ、基本機能の実装とデプロイまでやったら割と気が済んでしまったな。。NuxtとFastAPIでちょっと遊びたかっただけだし

また気が向いた時に作るか

yikegaya’s blog

仕事関連（Webエンジニア）と資産運用について書いてます

Nuxt.jsとPython FastAPIで作ったブログサービスを無料デプロイした