I want to use docker to deploy a project. The front end uses nuxt and the back end uses spring-boot.
However, there was a problem when deploying nuxt, because nuxt is a server rendered page
If axios is set tobaseURL: '192.168.9.59:9090/api/'
This access is in the form of ip (192.168.9.59 is the ip of my virtual machine, and port 9090 is the port developed by the backend. It has been tested that accessing 192.168.9.59:9090/api/ is possible in the browser). At this time, accessing nuxt will report an error:Error: connect EHOSTUNREACH 192.168.9.59:9090 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1161:14)
It is impossible to reach 192.168.9.59:9090
However, if axios is set tobaseURL: 'server:9090/api/'
This kind of access in the form of dokcer container name (server is the container name at the back end of spring-boot) is possibleAccess via urlNuxt project, but if you click inside the page to access other pages, you will report an error in the browser:vendor.e2feb665ef91f298be86.js:2 GET http://server:9090/api/article/1 net::ERR_CONNECTION_REFUSED
Is unable to access server:9090
These problems occurred when I checked some data, that is, when the 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 the baseURL is set as the container name, the docker container can access each other, but it cannot be resolved when the browser accesses it.server
From this address.
I wonder if there is any problem with my understanding.
Therefore, I would like to ask if anyone has any ideas to solve this problem. Setting this baseURL can be accessed both inside the container and by external browsers.
Json and 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"]
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 has nuxt changed its publicPath? The resource reference in the page should use relative address, why prefix host?