Firebase+Vue3/TypeScript+Docker+でWebアプリ開発環境を作ってみた

３行まとめ

• Dockerを業務であまり使わせてもらえないので触りたかった
• 個人開発でWebAppを作りたかった
• 以前から触りたかったFirebaseを本気でやりたかった

完成したもの（デプロイしただけ）

study-record-app.web.app

• api キーとかいろいろあるのでgithubの公開はできませんがひとまず簡単にまとめます

アーキテクチャ？

• Node.js用のコンテナ
• Firebase用で使うコンテナ
• ローカルのファイルのマウント

手順まとめ

1. docker-compose ファイルの用意
2. docker file の用意
3. docker-compose の起動とfirebaseのほうコンテナに入る
4. vue3/typescriptのプロジェクトのひな形作成
5. firebase のセットアップ
6. vueプロジェクトのビルド
7. firebaseのデプロイ

docker-compose ファイルの用意

• node.js で$ yarn serveに使うようのつもりのコンテナ
• firebase で使うつもりのコンテナ
  • 9005 portを使うようなのでここを開けたコンテナを作った（デプロイには必要らしい）
  • しかしデバッグなどに使うようにするにはほかの方法が必要かもしれない

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: dockerfile-app
    container_name: study-record
    ports:
      - '8080:8080'
    volumes:
      - ./:/src
    stdin_open: true
    tty: true
  firebase:
    build:
      context: .
      dockerfile: dockerfile-firebase
    container_name: firebase-container
    ports:
      - '9005:9005'
    volumes:
      - ./:/src
    stdin_open: true
    tty: true

docker file の用意

• dockerfile-app

FROM node:lts-alpine
WORKDIR /src

RUN yarn global add @vue/cli

COPY . /src
RUN yarn
RUN yarn build

• dockerfile-firebase

FROM node:lts-alpine
WORKDIR /src

RUN yarn global add firebase-tools

COPY . /src
RUN yarn
RUN yarn build

docker-compose の起動とfirebaseのほうコンテナに入る

## Docker setup
docker-compose up --build -d 

docker exec -it study-record /bin/sh
docker exec -it firebase-container /bin/sh

vue3/typescriptのプロジェクトのひな形作成

• 内容はお好みで
• 注意: ビルドしたファイルはdistディレクトリに展開されるのでデプロイ先のディレクトリを変更する
  • 通常はpublicになっているので注意

vue create study-record

yarn でビルドできるようにしておいた

firebase のセットアップ

• ブラウザでfirebaseのプロジェクトを作成
• WebAppを作っておく
  • ブラウザでログインする必要がある

firebase login
firebaes init

vueプロジェクトのビルド

• eslintにすごい怒られるのでとりあえずfixを付けた　あとで調べる

Replace `'study-record-app'` with `"study-record-app"

• ソースコード上はダブルクォーテーションを使っていたがビルドするとシングルクォーテーションになってしまっているようだった

yarn build --fix

firebaseのデプロイ

firebase deploy