docker-compose&vuepress&firebaseでブログ作る

はじめに

docker-compose&vuepress&firebaseで簡単にブログを作る方法についてまとめました。2020年の8月に執筆したものなので情報古かったらごめんなさい。

開発環境

  • Mac OS 10.15.6
  • docker 19.03.5
  • docker-compose 1.25.2 build 698e2846

下準備

作業用ディレクトリの作成＆移動

mkdir vuepress_blog
cd vuepress_blog

Dockerfile

# vuepress_blog/Dockerfile
FROM node:14.8.0-alpine

WORKDIR /myapp

COPY . .

RUN yarn global add vuepress firebase-tools

docker-compose.yml

# vuepress_blog/docker-compose.yml
version: "3.7"

services:
  vue-press:
    build: .
    tty: true
    ports:
      - "8080:8080" # yarn devした時のport
      - "5000:5000" # firebase serveした時のport
      - "9005:9005" # OAuthに必要なport
    volumes:
      - .:/myapp
    container_name: vue_press
  • 8080: vueのデフォルトポート
  • 5000: firebase serveした時に使われるポート
  • 9005: firebaseのloginでOAuthするときに使われるポート なのでそれぞれhostと対応させておく。

.profile

firebaseコマンドを使う時にパスで怒られるので、以下を.profileにパスを記述しておく。

# vuepress_blog/.profile
PATH=$PATH:`yarn bin -g`

Vuepressでブログ作成

dockerコンテナ立ち上げて、中に入る

docker-compose up -d --build
docker exec -it vue_press sh

vuepressアプリの作成

yarn create vuepress

いろいろ聞かれるので答える。

? Select the boilerplate type // blogを選択
? What's the name of your project? // プロジェクトネームを記入
? What's the description of your project? // プロジェクトの説明を記入 (多分空欄でも大丈夫)
? What's your email?  // メールアドレスを記入　(多分空欄でも大丈夫)
? What's your name? // 空欄で大丈夫
? What's the repo of your project.  // 空欄で大丈夫

これが終わるといろんなファイルが生成される。

ディレクトリ構成

この時点でのディレクトリ構成はこんな感じ。

vuepress_blog/
├── blog/
│   ├── _posts/
│   └── .vuepress/
│       ├── components/
│       ├── styles/
│       ├── config.js
│       └── enhanceApp.js
├── node_modules/
├── Dockerfile
├── docker-compose.yml
├── README.md
├── firebase.json
├── package.json
├── package-lock.json
├── yarn.lock
├── .firebase/
├── .firebaserc
└── .profile

localにサーバを立てる

yarn
yarn dev //これでlocalhost:8080にサーバが立つ。

動作確認

http://localhost:8080にアクセスする。 うまくいっていればVUEPRESS BLOG EXAMPLEと書いてあるページが表示されるはず。

firebaseへのデプロイ

デプロイに向けてビルド

yarn build

リンクが表示されるのでブラウザで開く。ログインがうまくいったらinitで初期化。

firebase init

firebase initすると諸々質問が出てきたあと、

What do you want to use as your public directory?

と聞かれるので、ビルドして生成されたdistディレクトリを指定する。

ビルドされたファイルで動作確認

firebase serve --host 0.0.0.0

firebaseのドキュメントによると、

デフォルトでは、firebase serve は localhost からのリクエストにのみ応答します。つまり、ホストされているコンテンツには同じパソコンのウェブブラウザからアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。

とのこと。コンテナとホストが別デバイスとして認識されるようなのでhostを指定し、全てのデバイスからのアクセスを可能にしている。

デプロイ

firebase deploy

するとURLが表示されるのでブラウザで叩く。 firebase serveの時と同じ画面が表示されているはず！もうデプロイ完了です！簡単！

まとめ

てこずるところもちょっとあったけどなんとかできました〜！ いろいろと機能を追加していこうと思います。

参考サイト