環境構築

LIGのVue.js+Firebaseでチャットアプリを作る記事を参考にしてdocker + ubuntuで実装。ホストPC(Mac)からのlocalhost確認でハマる箇所があったのでメモ。

dockerでubuntuを構築し、ポートを3つマッピングするコマンド

docker run -it -p 8080:8080 -p 9005:9005 -p 5000:5000 --name vuetest ubuntu

ポート8080はVue.js、9005と5000はFirebaseで後ほど使用することになるが、ここでマッピングしておかないとホストPCでlocalhostにアクセスできない。

ubuntuにnpmとvimをインストールするコマンド

以降全てubuntuコマンド

apt-get update
apt-get install nodejs
apt-get install npm
apt-get install vim

Vueをインストール

npm install -g vue-cli

Vue.jsの構築

ubuntuでディレクトリ移動(任意)

cd /usr/local/

Vue.jsプロジェクト作成

色々尋ねられるけど全てエンターでOK

vue init webpack myapp

作成したフォルダに移動してモジュールインストール

cd myapp
npm install

ポートの設定を変更する為にconfig内のindex.jsを編集

vi config/index.js

hostをlocalhostから0.0.0.0に変更

// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST

プロジェクト起動

npm run dev

ホストPCのブラウザからhttp://localhost:8080/にアクセスするとVue.jsによって「Welcome to Your Vue.js App」とページが生成されていることがわかる。

Firebaseサイトのコンソールからプロジェクトを作っておくところは割愛。

ubuntuにFirebaseインストール

npm install -g firebase-tools

Firebaseにログイン

firebase login

生成されたURLをコピーしてホストPCのブラウザで開き、アカウントを選ぶ。「Woohoo!Firebase CLI Login Successful」と表示されればOK。

コンソールに戻りFirebaseを構築

firebase init

選択肢の中から「Database:」と書かれている項目をスペースバーで選択してエンター。自分で作成したプロジェクトを選ぶ(LIGの手順を参照)。

database.rules.jsonを下記の通り書き換える

{
    "rules": {
        ".read": "true",
        ".write": "true"
    }
}

firebase.jsonを下記の通り書き換える

{
    "hosting": {
        "public": "public"
    },
    "database": {
        "rules": "database.rules.json"
    }
}

serveコマンドをオプションでアドレス指定して入力

firebase serve -o 0.0.0.0