個人開発でマネタイズ可能なサービスを思い付いたが、とりあえずサクッとプロトタイプを作りたいので、前にも作ったnuxt.js+Firebaseの構成で、stripeで支払い出来るようにしたい。

デザイン方面が弱いので、まずはブログ的なもの、というか"note"の簡易版のようなものでも作ってデザインを色々いじってみようかなと思う。

方針

googleアカウントでログイン可能
ログインすれば誰でも記事を投稿できる

よくあるブログの管理画面みたいなものは無し
ログインしてれば自分の記事はそのまま編集ができる
デザインは投稿者側が変更できない
記事に画像がUPできる
編集はMarkdownかな

開発開始

とりあえずfirebaseにプロジェクトを作成後、dockerでnuxt開発環境を作成

Dockerfile

FROM node:12.9.0-alpine

ENV TZ Asia/Tokyo
WORKDIR /app

RUN apk update && \
   npm install -g npm && \
   npm install -g vue-cli && \
   npm install -g nuxt && \
   npm install -g create-nuxt-app && \
   npm install -g firebase-tools

ENV HOST 0.0.0.0
EXPOSE 3000
EXPOSE 9005

RUN yarn

docker-compose.yml

version: "3"
services:
 web:
   build: .
   ports:
     - 3030:3000
     - 9005:9005
   volumes:
     - .:/app
   stdin_open: true
   tty: true
   command: yarn dev

docker-compose使う必要ない気もするが、微妙にポートの割当変更していたりするので使う。（他のアプリとの共存用）

dockerコンテナ内での初期操作

docker-compose run --rm web ash
> create-nuxt-app .
> firebase login
> firebase init

firestoreのデータ構造を考える

・ログインユーザであり記事の作者でもあるAuthor
・記事であるArticle
とりあえずこの２つがあればいい。
AuthorのサブコレクションとしてArticleを置けばいいか。
AuthorのIDはログイン後に自由入力（重複不可）させてURLとして使う感じで。

とりあえず今日はここまで
あとやること
・SSRするかどうか考える
・公開はFirebase Hostingにするか、now.shにするか、練習のためにAWSにdockerをデプロイしてみたいとも思う
・実際の開発