記錄使用 Docker 搭配 node 映象搭建環境學習 Nuxt.js

bigbug發表於2021-06-04
DockerUXJS

學習 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.

相關文章