Docker + Nodejs + Brunch + ReactJS图像

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

在我的Ubuntu 16.04主机上,我创build了一个目录

mkdir /home/username/Development/projectname/ 

在项目名称文件夹里面,我已经通过运行克隆了早午餐/反应骨架回购

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

www目录里面创build了一个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"] 

build立图像启动

 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 

但是页面没有加载。 截图

我究竟做错了什么?

**** 编辑 ****

[解决]替代方法

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 

打开另一个terminal窗口并运行

 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,同时将项目文件存储在本地主机上。

如果容器已经被创build但是被停止了,启动它就运行

 docker exec -it container_name bash npm start 

在brunch-config里面,你必须设置

  server: { hostname: '0.0.0.0' },