はじめに
Nuxt.js、Firebaseを利用してPWAを作りたいと思い、手を動かす。
他の方の参考になればと思って記録を残していきますが、急に途切れたらすみません。
今回はとりあえず次のことができるようにします。
- Docker上でNuxt.jsのアプリをインストールする
- Docker上のアプリをlocalhostで確認する
こうすることでローカルを汚すことなく以降の開発ができるだろう、という狙いです。
アプリは、今のところメモ・TODOリストを作るつもりです。
とりあえずディレクトリを作成。
mkdir sparrow-memo
cd sparrow-memo
手順
下記を参考にしながらDockerfileを作りました。
https://www.bravesoft.co.jp/blog/archives/3942
# 2020/01時点のLTSのnodeをもとにする
FROM node:12.14.1-alpine3.11
# 作業ディレクトリを/workにする
WORKDIR /work
# 環境変数の設定
ENV HOST 0.0.0.0
ENV PORT 80
# 80番ポートを公開
EXPOSE 80
これを build することで、オリジナルのDockerイメージを作ります。
そしてそのイメージを利用してDockerコンテナ』をつくって、ログイン。
docker build -t nuxt-image .
docker run -it --name nuxt -p 80:80 -v $(pwd):/work nuxt-image sh
下記を参照しながら、Dockerコンテナ内でNuxt.jsのアプリをインストールします。
https://ja.nuxtjs.org/guide/installation/
yarn create nuxt-app app
? Project name app
? Project description My awesome Nuxt.js project
? Author name Kobori Akira
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)
するとローカルにも app ディレクトリ、そしてその中身が出来上がっているはずです。
ここでコミット。
あとはDockerコンテナ内で、アプリを立ち上げてみます。
cd /work/app
yarn dev
そしてlocalhostにアクセスすると、、、
ちゃんとページが立ち上がりました！
今後開発を続けたい場合は、コンテナを終了したら自動で削除されるようにしてもよさそうです。
docker run -it --rm --name nuxt -p 80:80 -v $(pwd):/work nuxt-image sh
ここまで