docker - Dockerizing 使用 webpack 的 vue.js 应用程序
问题描述
我通过 webpack 对 vue.js 应用程序进行了 dockerirized,并使用 docker-compose 运行它。它在终端中运行没有问题,但是当我转到浏览器时:“不可能到达 ip”。我使用 docker-toolbox(因此是一个 VM)。首先,我创建一个新文件夹并执行以下行,以便使用 webpack 初始化一个新的 vue 项目:
npm install -g vue-cli
vue init webpack vueapp2
现在,如果我使用它运行我的应用程序,npm run dev
它就可以正常工作。为了对它进行 dockerizing,我制作了一个 Dockerfile:
FROM node:alpine
RUN npm install -g vue-cli
WORKDIR '/app'
COPY ./package*.json ./
RUN npm install
COPY ./ ./
CMD [ "npm", "run", "dev"]
和一个 docker-compose.yml:
version: "3"
services:
node-app:
build: .
ports:
- "8080:8000"
为了使用 docker Toolbox 与 Docker 一起工作,我必须将本地机器端口映射到容器端口 (8080:8000)。这应该可以正常工作,因为我使用实时服务器成功提供的 vue.js 应用程序(https://github.com/Aragorn1992gb/vue-liveserver-dockerized)做了类似的事情。但这就是使用 webpack no:当我数字容器 ip: 时,它说“不可能到达 ip” http://192.168.99.100:8080/
。CMD [ "npm", "run", "dev"]
Dockerfile 上的行应该执行命令“npm run [script 'dev' stay on package.json]”。那是我的 package.json:
{
"name": "vue-app2",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Aragorn1992gb <giacomobrunetta@gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
我找到了不同的解决方案,但没有任何成功。建议之一是--host 0.0.0.0
像这样添加到 dev 中:"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
,因为它必须到达我的 docker ip,但仍然无法正常工作。实际上必须是那个“dev”脚本有问题,使用dockerfile运行它有一些问题。这是我在 repo 上的项目:https ://github.com/Aragorn1992gb/vue-webapp-dockerizing
解决方案
我只是将容器端口从 8000 更改为 8080:
version: "3"
services:
node-app:
build: .
ports:
- "8080:8080"
因为在 config/index.js 上指定的端口是8080
. 我还可以更改该端口(即 8000)并在 docker.compose.yml 中更改它(即 8080:8000)。也--host 0.0.0.0
把开发,像这样:
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
因为 webpack 只监听 localhost 容器,所以我必须允许来自其他接口的请求(容器 ip)
推荐阅读
- python - 如何使用 Python 中的数据集使用 PSO(粒子群优化)实现聚类?
- sql - 在使用“CASE”时,是否有任何功能可以减少我的查询大小
- react-native - 是否可以从 AsyncStorage 中删除所有项目
- java - 找不到数据源 JNDI
- javascript - 从 React 中的父 JSON 数据中获取所有子节点
- php - 图像未在 Laravel 中的正确位置上传
- reactjs - 反应道具与儿童。什么时候用?
- java - Apache Ignite SQL 查询结果差异
- kubernetes - Kubernetes - 验证部署
- django - Django modelManager - 在视图/列表视图中看不到实例/对象 - 没有错误