码头+ Nodejs + Brunch + ReactJS图像

Question

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

在我的Ubuntu16.04主机上我创建了一个目录

mkdir /home/username/Development/projectname/

在项目名称文件夹中，我通过运行

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

启动web浏览器

http://localhost:32771

但是页面没有加载。屏幕截图。

我做错了什么？

编辑*

解决替代途径

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目录更新早午餐-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

在早午餐配置中，您必须设置

  server: {
      hostname: '0.0.0.0'
  },