Docker + Nodejs + Brunch + ReactJS 图片

Question

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

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

mkdir /home/username/Development/projectname/

在 projectname 文件夹中，我通过运行ning

克隆了 brunch/with-react 骨架回购

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

在 www 目录中创建了一个 Docker 文件

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

然后我通过运行ning:

启动容器

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

正在检查运行ning 容器状态

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.

我做错了什么？

**** 编辑 ****

[已解决] 替代方法

Docker文件

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目录更新b运行ch-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

打开另一个终端window和运行

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'
  },

Docker + Nodejs + Brunch + ReactJS 图片

Docker + Nodejs + Brunch + ReactJS image

node.js

brunch

docker

reactjs

dockerfile