First, using docker-compose, I created a nuxt development environment (frontend) and go API server environment (app) with a node image. You should now be able to resolve the container's address with app from the frontend container.
And implement axios in SSR: true environment,
I have set the baseURL, but I noticed that the baseURL has changed to localhost: 3000 (default). I was troubled by the phenomenon that $ store.dispatch written in methods after page rendering did not work even though the process called before page rendering (written by acyn fetch ()) worked correctly.
axios: {
baseURL: 'http://app:8080',
proxy: true,
},
proxy: {
'/api': '/'
},
methods: {
axiosFunc() { //This doesn't work 404 error
const payload = {....}
this.$store.dispatch('.....', payload)
}
},
async fetch({store}) { //Move over here
const payload = {....}
await store.dispatch('.....', payload)
}
I can guess the cause a little, but after all it seems that it has changed due to the communication relationship with the server before and after page rendering. And I found the blog below.
https://rara-world.com/nuxt-docker-404-api/
Since the fetch side that executes axios in SSR (container) runs on the baseURL and the function defined in methods is called on the browser side, it was necessary to set the browserBaseURL and switch the endpoint.
Also, it seems that the browser does not have the ability to trace the address by container name.
net::ERR_NAME_NOT_RESOLVED
Put each container in a common network,
browserBaseURL: "http://app:8080",
I was able to move it safely by specifying.
Recommended Posts