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"]
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
看起来后端也在容器里?用 service 名在容器间相互访问是正确的,设置 axios 的 baseUrl 也没错。但为什么还改了 nuxt 的 publicPath?页面内资源引用应该用相对地址啊,为什么还要前缀 host。
求这个解决方案,最后是如何解决的?