借助docker使你的Nuxt项目更优雅

1,703 阅读2分钟

让你的Nuxt应用在docker这个buff加成下拥有更加优雅的开发部署流程

  1. 确保本地docker服务正常启动,并且装了docker-compose(Mac/Windows用户可忽略,安装docker默认附带安装了),然后编辑你的Nuxt项目中的package.json文件:
{
    .....
    // 添加如下配置
    "config": {
        "nuxt": {
            "host": "0.0.0.0", // 配置为0.0.0.0可局域网内调试应用
            "port": "9527" // 这里设置你服务的端口号
        }
    },
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
    },
}
  1. 你需要在你的Nuxt根目录下创建一个docker-compose.yml文件,然后编辑你的文件如下:
# 参考node官方docker镜像的推荐配置
version: "2"
services:
  node:
    image: "node:10" # 这里建议使用node:10 或者 node:8
    user: "node"
    working_dir: /home/node/app # 设置工作目录
    environment: # 设置你的环境为dev或者prod
      # - NODE_ENV=production
      - NODE_ENV=development
    volumes:
      - ./:/home/node/app # 将当前目录挂载到容器的工作目录
    ports:
      - "9527:9527" # 映射端口号,如不设置则在宿主机访问不了docker内部服务
    expose:
      - "9527" # 设置docker内服务暴露端口
    # command: "npm run start"
    command: "npm run dev" # 设置容器启动后执行的命令

  1. 此时可以尝试运行docker-compose up -d (up:启动服务, -d:后台启动) 此时如果终端输出Createing xxx_node_1 ... done 说明启动成功了,你可以打开你的浏览器尝试访问一下,如果失败了请检查之前1、2步操作 停止服务并删除容器:docker-compose down
  2. 本地调试服务开启日志: 在dev模式下往往需要查看日志,找到页面error的原因或优化页面报的warning,这时候只需:docker-compose logs -f (-f/--follow: Follow log output) -f:将项目启动后的日志持续输出,在dev模式下更改页面内容就会自动热加载,日志也会跟随打印。
  3. 手动重启项目:docker-compose down && docker-compose up -d

要不明天早上上班来尝试一下docker-compose up -d && docker-compose logs -f