docker部署nuxt+axios问题

发布于 2022-09-07 23:06:43 字数 1969 浏览 57 评论 0

想要用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"]

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你对谁都笑 2022-09-14 23:06:43

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

ゃ人海孤独症 2022-09-14 23:06:43

求这个解决方案,最后是如何解决的?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文