├── .prettierignore ├── .prettierrc ├── src ├── static │ ├── favicon.ico │ └── README.md ├── components │ ├── README.md │ └── Logo.vue ├── layouts │ ├── README.md │ └── default.vue ├── pages │ ├── README.md │ └── index.vue ├── assets │ └── README.md ├── plugins │ └── README.md ├── middleware │ └── README.md └── store │ └── README.md ├── .circleci └── config.yml ├── docker-compose.yml ├── tsconfig.json ├── package.json ├── Dockerfile ├── README.md ├── nuxt.config.ts └── .gitignore /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .nuxt/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } -------------------------------------------------------------------------------- /src/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/potato4d/docker-multi-stage-build-on-nuxt/HEAD/src/static/favicon.ico -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | machine: true 5 | steps: 6 | - checkout 7 | - run: 8 | name: Build Application 9 | command: | 10 | docker build --target build-env . -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.4' 2 | services: 3 | nuxt: 4 | build: 5 | context: . 6 | target: dev-env 7 | volumes: 8 | - .:/app 9 | ports: 10 | - '3000:3000' 11 | command: 'env HOST=0.0.0.0 yarn dev' 12 | -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /src/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /src/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /src/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /src/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /src/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /src/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /src/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": [ 7 | "esnext", 8 | "esnext.asynciterable", 9 | "dom" 10 | ], 11 | "esModuleInterop": true, 12 | "allowJs": true, 13 | "sourceMap": true, 14 | "strict": true, 15 | "noEmit": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "~/*": [ 19 | "./*" 20 | ], 21 | "@/*": [ 22 | "./*" 23 | ] 24 | }, 25 | "types": [ 26 | "@types/node", 27 | "@nuxt/types" 28 | ] 29 | }, 30 | "exclude": [ 31 | "node_modules" 32 | ] 33 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-on-docker", 3 | "version": "1.0.0", 4 | "description": "My marvelous Nuxt.js project", 5 | "author": "HANATANI Takuma", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt-ts", 9 | "build": "nuxt-ts build", 10 | "generate": "nuxt-ts generate", 11 | "start": "nuxt-ts start", 12 | "format": "prettier './**/*.{js,ts,vue}' --write" 13 | }, 14 | "dependencies": { 15 | "@nuxt/typescript-runtime": "^0.1.3", 16 | "@nuxtjs/axios": "^5.3.6", 17 | "nuxt": "^2.0.0" 18 | }, 19 | "devDependencies": { 20 | "@nuxt/typescript-build": "^0.1.11", 21 | "nodemon": "^1.18.9", 22 | "prettier": "^1.18.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # 開発環境向け 2 | 3 | # as をつけることでビルド環境に命名を追加 4 | FROM node:10.16.1-alpine as dev-env 5 | WORKDIR /app 6 | COPY . /app 7 | RUN apk update 8 | RUN yarn 9 | EXPOSE 3000 10 | CMD ["yarn", "dev"] 11 | 12 | # ビルド環境向け 13 | 14 | # as をつけることでビルド環境に命名を追加 15 | FROM node:10.16.1-alpine as build-env 16 | WORKDIR /app 17 | COPY . /app 18 | RUN apk update 19 | RUN yarn 20 | RUN yarn build 21 | 22 | # 本番環境向け 23 | 24 | # メインのイメージは特に何もつけなくて良い 25 | FROM node:10.16.1-alpine 26 | 27 | WORKDIR /app 28 | COPY . /app 29 | 30 | # 別のビルドから成果物をコピー可能 31 | COPY --from=build-env /app/.nuxt /app/.nuxt 32 | 33 | # 本番では devDeps を消してファイルサイズを削減 34 | RUN yarn install --production 35 | EXPOSE 3000 36 | CMD ["yarn", "start"] 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Docker multi stage build on Nuxt.js project 2 | 3 | This is a sample for Nuxt Meetup (in Japan) of 2019/08/26. 4 | 5 | ## Stack 6 | 7 | - Nuxt.js v2.9 8 | - Universal Mode 9 | - with TypeScript 10 | - Docker v19.x 11 | - with docker-compose v3.x 12 | - CircleCI v2.x 13 | - use machine image 14 | 15 | ## Structure 16 | 17 | Using Docker's multi stage build (available from 17.05), the development environment, build environment, and production environment can be shared with a single Dockerfile. 18 | 19 | ```Dockerfile 20 | # For development 21 | 22 | FROM node:10.16.1-alpine as dev-env 23 | WORKDIR /app 24 | COPY . /app 25 | RUN apk update 26 | RUN yarn 27 | EXPOSE 3000 28 | CMD ["yarn", "dev"] 29 | 30 | # For build 31 | 32 | FROM node:10.16.1-alpine as build-env 33 | WORKDIR /app 34 | COPY . /app 35 | RUN apk update 36 | RUN yarn 37 | RUN yarn build 38 | 39 | # For production 40 | FROM node:10.16.1-alpine 41 | 42 | WORKDIR /app 43 | COPY . /app 44 | 45 | # Copy from another build 46 | COPY --from=build-env /app/.nuxt /app/.nuxt 47 | RUN yarn 48 | EXPOSE 3000 49 | CMD ["yarn", "start"] 50 | ``` -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { Configuration } from '@nuxt/types' 2 | 3 | const config: Configuration = { 4 | srcDir: 'src', 5 | mode: 'universal', 6 | /* 7 | ** Headers of the page 8 | */ 9 | head: { 10 | title: process.env.npm_package_name || '', 11 | meta: [ 12 | { charset: 'utf-8' }, 13 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 14 | { 15 | hid: 'description', 16 | name: 'description', 17 | content: process.env.npm_package_description || '' 18 | } 19 | ], 20 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 21 | }, 22 | /* 23 | ** Customize the progress-bar color 24 | */ 25 | loading: { color: '#fff' }, 26 | /* 27 | ** Global CSS 28 | */ 29 | css: [], 30 | /* 31 | ** Plugins to load before mounting the App 32 | */ 33 | plugins: [], 34 | /* 35 | ** Nuxt.js modules 36 | */ 37 | modules: [ 38 | // Doc: https://axios.nuxtjs.org/usage 39 | '@nuxtjs/axios' 40 | ], 41 | buildModules: [ 42 | [ 43 | '@nuxt/typescript-build', 44 | { 45 | typeCheck: true, 46 | ignoreNotFoundWarnings: true 47 | } 48 | ] 49 | ] 50 | } 51 | 52 | export default config 53 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 61 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 34 | 35 | 67 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store -------------------------------------------------------------------------------- /src/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | 15 | 94 | --------------------------------------------------------------------------------