docker部署nuxt+axios问题

想要用docker来部署一个项目,前端用nuxt,后端用的spring-boot。
但是部署nuxt的时候发现一个问题,由于nuxt是服务端渲染的页面
如果axios设置为baseURL: '192.168.9.59:9090/api/'这种以ip的形式访问(192.168.9.59是我虚拟机的ip,端口9090是后端开发的端口,已测试在浏览器访问192.168.9.59:9090/api/是可以的),此时访问nuxt就会报错:
Error: connect EHOSTUNREACH 192.168.9.59:9090 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1161:14)
就是无法访问到192.168.9.59:9090

然而如果axios设置为baseURL: 'server:9090/api/'这种以dokcer容器名形式访问(server是spring-boot后端的容器名),是可以通过url访问nuxt项目了,但是假如在页面里面点击来访问其他页面,就会在浏览器报错:
vendor.e2feb665ef91f298be86.js:2 GET http://server:9090/api/article/1 net::ERR_CONNECTION_REFUSED
就是无法访问到server:9090

出现这些问题我查了一些资料就是,当设置baseURL为ip时,实际上是虚拟机的ip,但是在docker容器内部无法访问到外部宿主机的ip。而设置baseURL为容器名时,docker容器里能互相访问了,但是在浏览器访问的时候肯定是没法解析server这个地址的。
不知道我这种理解有没有问题。
所以想问有没有人有思路解决这个问题,设置这个baseURL能够在容器内部能访问到,而且外部浏览器也能访问到。

下面贴一下我的package.json和Dockerfile

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "docker": "nuxt build && npm start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "highlight.js": "^9.12.0",
    "nuxt": "^1.3.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.17.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}
FROM node:10.9.0-alpine

RUN npm config set registry https://registry.npm.taobao.org

ENV HOST 0.0.0.0
ENV NODE_ENV=production

WORKDIR /app

COPY package.json ./
RUN NODE_ENV=build npm install

COPY . .

EXPOSE 3000

CMD ["npm","run","docker"]
阅读 5.2k
2 个回答

看起来后端也在容器里?用 service 名在容器间相互访问是正确的,设置 axios 的 baseUrl 也没错。但为什么还改了 nuxt 的 publicPath?页面内资源引用应该用相对地址啊,为什么还要前缀 host。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题