标准Dockerfile和docker-compose.yml配置本文提供了两种容器的配置方式，其中针对 Nuxt 的方

本文提供了两种容器的配置方式，其中针对 Nuxt 的方案是将文件复制到容器，而针对 Vite 的两种方案都是采用挂载卷的方案，两种方案各有优劣，复制的方式不会因为源文件变化而暂停服务，挂载卷则将与宿主机息息相关，有可能会有权限冲突需要额外授权。

Nuxt

我这里用了 yarn --production 是基于我对 package.json 进行了整理，确保在没有 devDependencies 的情况下能够正常打包，你需要确认你的环境是否相同。

你既可以把 yarn --production 放在 Dockerfile 中，也可以把它放在 docker-compose.yml 的 command 中，但因为启动方式是守护态，如果你将它放在 docker-compose.yml 中，将需要额外手段才能看到依赖安装以及 build 的结果。

Dockerfile

FROM node:lts                                                                                                           MAINTAINER xmo
RUN mkdir -p /app
ENV HOST 0.0.0.0
COPY . /app
WORKDIR /app
EXPOSE 3000
RUN (yarn config set registry https://registry.npm.taobao.org) && (yarn config set sass-binary-site https://npm.taobao.org/mirrors/node-sass) && (yarn --production) && (yarn build)

docker-compose.yml

port 左边是 host 的端口，右边是容器的端口

version: "3"                                                                                                            services:
  release:
    container_name: nuxt
    build:
      context: ./
      dockerfile: ./Dockerfile
    command: bash -c "yarn start"
    ports:
      - "3000:3000"

启动命令

这里我是将命令做成了一个 deploy.sh 来执行，因此启动命令是 bash deploy.sh ，文件内容如下：

source /etc/profile                                                                                                         # 
echo '~-----~ docker-compose rm -f ~-----~' && docker-compose rm -f
echo '~-----~ docker-compose pull ~-----~' && docker-compose pull
# 如果你的npm包进行了修改而没有触发，可以尝试在下一行所在的位置添加--no-cache后缀，即更改为 docker-compose build --no-cache
echo '~-----~ docker-compose build ~-----~' && docker-compose build
echo '~-----~ docker-compose up -d~-----~' && docker-compose up -d
echo '~-----~ remove <none> ~-----~' && docker rmi -f  `docker images | grep '<none>' | awk '{print $3}'`
echo '~-~ docker ps && docker image ls ~-~' && docker ps && docker image ls

Vite 开发 Dev

通过 volumes 的方式让项目共享卷，相当于用容器里的nodejs代替了在外部环境中的nodejs

用这种方式进行开发不应当使用守护态启动的方式。

Dockerfile

FROM node:lts-alpine                                                                                                     MAINTAINER xmo
RUN mkdir -p /app
ENV HOST 0.0.0.0
WORKDIR /app
EXPOSE 3000
RUN (yarn config set registry https://registry.npm.taobao.org) && (yarn config set sass-binary-site https://npm.taobao.org/mirrors/node-sass)

docker-compose.yml

version: '3'

services:
  web:
    container_name: vite
    build:
      context: ./
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
    command: bash -c "yarn && yarn dev --host"

由于处于开发环境，容器内的端口需要通过 --host 才能暴露出来供使用

启动命令

docker-compose up

Vite 部署 Build

Dockerfile 和启动命令同上

docker-compose.yml

version: '3'

services:
  web:
    container_name: node-demo
    build:
      context: ./
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
    command: bash -c "yarn && yarn build"

如果是 vite 打包之后的文件会出现在 dist 文件夹中。

Help

开发环境实际上不推荐使用 docker 的容器，特别是 vite 未来还会加强 fs 的严格性限制，导致开发的端口暴露需要做额外配置。

但是这种方式允许你在一台安装了 docker 的机器上快速开发。

本教程使用的是 yarn 作为默认包管理工具，你可以将它替换成 npm 。
你还可以启动一个 nginx 容器来进行代理 dist 包，实现一站式部署。

FROM node:lts-alpine                                                                                                     MAINTAINER xmo
RUN mkdir -p /app
ENV HOST 0.0.0.0
WORKDIR /app
EXPOSE 3000
RUN (yarn config set registry https://registry.npm.taobao.org) && (yarn config set sass-binary-site https://npm.taobao.org/mirrors/node-sass) && (yarn) && (yarn build)

FROM nginx
RUN mkdir /app
COPY --from=0 /build/dist /app
COPY --from=0 /build/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

这需要你在对应目录下做好 nginx 的配置。

记得写好 .dockerignore 不然会把一堆用不上的内容也复制进了 docker 。

# Created by .ignore support plugin (hsz.mobi)

### Node template

# Logs

/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
package-lock.json
.vscode

# Runtime data

pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover

lib-cov

# Coverage directory used by tools like istanbul

coverage

# nyc test coverage

.nyc_output

# Grunt intermediate storage (<http://gruntjs.com/creating-plugins#storing-task-files>)

.grunt

# Bower dependency directory (<https://bower.io/>)

bower_components

# node-waf configuration

.lock-wscript

# Compiled binary addons (<https://nodejs.org/api/addons.html>)

build/Release

# Dependency directories

node_modules/
jspm_packages/

# TypeScript v1 declaration files

typings/

# Optional npm cache directory

.npm

# Optional eslint cache

.eslintcache

# Optional REPL history

.node_repl_history

# Output of 'npm pack'

*.tgz

# Yarn Integrity file

.yarn-integrity

# dotenv environment variables file

.env

# parcel-bundler cache (<https://parceljs.org/>)

.cache

# next.js build output

.next

# nuxt.js build output

.nuxt

# Nuxt generate

dist

# vuepress build output

.vuepress/dist

# Serverless directories

.serverless

# IDE / Editor

.idea

# Service worker

sw.*

# macOS

.DS_Store

# Vim swap files

*.swp