Docker + Nodejs + 早午餐 + ReactJS 图像

Question

我正在尝试设置我的开发环境，只是在我的笔记本电脑上安装 Docker。我要创建的第一个容器是 Node.js + Brunch.io + ReactJS。

在我的 Ubuntu 16.04 主机上，我创建了一个目录

mkdir /home/username/Development/projectname/

在 projectname 文件夹中，我通过运行克隆了 brunch/with-react 骨架存储库

git clone https://github.com/brunch/with-react.git www

在 www 目录中创建了一个 Dockerfile

FROM node:6.3.1

RUN apt-get update && apt-get install --yes npm
WORKDIR /opt

COPY package.json /opt  
RUN npm install

COPY . /opt
RUN npm install -g brunch/brunch
RUN brunch build

EXPOSE 3333

CMD ["npm", "start"]

构建镜像启动

docker build . -t brunch

然后我通过运行来启动容器：

docker run -d -P --name web brunch

检查日志

docker logs web

输出显示服务器已启动并正在侦听端口 3333

npm info it worked if it ends with ok
npm info using npm@3.10.3
npm info using node@v6.3.1
npm info lifecycle projectname_www@0.0.1~prestart: projectname_www@0.0.1
npm info lifecycle projectname_www@0.0.1~start: projectname_www@0.0.1

> projectname_www@0.0.1 start /opt
> brunch watch --server

04 Aug 04:48:34 - info: application started on http://localhost:3333/
04 Aug 04:48:35 - info: compiled 174 files into 3 files, copied index.html in 2.5 sec

检查正在运行的容器状态

docker ps

输出

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                     NAMES
efd43b57c23f        brunch              "npm start"         3 seconds ago       Up 2 seconds        0.0.0.0:32771->3333/tcp   web

正在启动网络浏览器

http://localhost:32771

但是页面没有加载。 Screenshot.

我做错了什么？

**** 编辑 ****

[已解决] 替代方式

Dockerfile

FROM node:6.3.1

RUN apt-get update && apt-get install --yes npm
WORKDIR /opt

COPY package.json /opt  
RUN npm install

EXPOSE 3333

在www目录更新brunch-config.js文件：

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },
  server: {
    hostname: '0.0.0.0'
  },
  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

从 www 目录运行容器：

docker run -P -it -v $PWD:/opt/app/ brunch bash

这会将主机卷安装到容器并运行它。

~/Development/brunch(branch:master*) » docker run -P -it -v $PWD:/opt/app/ brunch bash

root@e0fd2c6bfa66:/opt/app#

运行以下命令

npm install -g brunch/brunch
brunch build
npm start

你会看到输出

npm info it worked if it ends with ok
npm info using npm@3.10.3
npm info using node@v6.3.1
npm info lifecycle your-app@0.0.1~prestart: your-app@0.0.1
npm info lifecycle your-app@0.0.1~start: your-app@0.0.1

> your-app@0.0.1 start /opt/app
> brunch watch --server

07 Sep 19:00:41 - info: application started on http://127.0.0.1:3333/ (lo)
07 Sep 19:00:41 - info: application started on http://172.17.0.2:3333/ (eth0)
07 Sep 19:00:43 - info: compiled 174 files into 3 files, copied index.html in 2.8 sec

打开另一个终端窗口并运行

docker ps

输出应该是这样的

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                     NAMES
e0fc2d6bfa66        brunch              "bash"              14 minutes ago      Up 14 minutes       0.0.0.0:32771->3333/tcp   berserk_albattani

打开浏览器

http://localhost:32771

这样可以在docker容器中使用node.js，同时将项目文件存储在本地主机上。

如果容器已经创建但停止，启动它运行

docker exec -it container_name bash
npm start

Answer 1

你必须在 brunch-config 中设置

  server: {
      hostname: '0.0.0.0'
  },