让你的Nuxt应用在docker这个buff加成下拥有更加优雅的开发部署流程
- 确保本地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"
},
}
- 你需要在你的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" # 设置容器启动后执行的命令
- 此时可以尝试运行
docker-compose up -d
(up:启动服务, -d:后台启动) 此时如果终端输出Createing xxx_node_1 ... done
说明启动成功了,你可以打开你的浏览器尝试访问一下,如果失败了请检查之前1、2步操作 停止服务并删除容器:docker-compose down
- 本地调试服务开启日志:
在
dev
模式下往往需要查看日志,找到页面error
的原因或优化页面报的warning
,这时候只需:docker-compose logs -f
(-f/--follow: Follow log output) -f:将项目启动后的日志持续输出,在dev
模式下更改页面内容就会自动热加载,日志也会跟随打印。 - 手动重启项目:
docker-compose down && docker-compose up -d
要不明天早上上班来尝试一下docker-compose up -d && docker-compose logs -f
?