如何容器化 Vue.js 应用程序？

Posted 2023-02-22

【中文标题】如何容器化 Vue.js 应用程序？

【英文标题】：How to Containerize a Vue.js app?

【发布时间】：2018-09-20 08:03:21

【问题描述】：

我无法在 Chrome 中通过 http://172.17.0.2:8080/ 本地访问该站点，我收到“172.17.0.2 响应时间过长”。

我使用inspect命令获取了容器的IP地址。

docker inspect -f 'range .NetworkSettings.Networks.IPAddressend e83c95d05d63

我使用的运行命令。

docker run -it -p 8080:8080 --name portfolio-vue portfolio-vue:v1

还有我的 Dockerfile

FROM node:7.7-alpine

ADD package.json /tmp/package.json
RUN cd /tmp && npm install

RUN mkdir -p /opt/portfolio-vue && cp -a /tmp/node_modules /opt/portfolio-vue-app

WORKDIR /opt/portfolio-vue
COPY . /opt/portfolio-vue

EXPOSE 8080
CMD ["npm", "start"]

【参考方案1】：

在默认的 vue-cli 设置中，npm start（您正在使用的命令）运行 npm run dev。

同样，默认情况下，npm run dev 仅绑定到本地主机。

将--host 0.0.0.0 添加到package.json 中的webpack-dev-server 行，以便您可以从外部 docker 容器访问它：

来自类似的东西：

  "scripts": 
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

类似于 (add --host 0.0.0.0)：

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

注意：我假设，因为您使用了CMD ["npm", "start"]，您正在创建一个用于开发或调试目的的容器。如果您的目标是生产，您真的应该考虑生成捆绑包 (npm run build) 并直接在像 nginx 这样的 HTTP 服务器上提供生成的文件（也可以在 docker 中创建）。

【讨论】：

注意这个方案不是绑定所有地址的，只绑定ipv4的，你基本上排除了大半的互联网

在较新的 webpack 版本中，你有 --disable-host-check，但是，在当前的 vue-cli 中，--host 0.0.0.0 是最好的。有人可能会尝试用 IPv6 等价物替换 0.0.0.0，但我从未这样做过，也无法保证是否有效。