yikegaya’s blog

yikegayaのブログ

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

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

作ったもの

blog-app-frontend-red.vercel.app

ソースコード

github.com

github.com

作った動機

ブログサービスは昔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の場合簡単。

作業としてやることは

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

vercel.jsonはこんな感じ

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

Vercelの注意点

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

今後やりたいこと

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

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

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