记录使用 Docker 搭配 node 镜像搭建环境学习 Nuxt.js

学习 Nuxt.js

1.获得 node 的镜像

和往常一样,先用 dcoker 获得 node 的镜像:

docker iamge pull node

pull 后查看镜像:

PS E:\docker\nuxt\theOne> docker images
REPOSITORY       TAG         IMAGE ID       CREATED        SIZE  
node             latest      7493e35c7ffa   2 weeks ago    908MB 
...

2.启动 node 容器

以宿主机 E:\docker\nuxt\theOne 为目录来学习 nuxt.js,通过 nuxt.js 的文档知道,它运行的默认端口是 3000,所以启动的容器命令就是这样:

docker run -it --rm --name nodeTest -p 3000:3000 --privileged -v E:\docker\nuxt\theOne:/app node bash

3.运行第一个 demo

安装 vue.js 文档一步一步指示,最后得到一个可以运行 yarn dev 的开发 demo :

root@e23f42474b88:/app# yarn dev
yarn run v1.22.5
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.6                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated

4.宿主机访问

然后开开心心的在浏览器访问 localhost:3000,期待美好的事情发生,然而:
无法访问

难道是端口没映射上,于是检查下容器的端口映射:

PS E:\docker\nuxt\theOne> docker container ls
CONTAINER ID   IMAGE            COMMAND                  CREATED          STATUS          PORTS                                                                                                                 NAMES
6403ce4f031d   node             "docker-entrypoint.s…"   31 minutes ago   Up 31 minutes   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp  

可以看到端口映射是没问题的…

5.互联网 debug

之后的一段时间进入了漫长的 google\baidu
怀疑人生
怀疑 docker 没吃透(又去把文档看了一遍)
怀疑人生
要不我还是在本地环境搭建一个 node 环境?
不行不行,系统不干净了…
最后在一个博文上看到了原因:

脚手架配置 host 默认绑定在 localhost,等于绑定到了 127.0.0.1
127.0.0.1 是一个回环地址,只能本机访问,外部无法访问。
要监听到 0.0.0.0 这个地址

知道原因了,就好解决了,找到配置文件 nuxt.config.js, 添加 :

server: {
    port: 3000,
    host: '0.0.0.0' // default: localhost
  },

然后重新运行:

root@e23f42474b88:/app# yarn dev
yarn run v1.22.5
$ nuxt

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.15.6                       │
   │                                        │
   │   ▸ Environment: development           │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Listening: http://172.17.0.2:3000/   │
   │                                        │
   ╰────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                    01:52:05  
ℹ Initial build may take a while                                                                                                                                       01:52:05  
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                    01:52:06  
✔ Builder initialized                                                                                                                                                  01:52:06  
✔ Nuxt files generated      

眼睛明亮的小伙伴能发现,对比先前,现在的 Listening 已经变成了具体的 IP,而不是 localhost!

6.再次访问

在本地访问:
初始

使用 docker 的原因

不想在电脑上装各种开发环境,需要什么,就用 docker 运行一个容器,暴露出一个端口给宿主主机,这样电脑在不做开发的时候、不运行 docker 的时候,它只包含最基本的运行程序,像是刚装完系统一样干净!

参考资料

用docker 搭建 node.js服务,端口映射无效

本作品采用《CC 协议》,转载必须注明作者和本文链接
Less is more.
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!