Problems with docker deployment nuxt+axios

want to deploy a project with docker, with the front end using spring-boot for the nuxt, back end.
but a problem was found when deploying nuxt, because nuxt is a server-rendered page
if axios is set to baseURL: "192.168.9.59 axios" 192.168.9.59 axios" this access is in the form of ip (192.168.9.59 is the ip, port 9090 of my virtual machine is the port developed at the back end, and it has been tested that it is possible to access API in the browser). When you visit nuxt, you will get an error:
Error: connect EHOSTUNREACH 192.168.9.59 Error: connect EHOSTUNREACH 9090 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1161:14)
it means that 192.168.9.59 Error: connect EHOSTUNREACH 9090 cannot be accessed

however, if axios is set to baseURL: "server:9090/api/" , which is accessed in the form of a dokcer container name (server is the container name of the spring-boot backend), it is possible for to access the nuxt project through url, but if you click on the page to visit other pages, An error will be reported in the browser:
vendor.e2feb665ef91f298be86.js:2 GET http://server:9090/api/article/1 net::ERR_CONNECTION_REFUSED
that is, server:9090 cannot be accessed

when these problems occur, I have checked some information, that is, when baseURL is set to ip, it is actually the ip, of the virtual machine, but the ip of the external host cannot be accessed inside the docker container. When baseURL is set to the container name, the docker container can access each other, but the address server cannot be resolved when the browser accesses it.
I don"t know if there"s anything wrong with my understanding.
so I want to ask if anyone has any ideas to solve this problem. Set the baseURL to be accessible inside the container and accessible by external browsers.

post my package.json and Dockerfile

below.
{
  "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"]
Jul.08,2021

looks like the back end is also in the container? It is correct to use the service name to access each other between containers, and it is also correct to set the baseUrl of axios. But why did you change nuxt's publicPath?? The resource reference in the page should use the relative address, so why prefix host.


how did you solve this solution in the end?

Menu