前段
今時さくっとWEBサービスを公開するなら Vue.js + Firebase と聞きます。(俺調べ)
さらに Vue.js を簡単、というか規約により迷わなくするのが、Nuxt.js らしいので試してみることにしました。
とはいえ、node.js とか npm とか yarn とかすぐバージョンが変わったり、プロジェクトに依存しそうなやつはPCにインストールしたくないので、Docker経由で使いましょう。
確認した環境は以下です。ubuntuですが、dockerさえ入っていれば、MacでもWindowsでも動くと思われます。
- Ubuntu 18.04.2 LTS
- 17.12.0-ce, build c97c6d6
やってみる
Dockerfile
Dockerfileはこんな感じ。
FROM node:lts
RUN apt-get update && \
apt-get upgrade -y && \
yarn global add @vue/cli && \
yarn global add @vue/cli-init && \
yarn add firebase --save
EXPOSE 3000
WORKDIR /root
CMD tail -f /dev/null
なるべく息が長くなることを祈って、image は nodeのltsをベースにします。
おそらくセットで使われることが多いであろう、firebaseのライブラリもインストールしてみました。
とりあえず単なるnodeの実験場として使えるよう、CMDにtailをセットして、コンテナがあがりっぱなしになるようにしています。
portは nuxt.jsのデフォルトらしい3000番を外部に公開。
docker-compose.yml
続いてdocker-compose.ymlはこんな感じ
version: '3'
services:
vue:
build: .
volumes:
- ./work:/root
ports:
- 3000:3000
こんだけ。
workディレクトリに色々できるはずなので、mkdir workしておいてください。
こんな感じのディレクトリ構成になっていればOKです。
+ Dockerfile
+ docker-compose.yml
+ work/
Nuxt.jsプロジェクトを作る
yarnでnuxtプロジェクトを作成できるらしいので、vueコンテナに生成するコマンドを渡してやります。
docker-compose run vue yarn create nuxt-app nuxt_test1
yarn create nuxt-app が生成コマンド。 nuxt_test1がプロジェクト名です。
うまくいってれば色々聞かれるはずです。
$ docker-compose run vue yarn create nuxt-app nuxt_test1
yarn create v1.13.0
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > ts-node@8.1.0" has unmet peer dependency "typescript@>=2.0".
warning "@vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo-server-express > apollo-server-core > apollo-tracing@0.5.2" has incorrect peer dependency "graphql@0.10.x - 14.1.x".
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.15.2", while you're on "1.13.0".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@2.6.0" with binaries:
- create-nuxt-app
> Generating Nuxt.js project in /root/nuxt_test1
? Project name nuxt_test1
? Project description My badass Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support
? Use a custom UI framework bulma
? Use a custom test framework none
? Choose rendering mode Universal
? Author name
? Choose a package manager yarn
warning ../../package.json: No license field
yarn install v1.13.0
To get started:
cd nuxt_test1
yarn run dev
To build & start for production:
cd nuxt_test1
yarn run build
yarn start
Done in 61.53s.
とりあえず PWA Support と package managerに yarn 選んどけばよいと思います。
続いて nuxt.cofig.js をちょっとだけ修正します。
Docker経由だと起動時のホスト名の設定を変えないとホストOSからアクセスできないんですよね。
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
↓
export default {
mode: 'universal',
server: {
port: 3000,
host: '0.0.0.0', // <- これ!
},
/*
** Headers of the page
*/
head: {
title: pkg.name,
ここまで来たら docker-compose.yml にちょこっと追加
ports:
- 3000:3000
↓
ports:
- 3000:3000
working_dir: /root/nuxt_test1/
command: yarn dev
最後にコンテナ起動!
docker-compose up
Recreating startnuxtjsondocker_vue_1 ...
Recreating startnuxtjsondocker_vue_1 ... done
Attaching to startnuxtjsondocker_vue_1
vue_1 | yarn run v1.13.0
vue_1 | warning ../../package.json: No license field
vue_1 | $ nuxt
vue_1 | 08:46:12 ℹ Listening on: http://172.21.0.2:3000/
vue_1 | 08:46:12 ℹ Preparing project for development
vue_1 | 08:46:12 ℹ Initial build may take a while
vue_1 | 08:46:13 ✔ Builder initialized
vue_1 | 08:46:13 ✔ Nuxt files generated
vue_1 | webpackbar 08:46:15 ℹ Compiling Client
vue_1 | webpackbar 08:46:15 ℹ Compiling Server
vue_1 |
vue_1 | 08:46:15 ERROR (node:30) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
vue_1 |
vue_1 | webpackbar 08:46:20 ✔ Server: Compiled successfully in 4.60s
vue_1 | webpackbar 08:46:20 ✔ Client: Compiled successfully in 5.03s
vue_1 | 08:46:20 ℹ Waiting for file changes
vue_1 | 08:46:21 ℹ Memory usage: 183 MB (RSS: 335 MB)
ブラウザで http://localhost:3000/にアクセスしたら以下のページが表示されるはずです。
ちなみに、このコードは以下からcloneできます。よかったらどうぞ。
よし、私もNuxt.jsの勉強だ。。