rtjob/nuxtjs_element_ui_firebase repository overview

⁠init

⁠docker-composeイメージ作成

$ docker-compose build

⁠docker シェル

docker-compose run vue /bin/sh

⁠初期プロジェクト作成

vue init nuxt-community/pwa-template .

⁠yarn install

yarn install

⁠package.json修正

  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",

⁠Dockefile修正

# install packages.
RUN yarn install

EXPOSE 3000
CMD ["yarn", "run", "dev"]

⁠ローカルで動作確認(別コンソール)

⁠dockerイメージ再構築

$ docker-compose build

⁠サーバ起動

# コンテナ起動
$ docker-compose up -d

# サーバの状態確認
$ docker-compose ps

⁠localhostで確認

ブラウザで http://localhost:3000/

⁠firebaseプロジェクト作成

⁠ブラウザから準備

firebase⁠からプロジェクト作成 アプリ名を設定後、Webを作成

⁠firestone

アプリ作成後、Databaseからデータベース作成

⁠firebase　deploy(shで確認)

⁠firebase-toolsをnode(docker)に追加

$ yarn global add firebase-tools

⁠firebase login

$ firebase login --no-localhost firebase loginし、トークン取得し、ターミナルに貼り付け

⁠firebase init

$ firebase init Firestore,Hostingを選択

公開ディレクトリをdustに設定 ? What do you want to use as your public directory? (public) dist

SPA として設定するか? y ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

⁠アプリケーションをビルド

$ npm run generate か $ yarn generate

⁠firebase deploy

$ firebase deploy

⁠確認

firebase console 開発 > HostingからURL確認し確認

ブラウザからインストール可能

またスマホから確認し、ホームに追加が可能

⁠アプリの変更を反映させる方法

⁠アプリケーションをビルド

$ npm run generate か $ yarn generate

⁠firebase deploy

$ firebase deploy

⁠参考元

dockerでnuxt.jsの環境を作ってみる⁠
Nuxt.js プロジェクトを Firebase Hosting にデプロイして公開する方法⁠
Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る⁠
作りながら学ぶVue！Slack風クローンアプリを作ろう【JS初心者でも可】⁠
Docker×Nuxt×Firebaseを使ってSPAxPWAのWEBアプリ開発環境を構築する⁠